Revert "Bring back tabs in groups (#919)"

This reverts commit b4a59cfb21.

functions/src/utils.ts

@@ -1,4 +1,5 @@
 import * as admin from 'firebase-admin'
+import fetch from 'node-fetch'
 
 import { chunk } from 'lodash'
 import { Contract } from '../../common/contract'

web/components/nav/group-nav-bar.tsx

@@ -0,0 +1,94 @@
+import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
+import { Item } from './sidebar-item'
+
+import clsx from 'clsx'
+import { trackCallback } from 'web/lib/service/analytics'
+import TrophyIcon from 'web/lib/icons/trophy-icon'
+import { useUser } from 'web/hooks/use-user'
+import NotificationsIcon from '../notifications-icon'
+import router from 'next/router'
+import { userProfileItem } from './bottom-nav-bar'
+
+const mobileGroupNavigation = [
+  { name: 'Markets', key: 'markets', icon: HomeIcon },
+  { name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
+  { name: 'About', key: 'about', icon: ClipboardIcon },
+]
+
+const mobileGeneralNavigation = [
+  {
+    name: 'Notifications',
+    key: 'notifications',
+    icon: NotificationsIcon,
+    href: '/notifications',
+  },
+]
+
+export function GroupNavBar(props: {
+  currentPage: string
+  onClick: (key: string) => void
+}) {
+  const { currentPage } = props
+  const user = useUser()
+
+  return (
+    <nav className="z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
+      {mobileGroupNavigation.map((item) => (
+        <NavBarItem
+          key={item.name}
+          item={item}
+          currentPage={currentPage}
+          onClick={props.onClick}
+        />
+      ))}
+
+      {mobileGeneralNavigation.map((item) => (
+        <NavBarItem
+          key={item.name}
+          item={item}
+          currentPage={currentPage}
+          onClick={() => {
+            router.push(item.href)
+          }}
+        />
+      ))}
+
+      {user && (
+        <NavBarItem
+          key={'profile'}
+          currentPage={currentPage}
+          onClick={() => {
+            router.push(`/${user.username}?tab=trades`)
+          }}
+          item={userProfileItem(user)}
+        />
+      )}
+    </nav>
+  )
+}
+
+function NavBarItem(props: {
+  item: Item
+  currentPage: string
+  onClick: (key: string) => void
+}) {
+  const { item, currentPage } = props
+  const track = trackCallback(
+    `group navbar: ${item.trackingEventName ?? item.name}`
+  )
+
+  return (
+    <button onClick={() => props.onClick(item.key ?? '#')}>
+      <a
+        className={clsx(
+          'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',
+          currentPage === item.key && 'bg-gray-200 text-indigo-700'
+        )}
+        onClick={track}
+      >
+        {item.icon && <item.icon className="my-1 mx-auto h-6 w-6" />}
+        {item.name}
+      </a>
+    </button>
+  )
+}

web/components/nav/group-sidebar.tsx

@@ -0,0 +1,82 @@
+import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
+import clsx from 'clsx'
+import { useUser } from 'web/hooks/use-user'
+import { ManifoldLogo } from './manifold-logo'
+import { ProfileSummary } from './profile-menu'
+import React from 'react'
+import TrophyIcon from 'web/lib/icons/trophy-icon'
+import { SignInButton } from '../sign-in-button'
+import NotificationsIcon from '../notifications-icon'
+import { SidebarItem } from './sidebar-item'
+import { buildArray } from 'common/util/array'
+import { User } from 'common/user'
+import { Row } from '../layout/row'
+import { Spacer } from '../layout/spacer'
+
+const groupNavigation = [
+  { name: 'Markets', key: 'markets', icon: HomeIcon },
+  { name: 'About', key: 'about', icon: ClipboardIcon },
+  { name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
+]
+
+const generalNavigation = (user?: User | null) =>
+  buildArray(
+    user && {
+      name: 'Notifications',
+      href: `/notifications`,
+      key: 'notifications',
+      icon: NotificationsIcon,
+    }
+  )
+
+export function GroupSidebar(props: {
+  groupName: string
+  className?: string
+  onClick: (key: string) => void
+  joinOrAddQuestionsButton: React.ReactNode
+  currentKey: string
+}) {
+  const { className, groupName, currentKey } = props
+
+  const user = useUser()
+
+  return (
+    <nav
+      aria-label="Group Sidebar"
+      className={clsx('flex max-h-[100vh] flex-col', className)}
+    >
+      <ManifoldLogo className="pt-6" twoLine />
+      <Row className="pl-2 text-xl text-indigo-700 sm:mt-3">{groupName}</Row>
+
+      <div className=" min-h-0 shrink flex-col items-stretch gap-1  pt-6 lg:flex ">
+        {user ? (
+          <ProfileSummary user={user} />
+        ) : (
+          <SignInButton className="mb-4" />
+        )}
+      </div>
+
+      {/* Desktop navigation */}
+      {groupNavigation.map((item) => (
+        <SidebarItem
+          key={item.key}
+          item={item}
+          currentPage={currentKey}
+          onClick={props.onClick}
+        />
+      ))}
+      {generalNavigation(user).map((item) => (
+        <SidebarItem
+          key={item.key}
+          item={item}
+          currentPage={currentKey}
+          onClick={props.onClick}
+        />
+      ))}
+
+      <Spacer h={2} />
+
+      {props.joinOrAddQuestionsButton}
+    </nav>
+  )
+}

web/components/nav/sidebar.tsx

@@ -26,14 +26,9 @@ import TrophyIcon from 'web/lib/icons/trophy-icon'
 import { SignInButton } from '../sign-in-button'
 import { SidebarItem } from './sidebar-item'
 import { MoreButton } from './more-button'
-import { Row } from '../layout/row'
-import { Spacer } from '../layout/spacer'
 
-export default function Sidebar(props: {
+export default function Sidebar(props: { className?: string }) {
-  className?: string
+  const { className } = props
-  logoSubheading?: string
-}) {
-  const { className, logoSubheading } = props
   const router = useRouter()
   const currentPage = router.pathname
 
@@ -56,13 +51,7 @@ export default function Sidebar(props: {
       aria-label="Sidebar"
       className={clsx('flex max-h-[100vh] flex-col', className)}
     >
-      <ManifoldLogo className="pt-6" twoLine />
+      <ManifoldLogo className="py-6" twoLine />
-      {logoSubheading && (
-        <Row className="pl-2 text-2xl text-indigo-700 sm:mt-3">
-          {logoSubheading}
-        </Row>
-      )}
-      <Spacer h={6} />
 
       {!user && <SignInButton className="mb-4" />}
 

web/components/page.tsx

@@ -9,15 +9,8 @@ export function Page(props: {
   className?: string
   rightSidebarClassName?: string
   children?: ReactNode
-  logoSubheading?: string
 }) {
-  const {
+  const { children, rightSidebar, className, rightSidebarClassName } = props
-    children,
-    rightSidebar,
-    className,
-    rightSidebarClassName,
-    logoSubheading,
-  } = props
 
   const bottomBarPadding = 'pb-[58px] lg:pb-0 '
   return (
@@ -30,10 +23,7 @@ export function Page(props: {
         )}
       >
         <Toaster />
-        <Sidebar
+        <Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex" />
-          logoSubheading={logoSubheading}
-          className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex"
-        />
         <main
           className={clsx(
             'lg:col-span-8 lg:pt-6',

web/pages/group/[...slugs]/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { toast } from 'react-hot-toast'
+import { toast, Toaster } from 'react-hot-toast'
 
 import { Group, GROUP_CHAT_SLUG } from 'common/group'
 import { Contract, listContractsByGroupSlug } from 'web/lib/firebase/contracts'
@@ -48,11 +48,11 @@ import { Spacer } from 'web/components/layout/spacer'
 import { usePost } from 'web/hooks/use-post'
 import { useAdmin } from 'web/hooks/use-admin'
 import { track } from '@amplitude/analytics-browser'
+import { GroupNavBar } from 'web/components/nav/group-nav-bar'
 import { ArrowLeftIcon } from '@heroicons/react/solid'
+import { GroupSidebar } from 'web/components/nav/group-sidebar'
 import { SelectMarketsModal } from 'web/components/contract-select-modal'
 import { BETTORS } from 'common/user'
-import { Page } from 'web/components/page'
-import { Tabs } from 'web/components/layout/tabs'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -140,6 +140,10 @@ export default function GroupPage(props: {
   const user = useUser()
   const isAdmin = useAdmin()
   const memberIds = useMemberIds(group?.id ?? null) ?? props.memberIds
+  // Note: Keep in sync with sidebarPages
+  const [sidebarIndex, setSidebarIndex] = useState(
+    ['markets', 'leaderboards', 'about'].indexOf(page ?? 'markets')
+  )
 
   useSaveReferral(user, {
     defaultReferrerUsername: creator.username,
@@ -153,7 +157,7 @@ export default function GroupPage(props: {
   const isMember = user && memberIds.includes(user.id)
   const maxLeaderboardSize = 50
 
-  const leaderboardTab = (
+  const leaderboardPage = (
     <Col>
       <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
         <GroupLeaderboard
@@ -172,7 +176,7 @@ export default function GroupPage(props: {
     </Col>
   )
 
-  const aboutTab = (
+  const aboutPage = (
     <Col>
       {(group.aboutPostId != null || isCreator || isAdmin) && (
         <GroupAboutPost
@@ -192,21 +196,16 @@ export default function GroupPage(props: {
     </Col>
   )
 
-  const questionsTab = (
+  const questionsPage = (
     <>
-      <div className={'flex justify-end '}>
+      {/* align the divs to the right */}
-        <div
+      <div className={' flex justify-end px-2 pb-2 sm:hidden'}>
-          className={
+        <div>
-            'flex items-end justify-self-end px-2 md:absolute md:top-0 md:pb-2'
+          <JoinOrAddQuestionsButtons
-          }
+            group={group}
-        >
+            user={user}
-          <div>
+            isMember={!!isMember}
-            <JoinOrAddQuestionsButtons
+          />
-              group={group}
-              user={user}
-              isMember={!!isMember}
-            />
-          </div>
         </div>
       </div>
       <ContractSearch
@@ -220,37 +219,88 @@ export default function GroupPage(props: {
     </>
   )
 
-  const tabs = [
+  const sidebarPages = [
     {
       title: 'Markets',
-      content: questionsTab,
+      content: questionsPage,
+      href: groupPath(group.slug, 'markets'),
+      key: 'markets',
     },
     {
       title: 'Leaderboards',
-      content: leaderboardTab,
+      content: leaderboardPage,
+      href: groupPath(group.slug, 'leaderboards'),
+      key: 'leaderboards',
     },
     {
       title: 'About',
-      content: aboutTab,
+      content: aboutPage,
+      href: groupPath(group.slug, 'about'),
+      key: 'about',
     },
   ]
 
+  const pageContent = sidebarPages[sidebarIndex].content
+  const onSidebarClick = (key: string) => {
+    const index = sidebarPages.findIndex((t) => t.key === key)
+    setSidebarIndex(index)
+    // Append the page to the URL, e.g. /group/mexifold/markets
+    router.replace(
+      { query: { ...router.query, slugs: [group.slug, key] } },
+      undefined,
+      { shallow: true }
+    )
+  }
+
+  const joinOrAddQuestionsButton = (
+    <JoinOrAddQuestionsButtons
+      group={group}
+      user={user}
+      isMember={!!isMember}
+    />
+  )
+
   return (
-    <Page logoSubheading={group.name}>
+    <>
-      <SEO
+      <TopGroupNavBar
-        title={group.name}
+        group={group}
-        description={`Created by ${creator.name}. ${group.about}`}
+        currentPage={sidebarPages[sidebarIndex].key}
-        url={groupPath(group.slug)}
+        onClick={onSidebarClick}
       />
-      <TopGroupNavBar group={group} />
+      <div>
-      <div className={'relative p-2 pt-0 md:pt-2'}>
+        <div
-        <Tabs tabs={tabs} />
+          className={
+            'mx-auto w-full pb-[58px] lg:grid lg:grid-cols-12 lg:gap-x-2 lg:pb-0 xl:max-w-7xl xl:gap-x-8'
+          }
+        >
+          <Toaster />
+          <GroupSidebar
+            groupName={group.name}
+            className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex"
+            onClick={onSidebarClick}
+            joinOrAddQuestionsButton={joinOrAddQuestionsButton}
+            currentKey={sidebarPages[sidebarIndex].key}
+          />
+
+          <SEO
+            title={group.name}
+            description={`Created by ${creator.name}. ${group.about}`}
+            url={groupPath(group.slug)}
+          />
+          <main className={'px-2 pt-1 lg:col-span-8 lg:pt-6 xl:col-span-8'}>
+            {pageContent}
+          </main>
+        </div>
       </div>
-    </Page>
+    </>
   )
 }
 
-export function TopGroupNavBar(props: { group: Group }) {
+export function TopGroupNavBar(props: {
+  group: Group
+  currentPage: string
+  onClick: (key: string) => void
+}) {
   return (
     <header className="sticky top-0 z-50 w-full border-b border-gray-200 md:hidden lg:col-span-12">
       <div className="flex items-center   bg-white  px-4">
@@ -267,6 +317,7 @@ export function TopGroupNavBar(props: { group: Group }) {
           </h1>
         </div>
       </div>
+      <GroupNavBar currentPage={props.currentPage} onClick={props.onClick} />
     </header>
   )
 }
@@ -279,7 +330,7 @@ function JoinOrAddQuestionsButtons(props: {
 }) {
   const { group, user, isMember } = props
   return user && isMember ? (
-    <Row className={'w-full self-start md:mt-2 '}>
+    <Row className={'w-full self-start pt-4'}>
       <AddContractButton group={group} user={user} />
     </Row>
   ) : group.anyoneCanJoin ? (