Added SettingsTable.

components/common/MobileMenu.js

@@ -1,17 +1,36 @@
 import classNames from 'classnames';
+import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './MobileMenu.module.css';
 
 export default function MobileMenu({ items = [], onClose }) {
+  const { pathname } = useRouter();
+
+  const Items = ({ items, className }) => (
+    <div className={classNames(styles.items, className)}>
+      {items.map(({ label, value, children }) => {
+        const selected = pathname === value;
+
+        return (
+          <>
+            <Link
+              key={value}
+              href={value}
+              className={classNames(styles.item, { [styles.selected]: selected })}
+              onClick={onClose}
+            >
+              {label}
+            </Link>
+            {children && <Items items={children} className={styles.submenu} />}
+          </>
+        );
+      })}
+    </div>
+  );
+
   return (
     <div className={classNames(styles.menu)}>
-      <div className={styles.items}>
-        {items.map(({ label, value }) => (
-          <Link key={value} href={value} className={styles.item} onClick={onClose}>
-            {label}
-          </Link>
-        ))}
-      </div>
+      <Items items={items} />
     </div>
   );
 }