Style current page on mobile nav bar

web/components/nav/nav-bar.tsx

@@ -10,54 +10,49 @@ import {
 } from '@heroicons/react/outline'
 import { Transition, Dialog } from '@headlessui/react'
 import { useState, Fragment } from 'react'
-import Sidebar from './sidebar'
+import Sidebar, { Item } from './sidebar'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
 import { Avatar } from '../avatar'
+import clsx from 'clsx'
+import { useRouter } from 'next/router'
+
+function getNavigation(username: String) {
+  return [
+    { name: 'Home', href: '/home', icon: HomeIcon },
+    { name: 'Activity', href: '/activity', icon: ChatAltIcon },
+    {
+      name: 'Portfolio',
+      href: `/${username}/bets`,
+      icon: PresentationChartLineIcon,
+    },
+  ]
+}
+
+const signedOutNavigation = [
+  { name: 'Home', href: '/', icon: HomeIcon },
+  { name: 'Explore', href: '/markets', icon: SearchIcon },
+]
 
 // From https://codepen.io/chris__sev/pen/QWGvYbL
 export function BottomNavBar() {
   const [sidebarOpen, setSidebarOpen] = useState(false)
 
+  const router = useRouter()
+  const currentPage = router.pathname
+
   const user = useUser()
 
+  const navigationOptions =
+    user === null
+      ? signedOutNavigation
+      : getNavigation(user?.username || 'error')
+
   return (
     <nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
-      <Link href={user ? '/home' : '/'}>
+      {navigationOptions.map((item) => (
-        <a className="block w-full py-1 px-3 text-center transition duration-300 hover:bg-indigo-200 hover:text-indigo-700">
+        <NavBarItem key={item.name} item={item} currentPage={currentPage} />
-          <HomeIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
+      ))}
-          Home
-        </a>
-      </Link>
-
-      {user === null ? (
-        <Link href="/markets">
-          <a className="block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700">
-            <SearchIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
-            Explore
-          </a>
-        </Link>
-      ) : (
-        <Link href="/activity">
-          <a className="block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700">
-            <ChatAltIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
-            Activity
-          </a>
-        </Link>
-      )}
-
-      {user !== null && (
-        <Link href={`${user}/bets`}>
-          <a className="block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700">
-            <PresentationChartLineIcon
-              className="my-1 mx-auto h-6 w-6"
-              aria-hidden="true"
-            />
-            Portfolio
-          </a>
-        </Link>
-      )}
-
       <div
         className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
         onClick={() => setSidebarOpen(true)}
@@ -91,6 +86,24 @@ export function BottomNavBar() {
   )
 }
 
+function NavBarItem(props: { item: Item; currentPage: string }) {
+  const { item, currentPage } = props
+
+  return (
+    <Link href={item.href}>
+      <a
+        className={clsx(
+          'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',
+          currentPage === item.href && 'bg-indigo-200 text-indigo-700'
+        )}
+      >
+        <item.icon className="my-1 mx-auto h-6 w-6" />
+        {item.name}
+      </a>
+    </Link>
+  )
+}
+
 // Sidebar that slides out on mobile
 export function MobileSidebar(props: {
   sidebarOpen: boolean

web/components/nav/sidebar.tsx

@@ -71,7 +71,7 @@ const mobileNavigation = [
   ...signedOutMobileNavigation,
 ]
 
-type Item = {
+export type Item = {
   name: string
   href: string
   icon: React.ComponentType<{ className?: string }>