From 66add707a0f7ae9cffa98fdd65a5e9f982789837 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 30 Mar 2022 10:59:41 -0700
Subject: [PATCH] Remove the top navbar entirely

---
 web/components/nav/manifold-logo.tsx | 53 +++++++++++++++-------------
 web/components/nav/nav-bar.tsx       | 17 +++++----
 web/components/nav/sidebar.tsx       | 12 +++++++
 web/components/page.tsx              |  8 ++---
 4 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/web/components/nav/manifold-logo.tsx b/web/components/nav/manifold-logo.tsx
index 5043f7b0..efe6358f 100644
--- a/web/components/nav/manifold-logo.tsx
+++ b/web/components/nav/manifold-logo.tsx
@@ -7,8 +7,9 @@ import { ENV_CONFIG } from '../../../common/envs/constants'
 export function ManifoldLogo(props: {
   className?: string
   darkBackground?: boolean
+  hideText?: boolean
 }) {
-  const { darkBackground, className } = props
+  const { darkBackground, className, hideText } = props
 
   const user = useUser()
 
@@ -21,30 +22,32 @@ export function ManifoldLogo(props: {
           width={45}
           height={45}
         />
-        {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>
-          </>
-        )}
+
+        {!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>
+            </>
+          ))}
       </a>
     </Link>
   )
diff --git a/web/components/nav/nav-bar.tsx b/web/components/nav/nav-bar.tsx
index 19786b15..27793b74 100644
--- a/web/components/nav/nav-bar.tsx
+++ b/web/components/nav/nav-bar.tsx
@@ -13,6 +13,7 @@ import {
   UserGroupIcon,
 } from '@heroicons/react/outline'
 
+// Deprecated. TODO: Remove this entirely.
 export function NavBar(props: {
   darkBackground?: boolean
   wide?: boolean
@@ -49,14 +50,17 @@ export function NavBar(props: {
           </Row>
         </Row>
       </nav>
-      {user && <BottomNavBar user={user} />}
+      <BottomNavBar />
     </>
   )
 }
 
 // From https://codepen.io/chris__sev/pen/QWGvYbL
-function BottomNavBar(props: { user: User }) {
-  const { user } = props
+export function BottomNavBar() {
+  const user = useUser()
+  if (!user) {
+    return null
+  }
   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">
@@ -89,6 +93,7 @@ function BottomNavBar(props: { user: User }) {
         </a>
       </Link>
 
+      {/* TODO: replace with a link to your own profile */}
       <Link href="/trades">
         <a
           href="#"
@@ -102,10 +107,10 @@ function BottomNavBar(props: { user: User }) {
   )
 }
 
-function NavOptions(props: {
+export function NavOptions(props: {
   user: User | null | undefined
-  assertUser: 'signed-in' | 'signed-out' | undefined
-  themeClasses: string
+  assertUser?: 'signed-in' | 'signed-out'
+  themeClasses?: string
 }) {
   const { user, assertUser, themeClasses } = props
   const showSignedIn = assertUser === 'signed-in' || !!user
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 14ccd001..3dc0d037 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -10,6 +10,10 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useFollowedFolds } from '../../hooks/use-fold'
 import { useUser } from '../../hooks/use-user'
+import { Row } from '../layout/row'
+import { Spacer } from '../layout/spacer'
+import { ManifoldLogo } from './manifold-logo'
+import { NavOptions } from './nav-bar'
 
 const navigation = [
   { name: 'Home', href: '/home', icon: HomeIcon },
@@ -64,10 +68,18 @@ export default function Sidebar() {
   return (
     <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
       <div className="space-y-1 pb-8">
+        <ManifoldLogo hideText />
+        <Spacer h={4} />
+
         {navigation.map((item) => (
           <SidebarItem item={item} currentPage={currentPage} />
         ))}
       </div>
+
+      <Row className="items-center gap-6 py-6 sm:gap-8">
+        {(user || user === null) && <NavOptions user={user} />}
+      </Row>
+
       <div className="pt-10">
         <SidebarItem
           item={{ name: 'Communities', href: '/folds', icon: UserGroupIcon }}
diff --git a/web/components/page.tsx b/web/components/page.tsx
index c9681a77..82b045ff 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { NavBar } from './nav/nav-bar'
+import { BottomNavBar } from './nav/nav-bar'
 import Sidebar from './nav/sidebar'
 
 export function Page(props: {
@@ -13,8 +13,6 @@ export function Page(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',
@@ -27,7 +25,7 @@ export function Page(props: {
         </div>
         <main
           className={clsx(
-            'lg:col-span-9',
+            'mt-6 lg:col-span-9',
             rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
           )}
         >
@@ -37,6 +35,8 @@ export function Page(props: {
           <div className="sticky top-4 space-y-4">{rightSidebar}</div>
         </aside>
       </div>
+
+      <BottomNavBar />
     </div>
   )
 }