From a90441d9d5df450a2d94adf401f2a0130870fc01 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 30 Mar 2022 22:51:15 -0500
Subject: [PATCH] Reverting side navbar for now

---
 web/components/feed-create.tsx              |   2 +-
 web/components/folds/follow-fold-button.tsx |   4 +-
 web/components/nav/manifold-logo.tsx        |  57 ++++----
 web/components/nav/nav-bar.tsx              | 114 +++++++++++++++-
 web/components/nav/profile-menu.tsx         | 104 ++++++++++++---
 web/components/nav/sidebar.tsx              | 140 --------------------
 web/components/page.tsx                     |  27 +---
 web/components/resolution-panel.tsx         |   2 +-
 web/hooks/use-find-active-contracts.ts      |   4 +-
 web/hooks/use-fold.ts                       |  41 +-----
 web/pages/[username]/[contractSlug].tsx     |  26 ++--
 web/pages/fold/[...slugs]/index.tsx         |  37 +++---
 web/pages/folds.tsx                         |   5 +-
 web/pages/landing-page.tsx                  |   2 +
 web/pages/simulator.tsx                     |   2 +
 15 files changed, 272 insertions(+), 295 deletions(-)
 delete mode 100644 web/components/nav/sidebar.tsx

diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx
index 46fd99c5..de4d6e22 100644
--- a/web/components/feed-create.tsx
+++ b/web/components/feed-create.tsx
@@ -85,7 +85,7 @@ export default function FeedCreate(props: {
   return (
     <div
       className={clsx(
-        'w-full cursor-text rounded bg-white p-4 shadow-md',
+        'mt-2 w-full cursor-text rounded bg-white p-4 shadow-md',
         isExpanded ? 'ring-2 ring-indigo-300' : '',
         className
       )}
diff --git a/web/components/folds/follow-fold-button.tsx b/web/components/folds/follow-fold-button.tsx
index 496cda42..03234671 100644
--- a/web/components/folds/follow-fold-button.tsx
+++ b/web/components/folds/follow-fold-button.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { Fold } from '../../../common/fold'
-import { useFollowedFoldIds } from '../../hooks/use-fold'
+import { useFollowedFolds } from '../../hooks/use-fold'
 import { useUser } from '../../hooks/use-user'
 import { followFold, unfollowFold } from '../../lib/firebase/folds'
 
@@ -9,7 +9,7 @@ export function FollowFoldButton(props: { fold: Fold; className?: string }) {
 
   const user = useUser()
 
-  const followedFoldIds = useFollowedFoldIds(user)
+  const followedFoldIds = useFollowedFolds(user)
   const following = followedFoldIds
     ? followedFoldIds.includes(fold.id)
     : undefined
diff --git a/web/components/nav/manifold-logo.tsx b/web/components/nav/manifold-logo.tsx
index cead711c..5043f7b0 100644
--- a/web/components/nav/manifold-logo.tsx
+++ b/web/components/nav/manifold-logo.tsx
@@ -7,47 +7,44 @@ import { ENV_CONFIG } from '../../../common/envs/constants'
 export function ManifoldLogo(props: {
   className?: string
   darkBackground?: boolean
-  hideText?: boolean
 }) {
-  const { darkBackground, className, hideText } = props
+  const { darkBackground, className } = props
 
   const user = useUser()
 
   return (
     <Link href={user ? '/home' : '/'}>
-      <a className={clsx('group flex flex-shrink-0 flex-row gap-4', className)}>
+      <a className={clsx('flex flex-shrink-0 flex-row gap-4', className)}>
         <img
-          className="transition-all group-hover:rotate-12"
+          className="transition-all hover:rotate-12"
           src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
           width={45}
           height={45}
         />
-
-        {!hideText &&
-          (ENV_CONFIG.navbarLogoPath ? (
-            <img src={ENV_CONFIG.navbarLogoPath} width={245} height={45} />
-          ) : (
-            <>
-              <div
-                className={clsx(
-                  'font-major-mono mt-1 text-lg lowercase sm:hidden',
-                  darkBackground && 'text-white'
-                )}
-              >
-                Manifold
-                <br />
-                Markets
-              </div>
-              <div
-                className={clsx(
-                  'font-major-mono mt-1 hidden lowercase sm:flex sm:text-2xl md:whitespace-nowrap',
-                  darkBackground && 'text-white'
-                )}
-              >
-                Manifold Markets
-              </div>
-            </>
-          ))}
+        {ENV_CONFIG.navbarLogoPath ? (
+          <img src={ENV_CONFIG.navbarLogoPath} width={245} height={45} />
+        ) : (
+          <>
+            <div
+              className={clsx(
+                'font-major-mono mt-1 text-lg lowercase sm:hidden',
+                darkBackground && 'text-white'
+              )}
+            >
+              Manifold
+              <br />
+              Markets
+            </div>
+            <div
+              className={clsx(
+                'font-major-mono mt-1 hidden lowercase sm:flex sm:text-2xl md:whitespace-nowrap',
+                darkBackground && 'text-white'
+              )}
+            >
+              Manifold Markets
+            </div>
+          </>
+        )}
       </a>
     </Link>
   )
diff --git a/web/components/nav/nav-bar.tsx b/web/components/nav/nav-bar.tsx
index e4e65dd6..f600d994 100644
--- a/web/components/nav/nav-bar.tsx
+++ b/web/components/nav/nav-bar.tsx
@@ -2,7 +2,10 @@ import clsx from 'clsx'
 import Link from 'next/link'
 
 import { useUser } from '../../hooks/use-user'
+import { Row } from '../layout/row'
 import { firebaseLogin, User } from '../../lib/firebase/users'
+import { ManifoldLogo } from './manifold-logo'
+import { ProfileMenu } from './profile-menu'
 import {
   CollectionIcon,
   HomeIcon,
@@ -10,12 +13,50 @@ import {
   UserGroupIcon,
 } from '@heroicons/react/outline'
 
-// From https://codepen.io/chris__sev/pen/QWGvYbL
-export function BottomNavBar() {
+export function NavBar(props: {
+  darkBackground?: boolean
+  wide?: boolean
+  assertUser?: 'signed-in' | 'signed-out'
+  className?: string
+}) {
+  const { darkBackground, wide, assertUser, className } = props
+
   const user = useUser()
-  if (!user) {
-    return null
-  }
+
+  const hoverClasses =
+    'hover:underline hover:decoration-indigo-400 hover:decoration-2'
+  const themeClasses = clsx(darkBackground && 'text-white', hoverClasses)
+
+  return (
+    <>
+      <nav className={clsx('mb-4 w-full p-4', className)} aria-label="Global">
+        <Row
+          className={clsx(
+            'mx-auto items-center justify-between sm:px-4',
+            wide ? 'max-w-6xl' : 'max-w-4xl'
+          )}
+        >
+          <ManifoldLogo className="my-1" darkBackground={darkBackground} />
+
+          <Row className="ml-6 items-center gap-6 sm:gap-8">
+            {(user || user === null || assertUser) && (
+              <NavOptions
+                user={user}
+                assertUser={assertUser}
+                themeClasses={themeClasses}
+              />
+            )}
+          </Row>
+        </Row>
+      </nav>
+      {user && <BottomNavBar user={user} />}
+    </>
+  )
+}
+
+// From https://codepen.io/chris__sev/pen/QWGvYbL
+function BottomNavBar(props: { user: User }) {
+  const { user } = props
   return (
     <nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 md:hidden">
       <Link href="/home">
@@ -48,7 +89,6 @@ export function BottomNavBar() {
         </a>
       </Link>
 
-      {/* TODO: replace with a link to your own profile */}
       <Link href="/trades">
         <a
           href="#"
@@ -61,3 +101,65 @@ export function BottomNavBar() {
     </nav>
   )
 }
+
+function NavOptions(props: {
+  user: User | null | undefined
+  assertUser: 'signed-in' | 'signed-out' | undefined
+  themeClasses: string
+}) {
+  const { user, assertUser, themeClasses } = props
+  const showSignedIn = assertUser === 'signed-in' || !!user
+  const showSignedOut =
+    !showSignedIn && (assertUser === 'signed-out' || user === null)
+
+  return (
+    <>
+      {showSignedOut && (
+        <Link href="/about">
+          <a
+            className={clsx(
+              'hidden whitespace-nowrap text-base md:block',
+              themeClasses
+            )}
+          >
+            About
+          </a>
+        </Link>
+      )}
+
+      <Link href="/folds">
+        <a
+          className={clsx(
+            'hidden whitespace-nowrap text-base md:block',
+            themeClasses
+          )}
+        >
+          Communities
+        </a>
+      </Link>
+
+      <Link href="/markets">
+        <a
+          className={clsx(
+            'hidden whitespace-nowrap text-base md:block',
+            themeClasses
+          )}
+        >
+          Markets
+        </a>
+      </Link>
+
+      {showSignedOut && (
+        <>
+          <button
+            className="btn btn-sm btn-outline bg-gradient-to-r px-6 text-base font-medium normal-case"
+            onClick={firebaseLogin}
+          >
+            Sign in
+          </button>
+        </>
+      )}
+      {showSignedIn && <ProfileMenu user={user ?? undefined} />}
+    </>
+  )
+}
diff --git a/web/components/nav/profile-menu.tsx b/web/components/nav/profile-menu.tsx
index 593f72bc..98de7286 100644
--- a/web/components/nav/profile-menu.tsx
+++ b/web/components/nav/profile-menu.tsx
@@ -1,42 +1,106 @@
 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(user?: User | null) {
-  if (IS_PRIVATE_MANIFOLD) {
-    return [{ name: 'Leaderboards', href: '/leaderboards' }]
-  }
+export function ProfileMenu(props: { user: User | undefined }) {
+  const { user } = props
 
-  if (!user) {
-    return [
-      { name: 'Leaderboards', href: '/leaderboards' },
-      { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
-    ]
-  }
+  return (
+    <>
+      <MenuButton
+        className="hidden md:block"
+        menuItems={getNavigationOptions(user, { mobile: false })}
+        buttonContent={<ProfileSummary user={user} />}
+      />
 
+      <MenuButton
+        className="mr-2 md:hidden"
+        menuItems={getNavigationOptions(user, { mobile: true })}
+        buttonContent={<ProfileSummary user={user} />}
+      />
+    </>
+  )
+}
+
+function getNavigationOptions(
+  user: User | undefined,
+  options: { mobile: boolean }
+) {
+  const { mobile } = options
   return [
-    { name: 'Your trades', href: '/trades' },
-    { name: 'Add funds', href: '/add-funds' },
-    { name: 'Leaderboards', href: '/leaderboards' },
-    { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
-    { name: 'Sign out', href: '#', onClick: () => firebaseLogout() },
+    {
+      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',
+    },
+    // Disable irrelevant menu options for teams.
+    ...(IS_PRIVATE_MANIFOLD
+      ? [
+          {
+            name: 'Leaderboards',
+            href: '/leaderboards',
+          },
+        ]
+      : [
+          {
+            name: 'Add funds',
+            href: '/add-funds',
+          },
+          {
+            name: 'Leaderboards',
+            href: '/leaderboards',
+          },
+          {
+            name: 'Discord',
+            href: 'https://discord.gg/eHQBNBqXuh',
+          },
+          {
+            name: 'About',
+            href: '/about',
+          },
+        ]),
+    {
+      name: 'Sign out',
+      href: '#',
+      onClick: () => firebaseLogout(),
+    },
   ]
 }
 
-export function ProfileSummary(props: { user: User | undefined }) {
+function ProfileSummary(props: { user: User | undefined }) {
   const { user } = props
   return (
-    <Row className="group avatar items-center gap-4 py-6 text-gray-600 group-hover:text-gray-900">
+    <Col className="avatar items-center gap-2 sm:flex-row sm:gap-4">
       <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">
+        <div className="text-sm text-gray-700">
           {user ? formatMoney(Math.floor(user.balance)) : ' '}
         </div>
       </div>
-    </Row>
+    </Col>
   )
 }
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
deleted file mode 100644
index 0af007dc..00000000
--- a/web/components/nav/sidebar.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import {
-  HomeIcon,
-  UserGroupIcon,
-  SearchIcon,
-  BookOpenIcon,
-  DotsHorizontalIcon,
-} from '@heroicons/react/outline'
-import clsx from 'clsx'
-import _ from 'lodash'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useFollowedFolds } from '../../hooks/use-fold'
-import { useUser } from '../../hooks/use-user'
-import { firebaseLogin } from '../../lib/firebase/users'
-import { ManifoldLogo } from './manifold-logo'
-import { MenuButton } from './menu'
-import { getNavigationOptions, ProfileSummary } from './profile-menu'
-
-const navigation = [
-  { name: 'Home', href: '/home', icon: HomeIcon },
-  { name: 'Markets', href: '/markets', icon: SearchIcon },
-  { name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
-]
-
-type Item = {
-  name: string
-  href: string
-  icon: React.ComponentType<{ className?: string }>
-}
-
-function SidebarItem(props: { item: Item; currentPage: string }) {
-  const { item, currentPage } = props
-  return (
-    <Link href={item.href} key={item.name}>
-      <a
-        className={clsx(
-          item.href == currentPage
-            ? 'bg-gray-200 text-gray-900'
-            : 'text-gray-600 hover:bg-gray-50',
-          'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
-        )}
-        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"
-        />
-        <span className="truncate">{item.name}</span>
-      </a>
-    </Link>
-  )
-}
-
-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
-
-  const user = useUser()
-  let folds = useFollowedFolds(user) || []
-  folds = _.sortBy(folds, 'followCount').reverse()
-
-  return (
-    <nav
-      aria-label="Sidebar"
-      className="sticky top-4 mt-4 divide-y divide-gray-300"
-    >
-      <div className="space-y-1 pb-6">
-        <ManifoldLogo hideText />
-      </div>
-
-      <div style={{ minHeight: 93 }}>
-        {user ? (
-          <Link href={`/${user.username}`}>
-            <a className="group">
-              <ProfileSummary user={user} />
-            </a>
-          </Link>
-        ) : user === null ? (
-          <div className="py-6 text-center">
-            <button
-              className="btn border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-              onClick={firebaseLogin}
-            >
-              Sign in
-            </button>
-          </div>
-        ) : (
-          <div />
-        )}
-      </div>
-
-      <div className="space-y-1 py-6">
-        {navigation.map((item) => (
-          <SidebarItem item={item} currentPage={currentPage} />
-        ))}
-
-        <MenuButton
-          menuItems={getNavigationOptions(user)}
-          buttonContent={<MoreButton />}
-        />
-      </div>
-
-      <div className="pt-6">
-        <SidebarItem
-          item={{ name: 'Communities', href: '/folds', icon: UserGroupIcon }}
-          currentPage={currentPage}
-        />
-
-        <div className="mt-3 space-y-2">
-          {folds.map((fold) => (
-            <a
-              key={fold.name}
-              href={`/fold/${fold.slug}`}
-              className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-            >
-              <span className="truncate">&nbsp; {fold.name}</span>
-            </a>
-          ))}
-        </div>
-      </div>
-    </nav>
-  )
-}
diff --git a/web/components/page.tsx b/web/components/page.tsx
index 82b045ff..95ff4270 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -1,42 +1,27 @@
 import clsx from 'clsx'
-import { BottomNavBar } from './nav/nav-bar'
-import Sidebar from './nav/sidebar'
+import { NavBar } from './nav/nav-bar'
 
 export function Page(props: {
   wide?: boolean
   margin?: boolean
   assertUser?: 'signed-in' | 'signed-out'
-  rightSidebar?: React.ReactNode
   children?: any
 }) {
-  const { wide, margin, assertUser, children, rightSidebar } = props
+  const { wide, margin, assertUser, children } = props
 
   return (
     <div>
+      <NavBar wide={wide} assertUser={assertUser} />
+
       <div
         className={clsx(
-          'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
+          'mx-auto w-full pb-16',
           wide ? 'max-w-6xl' : 'max-w-4xl',
           margin && 'px-4'
         )}
       >
-        <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
-          {assertUser !== 'signed-out' && <Sidebar />}
-        </div>
-        <main
-          className={clsx(
-            'mt-6 lg:col-span-9',
-            rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
-          )}
-        >
-          {children}
-        </main>
-        <aside className="hidden xl:col-span-3 xl:block">
-          <div className="sticky top-4 space-y-4">{rightSidebar}</div>
-        </aside>
+        {children}
       </div>
-
-      <BottomNavBar />
     </div>
   )
 }
diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx
index 2469c8f1..b22a45e4 100644
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@@ -72,7 +72,7 @@ export function ResolutionPanel(props: {
 
   return (
     <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
-      <Title className="!mt-0 whitespace-nowrap" text="Resolve market" />
+      <Title className="mt-0 whitespace-nowrap" text="Resolve market" />
 
       <div className="mb-2 text-sm text-gray-500">Outcome</div>
 
diff --git a/web/hooks/use-find-active-contracts.ts b/web/hooks/use-find-active-contracts.ts
index 66573728..ba80a899 100644
--- a/web/hooks/use-find-active-contracts.ts
+++ b/web/hooks/use-find-active-contracts.ts
@@ -10,7 +10,7 @@ import { Comment, getRecentComments } from '../lib/firebase/comments'
 import { Contract, getActiveContracts } from '../lib/firebase/contracts'
 import { listAllFolds } from '../lib/firebase/folds'
 import { useInactiveContracts } from './use-contracts'
-import { useFollowedFoldIds } from './use-fold'
+import { useFollowedFolds } from './use-fold'
 import { useSeenContracts } from './use-seen-contracts'
 import { useUserBetContracts } from './use-user-bets'
 
@@ -48,7 +48,7 @@ export const useFilterYourContracts = (
   folds: Fold[],
   contracts: Contract[]
 ) => {
-  const followedFoldIds = useFollowedFoldIds(user)
+  const followedFoldIds = useFollowedFolds(user)
 
   const followedFolds = filterDefined(
     (followedFoldIds ?? []).map((id) => folds.find((fold) => fold.id === id))
diff --git a/web/hooks/use-fold.ts b/web/hooks/use-fold.ts
index ffb19615..e7eb737f 100644
--- a/web/hooks/use-fold.ts
+++ b/web/hooks/use-fold.ts
@@ -1,9 +1,7 @@
-import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import { Fold } from '../../common/fold'
 import { User } from '../../common/user'
 import {
-  listAllFolds,
   listenForFold,
   listenForFolds,
   listenForFoldsWithTags,
@@ -51,8 +49,8 @@ export const useFollowingFold = (fold: Fold, user: User | null | undefined) => {
   return following
 }
 
-// Note: We cache followedFoldIds in localstorage to speed up the initial load
-export const useFollowedFoldIds = (user: User | null | undefined) => {
+// Note: We cache FollowedFolds in localstorage to speed up the initial load
+export const useFollowedFolds = (user: User | null | undefined) => {
   const [followedFoldIds, setFollowedFoldIds] = useState<string[] | undefined>(
     undefined
   )
@@ -74,38 +72,3 @@ export const useFollowedFoldIds = (user: User | null | undefined) => {
 
   return followedFoldIds
 }
-
-// We also cache followedFolds directly in JSON.
-// TODO: Extract out localStorage caches to a utility
-export const useFollowedFolds = (user: User | null | undefined) => {
-  const [followedFolds, setFollowedFolds] = useState<Fold[] | undefined>()
-  const ids = useFollowedFoldIds(user)
-
-  useEffect(() => {
-    if (user && ids) {
-      const key = `followed-full-folds-${user.id}`
-      const followedFoldJson = localStorage.getItem(key)
-      if (followedFoldJson) {
-        setFollowedFolds(JSON.parse(followedFoldJson))
-        // Exit early if ids and followedFoldIds have all the same elements.
-        if (
-          _.isEqual(
-            _.sortBy(ids),
-            _.sortBy(JSON.parse(followedFoldJson).map((f: Fold) => f.id))
-          )
-        ) {
-          return
-        }
-      }
-
-      // Otherwise, fetch the full contents of all folds
-      listAllFolds().then((folds) => {
-        const followedFolds = folds.filter((fold) => ids.includes(fold.id))
-        setFollowedFolds(followedFolds)
-        localStorage.setItem(key, JSON.stringify(followedFolds))
-      })
-    }
-  }, [user, ids])
-
-  return followedFolds
-}
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 1bd86bde..1c321abc 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -121,17 +121,8 @@ export default function ContractPage(props: {
 
   const ogCardProps = getOpenGraphProps(contract)
 
-  const rightSidebar = hasSidePanel ? (
-    <Col className="gap-4">
-      {allowTrade && (
-        <BetPanel className="hidden lg:flex" contract={contract} />
-      )}
-      {allowResolve && <ResolutionPanel creator={user} contract={contract} />}
-    </Col>
-  ) : null
-
   return (
-    <Page wide={hasSidePanel} rightSidebar={rightSidebar}>
+    <Page wide={hasSidePanel}>
       {ogCardProps && (
         <SEO
           title={question}
@@ -177,6 +168,21 @@ export default function ContractPage(props: {
           )}
           <BetsSection contract={contract} user={user ?? null} bets={bets} />
         </div>
+
+        {hasSidePanel && (
+          <>
+            <div className="md:ml-6" />
+
+            <Col className="flex-shrink-0 md:w-[310px]">
+              {allowTrade && (
+                <BetPanel className="hidden lg:flex" contract={contract} />
+              )}
+              {allowResolve && (
+                <ResolutionPanel creator={user} contract={contract} />
+              )}
+            </Col>
+          </>
+        )}
       </Col>
     </Page>
   )
diff --git a/web/pages/fold/[...slugs]/index.tsx b/web/pages/fold/[...slugs]/index.tsx
index 01c4a471..c7ac014a 100644
--- a/web/pages/fold/[...slugs]/index.tsx
+++ b/web/pages/fold/[...slugs]/index.tsx
@@ -159,28 +159,8 @@ export default function FoldPage(props: {
     return <Custom404 />
   }
 
-  const rightSidebar = (
-    <Col className="mt-6 gap-12">
-      <Row className="justify-end">
-        {isCurator ? (
-          <EditFoldButton className="ml-1" fold={fold} />
-        ) : (
-          <FollowFoldButton className="ml-1" fold={fold} />
-        )}
-      </Row>
-      <FoldOverview fold={fold} curator={curator} />
-      <FoldLeaderboards
-        traderScores={traderScores}
-        creatorScores={creatorScores}
-        topTraders={topTraders}
-        topCreators={topCreators}
-        user={user}
-      />
-    </Col>
-  )
-
   return (
-    <Page rightSidebar={rightSidebar}>
+    <Page wide>
       <SEO
         title={fold.name}
         description={`Curated by ${curator.name}. ${fold.about}`}
@@ -190,6 +170,11 @@ export default function FoldPage(props: {
       <div className="px-3 lg:px-1">
         <Row className="mb-6 justify-between">
           <Title className="!m-0" text={fold.name} />
+          {isCurator ? (
+            <EditFoldButton className="ml-1" fold={fold} />
+          ) : (
+            <FollowFoldButton className="ml-1" fold={fold} />
+          )}
         </Row>
 
         <Col className="mb-6 gap-2 text-gray-500 md:hidden">
@@ -274,6 +259,16 @@ export default function FoldPage(props: {
               <SearchableGrid contracts={contracts} />
             )}
           </Col>
+          <Col className="hidden w-full max-w-xs gap-12 md:flex">
+            <FoldOverview fold={fold} curator={curator} />
+            <FoldLeaderboards
+              traderScores={traderScores}
+              creatorScores={creatorScores}
+              topTraders={topTraders}
+              topCreators={topCreators}
+              user={user}
+            />
+          </Col>
         </Row>
       )}
 
diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx
index 4b4b8892..ae7981dc 100644
--- a/web/pages/folds.tsx
+++ b/web/pages/folds.tsx
@@ -7,10 +7,11 @@ import { FollowFoldButton } from '../components/folds/follow-fold-button'
 import { Col } from '../components/layout/col'
 import { Row } from '../components/layout/row'
 import { Page } from '../components/page'
+import { SiteLink } from '../components/site-link'
 import { TagsList } from '../components/tags-list'
 import { Title } from '../components/title'
 import { UserLink } from '../components/user-page'
-import { useFolds, useFollowedFoldIds } from '../hooks/use-fold'
+import { useFolds, useFollowedFolds } from '../hooks/use-fold'
 import { useUser } from '../hooks/use-user'
 import { foldPath, listAllFolds } from '../lib/firebase/folds'
 import { getUser, User } from '../lib/firebase/users'
@@ -43,7 +44,7 @@ export default function Folds(props: {
 
   let folds = useFolds() ?? props.folds
   const user = useUser()
-  const followedFoldIds = useFollowedFoldIds(user) || []
+  const followedFoldIds = useFollowedFolds(user) || []
   // First sort by follower count, then list followed folds first
   folds = _.sortBy(folds, (fold) => -1 * fold.followCount)
   folds = _.sortBy(folds, (fold) => !followedFoldIds.includes(fold.id))
diff --git a/web/pages/landing-page.tsx b/web/pages/landing-page.tsx
index 334b5513..d45c0aef 100644
--- a/web/pages/landing-page.tsx
+++ b/web/pages/landing-page.tsx
@@ -10,6 +10,7 @@ import {
 import { firebaseLogin } from '../lib/firebase/users'
 import { ContractsGrid } from '../components/contracts-list'
 import { Col } from '../components/layout/col'
+import { NavBar } from '../components/nav/nav-bar'
 import Link from 'next/link'
 import { Contract } from '../lib/firebase/contracts'
 
@@ -33,6 +34,7 @@ const scrollToAbout = () => {
 function Hero() {
   return (
     <div className="bg-world-trading h-screen overflow-hidden bg-gray-900 bg-cover bg-center lg:bg-left">
+      <NavBar darkBackground />
       <main>
         <div className="pt-32 sm:pt-8 lg:overflow-hidden lg:pt-0 lg:pb-14">
           <div className="mx-auto max-w-7xl lg:px-8 xl:px-0">
diff --git a/web/pages/simulator.tsx b/web/pages/simulator.tsx
index 7c48302e..b253ac29 100644
--- a/web/pages/simulator.tsx
+++ b/web/pages/simulator.tsx
@@ -3,6 +3,7 @@ import { DatumValue } from '@nivo/core'
 import { ResponsiveLine } from '@nivo/line'
 
 import { Entry, makeEntries } from '../lib/simulator/entries'
+import { NavBar } from '../components/nav/nav-bar'
 import { Col } from '../components/layout/col'
 
 function TableBody(props: { entries: Entry[] }) {
@@ -253,6 +254,7 @@ export default function Simulator() {
 
   return (
     <Col>
+      <NavBar />
       <div className="mx-auto mt-8 grid w-full grid-cols-1 gap-4 p-2 text-center xl:grid-cols-2">
         {/* Left column */}
         <div>