Rework nav to show list of groups

web/components/nav/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   UserGroupIcon,
   ChevronDownIcon,
   TrendingUpIcon,
+  ChatIcon,
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -25,6 +26,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 +84,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 +105,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 +122,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,6 +139,7 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
         )}
         aria-current={item.href == currentPage ? 'page' : undefined}
       >
+        {item.icon && (
           <item.icon
             className={clsx(
               item.href == currentPage
@@ -139,6 +149,7 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
             )}
             aria-hidden="true"
           />
+        )}
         <span className="truncate">{item.name}</span>
       </a>
     </Link>
@@ -167,14 +178,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 +196,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 +217,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) =>
+        {navigationOptions.map((item) => (
-          item.name === 'Notifications' ? (
+          <SidebarItem key={item.href} item={item} currentPage={currentPage} />
-            <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}
-            />
-          )
-        )}
-
         <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>
+    </>
+  )
+}