Bring back tabs in groups (#923)

web/components/contract/contract-tabs.tsx

@@ -49,6 +49,7 @@ export function ContractTabs(props: { contract: Contract; bets: Bet[] }) {
 
   return (
     <Tabs
+      className="mb-4"
       currentPageForAnalytics={'contract'}
       tabs={[
         {

web/components/following-button.tsx

@@ -115,6 +115,7 @@ function FollowsDialog(props: {
         <div className="p-2 pb-1 text-xl">{user.name}</div>
         <div className="p-2 pt-0 text-sm text-gray-500">@{user.username}</div>
         <Tabs
+          className="mb-4"
           tabs={[
             {
               title: 'Following',

web/components/layout/tabs.tsx

@@ -31,7 +31,7 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
   return (
     <>
       <nav
-        className={clsx('mb-4 space-x-8 border-b border-gray-200', className)}
+        className={clsx(' space-x-8 border-b border-gray-200', className)}
         aria-label="Tabs"
       >
         {tabs.map((tab, i) => (

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

@@ -1,94 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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,9 +26,14 @@ 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: { className?: string }) {
+export default function Sidebar(props: {
-  const { className } = props
+  className?: string
+  logoSubheading?: string
+}) {
+  const { className, logoSubheading } = props
   const router = useRouter()
   const currentPage = router.pathname
 
@@ -51,7 +56,13 @@ export default function Sidebar(props: { className?: string }) {
       aria-label="Sidebar"
       className={clsx('flex max-h-[100vh] flex-col', className)}
     >
-      <ManifoldLogo className="py-6" twoLine />
+      <ManifoldLogo className="pt-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,8 +9,15 @@ export function Page(props: {
   className?: string
   rightSidebarClassName?: string
   children?: ReactNode
+  logoSubheading?: string
 }) {
-  const { children, rightSidebar, className, rightSidebarClassName } = props
+  const {
+    children,
+    rightSidebar,
+    className,
+    rightSidebarClassName,
+    logoSubheading,
+  } = props
 
   const bottomBarPadding = 'pb-[58px] lg:pb-0 '
   return (
@@ -23,7 +30,10 @@ export function Page(props: {
         )}
       >
         <Toaster />
-        <Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex" />
+        <Sidebar
+          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/components/referrals-button.tsx

@@ -64,6 +64,7 @@ function ReferralsDialog(props: {
         <div className="p-2 pb-1 text-xl">{user.name}</div>
         <div className="p-2 pt-0 text-sm text-gray-500">@{user.username}</div>
         <Tabs
+          className="mb-4"
           tabs={[
             {
               title: 'Referrals',

web/pages/challenges/index.tsx

@@ -92,7 +92,7 @@ export default function ChallengesListPage() {
           tap the button above to create a new market & challenge in one.
         </p>
 
-        <Tabs tabs={[...userTab, ...publicTab]} />
+        <Tabs className="mb-4" tabs={[...userTab, ...publicTab]} />
       </Col>
     </Page>
   )

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, Toaster } from 'react-hot-toast'
+import { toast } 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,10 +140,6 @@ 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,
@@ -157,7 +153,7 @@ export default function GroupPage(props: {
   const isMember = user && memberIds.includes(user.id)
   const maxLeaderboardSize = 50
 
-  const leaderboardPage = (
+  const leaderboardTab = (
     <Col>
       <div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
         <GroupLeaderboard
@@ -176,7 +172,7 @@ export default function GroupPage(props: {
     </Col>
   )
 
-  const aboutPage = (
+  const aboutTab = (
     <Col>
       {(group.aboutPostId != null || isCreator || isAdmin) && (
         <GroupAboutPost
@@ -196,16 +192,21 @@ export default function GroupPage(props: {
     </Col>
   )
 
-  const questionsPage = (
+  const questionsTab = (
     <>
-      {/* align the divs to the right */}
+      <div className={'flex justify-end '}>
-      <div className={' flex justify-end px-2 pb-2 sm:hidden'}>
+        <div
-        <div>
+          className={
-          <JoinOrAddQuestionsButtons
+            'flex items-end justify-self-end px-2 md:absolute md:top-0 md:pb-2'
-            group={group}
+          }
-            user={user}
+        >
-            isMember={!!isMember}
+          <div>
-          />
+            <JoinOrAddQuestionsButtons
+              group={group}
+              user={user}
+              isMember={!!isMember}
+            />
+          </div>
         </div>
       </div>
       <ContractSearch
@@ -220,88 +221,37 @@ export default function GroupPage(props: {
     </>
   )
 
-  const sidebarPages = [
+  const tabs = [
     {
       title: 'Markets',
-      content: questionsPage,
+      content: questionsTab,
-      href: groupPath(group.slug, 'markets'),
-      key: 'markets',
     },
     {
       title: 'Leaderboards',
-      content: leaderboardPage,
+      content: leaderboardTab,
-      href: groupPath(group.slug, 'leaderboards'),
-      key: 'leaderboards',
     },
     {
       title: 'About',
-      content: aboutPage,
+      content: aboutTab,
-      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}>
-      <TopGroupNavBar
+      <SEO
-        group={group}
+        title={group.name}
-        currentPage={sidebarPages[sidebarIndex].key}
+        description={`Created by ${creator.name}. ${group.about}`}
-        onClick={onSidebarClick}
+        url={groupPath(group.slug)}
       />
-      <div>
+      <TopGroupNavBar group={group} />
-        <div
+      <div className={'relative p-2 pt-0 md:pt-2'}>
-          className={
+        <Tabs className={'mb-2'} tabs={tabs} />
-            '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: {
+export function TopGroupNavBar(props: { group: Group }) {
-  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">
@@ -318,7 +268,6 @@ export function TopGroupNavBar(props: {
           </h1>
         </div>
       </div>
-      <GroupNavBar currentPage={props.currentPage} onClick={props.onClick} />
     </header>
   )
 }
@@ -331,11 +280,13 @@ function JoinOrAddQuestionsButtons(props: {
 }) {
   const { group, user, isMember } = props
   return user && isMember ? (
-    <Row className={'w-full self-start pt-4'}>
+    <Row className={'mb-2 w-full self-start md:mt-2 '}>
       <AddContractButton group={group} user={user} />
     </Row>
   ) : group.anyoneCanJoin ? (
-    <JoinGroupButton group={group} user={user} />
+    <div className="mb-2 md:mb-0">
+      <JoinGroupButton group={group} user={user} />
+    </div>
   ) : null
 }
 

web/pages/groups.tsx

@@ -99,6 +99,7 @@ export default function Groups(props: {
           </div>
 
           <Tabs
+            className="mb-4"
             currentPageForAnalytics={'groups'}
             tabs={[
               ...(user

web/pages/leaderboards.tsx

@@ -132,6 +132,7 @@ export default function Leaderboards(_props: {
       />
       <Title text={'Leaderboards'} className={'hidden md:block'} />
       <Tabs
+        className="mb-4"
         currentPageForAnalytics={'leaderboards'}
         defaultIndex={1}
         tabs={[

web/pages/stats.tsx

@@ -26,6 +26,7 @@ export default function Analytics() {
   return (
     <Page>
       <Tabs
+        className="mb-4"
         currentPageForAnalytics={'stats'}
         tabs={[
           {
@@ -89,6 +90,7 @@ export function CustomAnalytics(props: Stats) {
       <Spacer h={4} />
 
       <Tabs
+        className="mb-4"
         defaultIndex={1}
         tabs={[
           {
@@ -141,6 +143,7 @@ export function CustomAnalytics(props: Stats) {
         period?
       </p>
       <Tabs
+        className="mb-4"
         defaultIndex={1}
         tabs={[
           {
@@ -198,6 +201,7 @@ export function CustomAnalytics(props: Stats) {
       <Spacer h={4} />
 
       <Tabs
+        className="mb-4"
         defaultIndex={2}
         tabs={[
           {
@@ -239,6 +243,7 @@ export function CustomAnalytics(props: Stats) {
 
       <Title text="Daily activity" />
       <Tabs
+        className="mb-4"
         defaultIndex={0}
         tabs={[
           {
@@ -293,6 +298,7 @@ export function CustomAnalytics(props: Stats) {
       <Spacer h={4} />
 
       <Tabs
+        className="mb-4"
         defaultIndex={1}
         tabs={[
           {
@@ -323,6 +329,7 @@ export function CustomAnalytics(props: Stats) {
 
       <Title text="Ratio of Active Users" />
       <Tabs
+        className="mb-4"
         defaultIndex={1}
         tabs={[
           {
@@ -367,6 +374,7 @@ export function CustomAnalytics(props: Stats) {
         Sum of bet amounts. (Divided by 100 to be more readable.)
       </p>
       <Tabs
+        className="mb-4"
         defaultIndex={1}
         tabs={[
           {