Added router navigation for settings and details.

components/common/NavMenu.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import styles from './NavMenu.module.css';
+
+export default function NavMenu({ options = [], className, onSelect = () => {} }) {
+  const router = useRouter();
+
+  return (
+    <div className={classNames(styles.menu, className)}>
+      {options
+        .filter(({ hidden }) => !hidden)
+        .map(option => {
+          const { label, value, className: customClassName, render } = option;
+
+          return render ? (
+            render(option)
+          ) : (
+            <div
+              key={value}
+              className={classNames(styles.option, customClassName, {
+                [styles.selected]: router.asPath === value,
+              })}
+              onClick={e => onSelect(value, e)}
+            >
+              {label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}

components/common/NavMenu.module.css

@@ -0,0 +1,20 @@
+.menu {
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.option {
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.option:hover {
+  background: var(--gray75);
+}
+
+.selected {
+  font-weight: 600;
+}

components/common/UserButton.js

@@ -27,6 +27,7 @@ export default function UserButton() {
       value: 'username',
       className: styles.username,
     },
+    { label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
     { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
   ];
 
@@ -35,6 +36,8 @@ export default function UserButton() {
 
     if (value === 'logout') {
       router.push('/logout');
+    } else if (value === 'profile') {
+      router.push('/settings/profile');
     }
   }