Added SettingsTable.

components/common/HamburgerButton.js

@@ -19,6 +19,20 @@ export default function HamburgerButton() {
     !cloudMode && {
       label: formatMessage(labels.settings),
       value: '/settings',
+      children: [
+        {
+          label: formatMessage(labels.websites),
+          value: '/settings/websites',
+        },
+        {
+          label: formatMessage(labels.teams),
+          value: '/settings/teams',
+        },
+        {
+          label: formatMessage(labels.users),
+          value: '/settings/users',
+        },
+      ],
     },
     {
       label: formatMessage(labels.profile),

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>
   );
 }

components/common/MobileMenu.module.css

@@ -25,5 +25,15 @@
 }
 
 a.item {
+  color: var(--base600);
+}
+
+a.item.selected,
+.submenu a.item.selected {
   color: var(--base900);
 }
+
+.submenu a.item {
+  color: var(--base600);
+  margin-left: 40px;
+}

components/common/SettingsTable.js

@@ -0,0 +1,36 @@
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
+import styles from './SettingsTable.module.css';
+
+export default function SettingsTable({ columns = [], data = [], children, cellRender }) {
+  return (
+    <Table columns={columns} rows={data}>
+      <TableHeader className={styles.header}>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} className={styles.cell} style={columns[index].style}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody className={styles.body}>
+        {(row, keys, rowIndex) => {
+          row.action = children(row, keys, rowIndex);
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys} className={styles.row}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell key={colIndex} className={styles.cell} style={columns[colIndex].style}>
+                    <label className={styles.label}>{columns[colIndex].label}</label>
+                    {cellRender ? cellRender(row, data, key, colIndex) : data[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}

components/common/SettingsTable.module.css

@@ -0,0 +1,40 @@
+.row .cell:last-child {
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.label {
+  display: none;
+  font-weight: 700;
+}
+
+@media screen and (max-width: 992px) {
+  .header .cell {
+    display: none;
+  }
+
+  .label {
+    display: block;
+    min-width: 100px;
+  }
+
+  .row .cell {
+    padding-left: 0;
+    flex-basis: 100%;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .row {
+    flex-wrap: wrap;
+  }
+
+  .header .cell:last-child {
+    display: none;
+  }
+
+  .row .cell:last-child {
+    padding-left: 0;
+    flex-basis: 100%;
+  }
+}