Show your avatar and balance in mobile bottom bar instead of 'More'

web/components/avatar.tsx

@@ -8,8 +8,10 @@ export function Avatar(props: {
   noLink?: boolean
   size?: number | 'xs' | 'sm'
   className?: string
+  containerClassName?: string
 }) {
-  const { username, avatarUrl, noLink, size, className } = props
+  const { username, avatarUrl, noLink, size, className, containerClassName } =
+    props
   const s = size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10
 
   const onClick =
@@ -20,7 +22,12 @@ export function Avatar(props: {
           Router.push(`/${username}`)
         }
   return (
-    <div className={`flex-shrink-0 rounded-full bg-white w-${s} h-${s}`}>
+    <div
+      className={clsx(
+        `flex-shrink-0 rounded-full bg-white w-${s} h-${s}`,
+        containerClassName
+      )}
+    >
       {avatarUrl ? (
         <img
           className={clsx(

web/components/nav/nav-bar.tsx

@@ -10,10 +10,16 @@ import {
 import { Transition, Dialog } from '@headlessui/react'
 import { useState, Fragment } from 'react'
 import Sidebar from './sidebar'
+import { useUser } from '../../hooks/use-user'
+import { formatMoney } from '../../../common/util/format'
+import { Avatar } from '../avatar'
 
 // From https://codepen.io/chris__sev/pen/QWGvYbL
 export function BottomNavBar() {
   const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  const user = useUser()
+
   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="/home">
@@ -37,13 +43,30 @@ export function BottomNavBar() {
         </a>
       </Link>
 
-      <span
+      <div
-        className="block w-full py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
+        className="w-full py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
         onClick={() => setSidebarOpen(true)}
       >
-        <MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
+        {user === null ? (
-        More
+          <>
-      </span>
+            <MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
+            More
+          </>
+        ) : user ? (
+          <>
+            <Avatar
+              containerClassName="mx-auto my-1"
+              size="xs"
+              username={user.username}
+              avatarUrl={user.avatarUrl}
+              noLink
+            />
+            {formatMoney(user.balance)}
+          </>
+        ) : (
+          <></>
+        )}
+      </div>
 
       <MobileSidebar
         sidebarOpen={sidebarOpen}