Account settings page.

components/layout/FormLayout.module.css

@@ -5,7 +5,7 @@
 }
 
 .form label {
-  display: inline-block;
+  display: block;
   min-width: 100px;
 }
 
@@ -37,6 +37,7 @@
   margin-left: 16px;
   padding: 4px 10px;
   border-radius: 4px;
+  white-space: nowrap;
 }
 
 .error:after {

components/layout/Header.js

@@ -15,7 +15,7 @@ export default function Header() {
       <div className="row align-items-center">
         <div className="col">
           <div className={styles.title}>
-            <Icon icon={<Logo />} size="L" className={styles.logo} />
+            <Icon icon={<Logo />} size="large" className={styles.logo} />
             {user ? <Link href="/">umami</Link> : 'umami'}
           </div>
         </div>

components/layout/MenuLayout.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import styles from './MenuLayout.module.css';
+
+export default function MenuLayout({ menu, selectedOption, onMenuSelect, children }) {
+  const [option, setOption] = useState(selectedOption);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.menu}>
+        {menu.map(item => (
+          <div
+            className={classNames(styles.option, { [styles.active]: option === item })}
+            onClick={() => setOption(item)}
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+      <div className={styles.content}>
+        {typeof children === 'function' ? children(option) : children}
+      </div>
+    </div>
+  );
+}

components/layout/MenuLayout.module.css

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  flex: 1;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  padding-top: 30px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--gray300);
+  padding-left: 30px;
+  flex: 1;
+}
+
+.option {
+  padding: 8px 20px;
+  cursor: pointer;
+  min-width: 140px;
+  margin-right: 30px;
+  border-radius: 4px;
+}
+
+.option:hover {
+  background: var(--gray75);
+}
+
+.active {
+  font-weight: 600;
+}

components/layout/PageHeader.js

@@ -1,12 +1,6 @@
-import React, { Children } from 'react';
+import React from 'react';
 import styles from './PageHeader.module.css';
 
 export default function PageHeader({ children }) {
-  const [firstChild, ...otherChildren] = Children.toArray(children);
-  return (
-    <div className={styles.header}>
-      <div className={styles.title}> {firstChild}</div>
-      {otherChildren && <div>{otherChildren}</div>}
-    </div>
-  );
+  return <div className={styles.header}>{children}</div>;
 }

components/layout/PageHeader.module.css

@@ -3,8 +3,5 @@
   justify-content: space-between;
   align-items: center;
   line-height: 80px;
-}
-
-.title {
   font-size: var(--font-size-large);
 }