From 2d79d7f8dbf98eeee28d99cbad4418cb13d8f63f Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 29 Jun 2022 12:33:20 -0500
Subject: [PATCH] Rework nav to show list of groups (#596)

* Rework nav to show list of groups

* Fix lint

* Replace Portfolio with Profile link

* Lint: remove unused vars
---
 web/components/nav/nav-bar.tsx |  55 +++++++-------
 web/components/nav/sidebar.tsx | 133 ++++++++++++++++-----------------
 2 files changed, 90 insertions(+), 98 deletions(-)

diff --git a/web/components/nav/nav-bar.tsx b/web/components/nav/nav-bar.tsx
index 23c9ab38..5a997b46 100644
--- a/web/components/nav/nav-bar.tsx
+++ b/web/components/nav/nav-bar.tsx
@@ -3,7 +3,6 @@ import Link from 'next/link'
 import {
   HomeIcon,
   MenuAlt3Icon,
-  PresentationChartLineIcon,
   SearchIcon,
   XIcon,
 } from '@heroicons/react/outline'
@@ -19,14 +18,9 @@ import NotificationsIcon from 'web/components/notifications-icon'
 import { useIsIframe } from 'web/hooks/use-is-iframe'
 import { trackCallback } from 'web/lib/service/analytics'
 
-function getNavigation(username: string) {
+function getNavigation() {
   return [
     { name: 'Home', href: '/home', icon: HomeIcon },
-    {
-      name: 'Portfolio',
-      href: `/${username}?tab=bets`,
-      icon: PresentationChartLineIcon,
-    },
     {
       name: 'Notifications',
       href: `/notifications`,
@@ -55,38 +49,39 @@ export function BottomNavBar() {
   }
 
   const navigationOptions =
-    user === null
-      ? signedOutNavigation
-      : getNavigation(user?.username || 'error')
+    user === null ? signedOutNavigation : getNavigation()
 
   return (
     <nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
       {navigationOptions.map((item) => (
         <NavBarItem key={item.name} item={item} currentPage={currentPage} />
       ))}
+
+      {user && (
+        <NavBarItem
+          key={'profile'}
+          currentPage={currentPage}
+          item={{
+            name: formatMoney(user.balance),
+            href: `/${user.username}?tab=bets`,
+            icon: () => (
+              <Avatar
+                className="mx-auto my-1"
+                size="xs"
+                username={user.username}
+                avatarUrl={user.avatarUrl}
+                noLink
+              />
+            ),
+          }}
+        />
+      )}
       <div
         className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
         onClick={() => setSidebarOpen(true)}
       >
-        {user === null ? (
-          <>
-            <MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
-            More
-          </>
-        ) : user ? (
-          <>
-            <Avatar
-              className="mx-auto my-1"
-              size="xs"
-              username={user.username}
-              avatarUrl={user.avatarUrl}
-              noLink
-            />
-            {formatMoney(user.balance)}
-          </>
-        ) : (
-          <></>
-        )}
+        <MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
+        More
       </div>
 
       <MobileSidebar
@@ -109,7 +104,7 @@ function NavBarItem(props: { item: Item; currentPage: string }) {
         )}
         onClick={trackCallback('navbar: ' + item.name)}
       >
-        <item.icon className="my-1 mx-auto h-6 w-6" />
+        {item.icon && <item.icon className="my-1 mx-auto h-6 w-6" />}
         {item.name}
       </a>
     </Link>
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 0b3d9393..58011127 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -6,8 +6,8 @@ import {
   CashIcon,
   HeartIcon,
   UserGroupIcon,
-  ChevronDownIcon,
   TrendingUpIcon,
+  ChatIcon,
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -25,6 +25,7 @@ import { useMemberGroups } from 'web/hooks/use-group'
 import { groupPath } from 'web/lib/firebase/groups'
 import { trackCallback, withTracking } from 'web/lib/service/analytics'
 import { Group } from 'common/group'
+import { Spacer } from '../layout/spacer'
 
 function getNavigation() {
   return [
@@ -82,8 +83,20 @@ const signedOutNavigation = [
 ]
 
 const signedOutMobileNavigation = [
+  {
+    name: 'About',
+    href: 'https://docs.manifold.markets/$how-to',
+    icon: BookOpenIcon,
+  },
   { name: 'Charity', href: '/charity', icon: HeartIcon },
   { name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon },
+  { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh', icon: ChatIcon },
+]
+
+const signedInMobileNavigation = [
+  ...(IS_PRIVATE_MANIFOLD
+    ? []
+    : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]),
   {
     name: 'About',
     href: 'https://docs.manifold.markets/$how-to',
@@ -91,17 +104,12 @@ const signedOutMobileNavigation = [
   },
 ]
 
-const signedInMobileNavigation = [
-  ...(IS_PRIVATE_MANIFOLD
-    ? []
-    : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]),
-  ...signedOutMobileNavigation,
-]
-
 function getMoreMobileNav() {
   return [
+    { name: 'Send M$', href: '/links' },
+    { name: 'Charity', href: '/charity' },
     { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
-    { name: 'Statistics', href: '/stats' },
+    { name: 'Leaderboards', href: '/leaderboards' },
     {
       name: 'Sign out',
       href: '#',
@@ -113,7 +121,7 @@ function getMoreMobileNav() {
 export type Item = {
   name: string
   href: string
-  icon: React.ComponentType<{ className?: string }>
+  icon?: React.ComponentType<{ className?: string }>
 }
 
 function SidebarItem(props: { item: Item; currentPage: string }) {
@@ -130,15 +138,17 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
         )}
         aria-current={item.href == currentPage ? 'page' : undefined}
       >
-        <item.icon
-          className={clsx(
-            item.href == currentPage
-              ? 'text-gray-500'
-              : 'text-gray-400 group-hover:text-gray-500',
-            '-ml-1 mr-3 h-6 w-6 flex-shrink-0'
-          )}
-          aria-hidden="true"
-        />
+        {item.icon && (
+          <item.icon
+            className={clsx(
+              item.href == currentPage
+                ? 'text-gray-500'
+                : 'text-gray-400 group-hover:text-gray-500',
+              '-ml-1 mr-3 h-6 w-6 flex-shrink-0'
+            )}
+            aria-hidden="true"
+          />
+        )}
         <span className="truncate">{item.name}</span>
       </a>
     </Link>
@@ -167,14 +177,6 @@ function MoreButton() {
   return <SidebarButton text={'More'} icon={DotsHorizontalIcon} />
 }
 
-function GroupsButton() {
-  return (
-    <SidebarButton icon={UserGroupIcon} text={'Groups'}>
-      <ChevronDownIcon className=" mt-0.5 ml-2 h-5 w-5" aria-hidden="true" />
-    </SidebarButton>
-  )
-}
-
 export default function Sidebar(props: { className?: string }) {
   const { className } = props
   const router = useRouter()
@@ -193,31 +195,20 @@ export default function Sidebar(props: { className?: string }) {
   return (
     <nav aria-label="Sidebar" className={className}>
       <ManifoldLogo className="pb-6" twoLine />
+
+      <CreateQuestionButton user={user} />
+      <Spacer h={4} />
       {user && (
-        <div className="mb-2" style={{ minHeight: 80 }}>
+        <div className="w-full" style={{ minHeight: 80 }}>
           <ProfileSummary user={user} />
         </div>
       )}
 
       {/* Mobile navigation */}
       <div className="space-y-1 lg:hidden">
-        {user && (
-          <MenuButton
-            buttonContent={<GroupsButton />}
-            menuItems={[{ name: 'Explore', href: '/groups' }, ...memberItems]}
-            className={'relative z-50 flex-shrink-0'}
-          />
-        )}
         {mobileNavigationOptions.map((item) => (
           <SidebarItem key={item.href} item={item} currentPage={currentPage} />
         ))}
-        {!user && (
-          <SidebarItem
-            key={'Groups'}
-            item={{ name: 'Groups', href: '/groups', icon: UserGroupIcon }}
-            currentPage={currentPage}
-          />
-        )}
 
         {user && (
           <MenuButton
@@ -225,41 +216,47 @@ export default function Sidebar(props: { className?: string }) {
             buttonContent={<MoreButton />}
           />
         )}
+
+        <GroupsList currentPage={currentPage} memberItems={memberItems} />
       </div>
 
       {/* Desktop navigation */}
       <div className="hidden space-y-1 lg:block">
-        {navigationOptions.map((item) =>
-          item.name === 'Notifications' ? (
-            <div key={item.href}>
-              <SidebarItem item={item} currentPage={currentPage} />
-              {user && (
-                <MenuButton
-                  key={'groupsdropdown'}
-                  buttonContent={<GroupsButton />}
-                  menuItems={[
-                    { name: 'Explore', href: '/groups' },
-                    ...memberItems,
-                  ]}
-                  className={'relative z-50 flex-shrink-0'}
-                />
-              )}
-            </div>
-          ) : (
-            <SidebarItem
-              key={item.href}
-              item={item}
-              currentPage={currentPage}
-            />
-          )
-        )}
-
+        {navigationOptions.map((item) => (
+          <SidebarItem key={item.href} item={item} currentPage={currentPage} />
+        ))}
         <MenuButton
           menuItems={getMoreNavigation(user)}
           buttonContent={<MoreButton />}
         />
+
+        <Spacer h={6} />
+        <GroupsList currentPage={currentPage} memberItems={memberItems} />
       </div>
-      <CreateQuestionButton user={user} />
     </nav>
   )
 }
+
+function GroupsList(props: { currentPage: string; memberItems: Item[] }) {
+  const { currentPage, memberItems } = props
+  return (
+    <>
+      <SidebarItem
+        item={{ name: 'Groups', href: '/groups', icon: UserGroupIcon }}
+        currentPage={currentPage}
+      />
+
+      <div className="mt-1 space-y-0.5">
+        {memberItems.map((item) => (
+          <a
+            key={item.name}
+            href={item.href}
+            className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+          >
+            <span className="truncate">&nbsp; {item.name}</span>
+          </a>
+        ))}
+      </div>
+    </>
+  )
+}