manifold/web/components/nav/profile-menu.tsx
Austin Chen 5c12da140d
Add a left sidebar on desktop (#70)
* Copy in nav from TailwindUI

* Split up nav files

* Hook up sidebar options to the current page

* Tweak padding

* Insert a right sidebar on folds & contracts

* Keep column always centered

* Remove markets and folds from top navbar

* Extract out sidebaricon; link to /about

* Rename to "useFollowedFoldIds"

* Cache followed folds in localstorage

* Remove unused mobile sidebar (for now)

* Remove unused code

* Remove sidebar from landing page

* Tweak resolution panel styling

* Remove the top navbar entirely

* Completely remove the old navbar

* Add "more" and profile link

* Rearrange sidebar ordering

* Remove unused component

* Add Sign In button for logged-out users

* Remove extra options for signed-out users
2022-03-30 16:56:51 -07:00

43 lines
1.4 KiB
TypeScript

import { firebaseLogout, User } from '../../lib/firebase/users'
import { formatMoney } from '../../../common/util/format'
import { Avatar } from '../avatar'
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' }]
}
if (!user) {
return [
{ name: 'Leaderboards', href: '/leaderboards' },
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
]
}
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() },
]
}
export 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">
<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">
{user ? formatMoney(Math.floor(user.balance)) : ' '}
</div>
</div>
</Row>
)
}