From 3717aeb0162d5f2a6d72cb9939d61b3c039d2dd8 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 29 Jan 2022 20:27:45 -0600
Subject: [PATCH] WIP mobile navbar

---
 web/components/amount-input.tsx |  2 +-
 web/components/nav-bar.tsx      | 58 +++++++++++++++++++++++++++++++++
 web/components/page.tsx         |  2 +-
 web/pages/[username]/index.tsx  |  2 ++
 4 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index f01ae418..32c68222 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -60,7 +60,7 @@ export function AmountInput(props: {
             inputClassName
           )}
           ref={inputRef}
-          type="text"
+          type="number"
           placeholder="0"
           maxLength={9}
           value={amount ?? ''}
diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx
index af0e1ad4..c028c173 100644
--- a/web/components/nav-bar.tsx
+++ b/web/components/nav-bar.tsx
@@ -6,6 +6,12 @@ import { Row } from './layout/row'
 import { firebaseLogin, User } from '../lib/firebase/users'
 import { ManifoldLogo } from './manifold-logo'
 import { ProfileMenu } from './profile-menu'
+import {
+  BellIcon,
+  HomeIcon,
+  SearchIcon,
+  UserGroupIcon,
+} from '@heroicons/react/outline'
 
 export function NavBar(props: {
   darkBackground?: boolean
@@ -22,6 +28,7 @@ export function NavBar(props: {
   const themeClasses = clsx(darkBackground && 'text-white', hoverClasses)
 
   return (
+    // <>
     <nav className={clsx('w-full p-4 mb-4', className)} aria-label="Global">
       <Row
         className={clsx(
@@ -42,6 +49,57 @@ export function NavBar(props: {
         </Row>
       </Row>
     </nav>
+    // {/* <BottomNavBar /> */}
+    // </>
+  )
+}
+
+// From https://codepen.io/chris__sev/pen/QWGvYbL
+// TODO: Show a line above the navbar
+// TODO: Don't show when logged out
+function BottomNavBar() {
+  return (
+    <nav className="md:hidden fixed bottom-0 inset-x-0 bg-white z-20 flex justify-between text-xs text-gray-700">
+      <Link href="/home">
+        <a
+          href="#"
+          className="w-full block py-2 px-3 text-center hover:bg-blue-200 hover:text-blue-800 transition duration-300"
+        >
+          <HomeIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          {/* Home */}
+        </a>
+      </Link>
+
+      <Link href="/markets">
+        <a
+          href="#"
+          className="w-full block py-2 px-3 text-center hover:bg-blue-200 hover:text-blue-800"
+        >
+          <SearchIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          {/* Explore */}
+        </a>
+      </Link>
+
+      <Link href="/folds">
+        <a
+          href="#"
+          className="w-full block py-2 px-3 text-center hover:bg-blue-200 hover:text-blue-800"
+        >
+          <UserGroupIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          {/* Folds */}
+        </a>
+      </Link>
+
+      <Link href="/home">
+        <a
+          href="#"
+          className="w-full block py-2 px-3 text-center hover:bg-blue-200 hover:text-blue-800"
+        >
+          <BellIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          {/* Notifs */}
+        </a>
+      </Link>
+    </nav>
   )
 }
 
diff --git a/web/components/page.tsx b/web/components/page.tsx
index eff38e98..4ea43ea8 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -15,7 +15,7 @@ export function Page(props: {
 
       <div
         className={clsx(
-          'w-full mx-auto',
+          'w-full mx-auto pb-16',
           wide ? 'max-w-6xl' : 'max-w-4xl',
           margin && 'px-4'
         )}
diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx
index de88d52a..c96fa148 100644
--- a/web/pages/[username]/index.tsx
+++ b/web/pages/[username]/index.tsx
@@ -6,6 +6,8 @@ import { UserPage } from '../../components/user-page'
 import { useUser } from '../../hooks/use-user'
 import Custom404 from '../404'
 
+// TODO: SEO component for hyperlinking to this page
+
 export default function UserProfile() {
   const router = useRouter()
   const [user, setUser] = useState<User | null | 'loading'>('loading')