Add "more" and profile link

web/components/nav/profile-menu.tsx

@@ -1,37 +1,11 @@
 import { firebaseLogout, User } from '../../lib/firebase/users'
 import { formatMoney } from '../../../common/util/format'
 import { Avatar } from '../avatar'
-import { Col } from '../layout/col'
-import { MenuButton } from './menu'
 import { IS_PRIVATE_MANIFOLD } from '../../../common/envs/constants'
+import { Row } from '../layout/row'
 
-
+export function getNavigationOptions() {
-function getNavigationOptions(
-  user: User | undefined,
-  options: { mobile: boolean }
-) {
-  const { mobile } = options
   return [
-    {
-      name: 'Home',
-      href: user ? '/home' : '/',
-    },
-    ...(mobile
-      ? [
-          {
-            name: 'Markets',
-            href: '/markets',
-          },
-          {
-            name: 'Communities',
-            href: '/folds',
-          },
-        ]
-      : []),
-    {
-      name: `Your profile`,
-      href: `/${user?.username}`,
-    },
     {
       name: 'Your trades',
       href: '/trades',
@@ -57,10 +31,6 @@ function getNavigationOptions(
             name: 'Discord',
             href: 'https://discord.gg/eHQBNBqXuh',
           },
-          {
-            name: 'About',
-            href: '/about',
-          },
         ]),
     {
       name: 'Sign out',
@@ -70,18 +40,18 @@ function getNavigationOptions(
   ]
 }
 
-function ProfileSummary(props: { user: User | undefined }) {
+export function ProfileSummary(props: { user: User | undefined }) {
   const { user } = props
   return (
-    <Col className="avatar items-center gap-2 sm:flex-row sm:gap-4">
+    <Row className="group avatar items-center gap-4 py-6 text-gray-600">
       <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
 
       <div className="truncate text-left sm:w-32">
         <div className="hidden sm:flex">{user?.name}</div>
-        <div className="text-sm text-gray-700">
+        <div className="text-sm">
           {user ? formatMoney(Math.floor(user.balance)) : ' '}
         </div>
       </div>
-    </Col>
+    </Row>
   )
 }

web/components/nav/sidebar.tsx

@@ -3,6 +3,7 @@ import {
   UserGroupIcon,
   SearchIcon,
   BookOpenIcon,
+  DotsHorizontalIcon,
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import _ from 'lodash'
@@ -10,10 +11,10 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useFollowedFolds } from '../../hooks/use-fold'
 import { useUser } from '../../hooks/use-user'
-import { Row } from '../layout/row'
 import { Spacer } from '../layout/spacer'
 import { ManifoldLogo } from './manifold-logo'
-import { NavOptions } from './nav-bar'
+import { MenuButton } from './menu'
+import { getNavigationOptions, ProfileSummary } from './profile-menu'
 
 const navigation = [
   { name: 'Home', href: '/home', icon: HomeIcon },
@@ -32,8 +33,6 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
   return (
     <Link href={item.href} key={item.name}>
       <a
-        key={item.name}
-        href={item.href}
         className={clsx(
           item.href == currentPage
             ? 'bg-gray-200 text-gray-900'
@@ -57,6 +56,18 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
   )
 }
 
+function MoreButton() {
+  return (
+    <a className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-50">
+      <DotsHorizontalIcon
+        className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+        aria-hidden="true"
+      />
+      <span className="truncate">More</span>
+    </a>
+  )
+}
+
 export default function Sidebar() {
   const router = useRouter()
   const currentPage = router.pathname
@@ -74,11 +85,22 @@ export default function Sidebar() {
         {navigation.map((item) => (
           <SidebarItem item={item} currentPage={currentPage} />
         ))}
+
+        <MenuButton
+          menuItems={getNavigationOptions()}
+          buttonContent={<MoreButton />}
+        />
       </div>
 
-      <Row className="items-center gap-6 py-6 sm:gap-8">
+      {user && (
-        {(user || user === null) && <NavOptions user={user} />}
+        <div>
-      </Row>
+          <Link href={`/${user.username}`}>
+            <a>
+              <ProfileSummary user={user} />
+            </a>
+          </Link>
+        </div>
+      )}
 
       <div className="pt-10">
         <SidebarItem