open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Load navbar more gracefully: don't show options until user loaded

Browse Source
This commit is contained in:
jahooma 2022-01-13 16:09:13 -06:00
parent fc5fa000b9
commit dcf07fe0a1
2 changed files with 49 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/manifold-logo.tsx
View File

@ -1,4 +1,5 @@
import Link from 'next/link'
import Image from 'next/image'
import clsx from 'clsx'
export function ManifoldLogo(props: { darkBackground?: boolean }) {
@ -7,7 +8,7 @@ export function ManifoldLogo(props: { darkBackground?: boolean }) {
return (
<Link href="/">
<a className="flex flex-row gap-4">
<img
<Image
className="hover:rotate-12 transition-all"
src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
width={45}

102
web/components/nav-bar.tsx
View File

@ -11,9 +11,8 @@ export function NavBar(props: {
darkBackground?: boolean
wide?: boolean
className?: string
children?: any
}) {
const { darkBackground, wide, className, children } = props
const { darkBackground, wide, className } = props
const user = useUser()
@ -32,36 +31,8 @@ export function NavBar(props: {
<ManifoldLogo darkBackground={darkBackground} />
<Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
{children}
{!user && (
<Link href="/about">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
themeClasses
)}
>
About
</a>
</Link>
)}
<Link href="/markets">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
themeClasses
)}
>
All markets
</a>
</Link>
{user ? (
<SignedInHeaders user={user} themeClasses={themeClasses} />
) : (
<SignedOutHeaders themeClasses={themeClasses} />
{(user || user === null) && (
<NavOptions user={user} themeClasses={themeClasses} />
)}
</Row>
</Row>
@ -69,41 +40,62 @@ export function NavBar(props: {
)
}
function SignedInHeaders(props: { user: User; themeClasses?: string }) {
function NavOptions(props: { user: User | null; themeClasses: string }) {
const { user, themeClasses } = props
return (
<>
<Link href="/create">
{user === null && (
<Link href="/about">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
themeClasses
)}
>
About
</a>
</Link>
)}
<Link href="/markets">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
themeClasses
)}
>
Create a market
All markets
</a>
</Link>
<ProfileMenu user={user} />
</>
)
}
function SignedOutHeaders(props: { themeClasses?: string }) {
const { themeClasses } = props
return (
<>
<div
className={clsx(
'text-base font-medium cursor-pointer whitespace-nowrap',
themeClasses
)}
onClick={firebaseLogin}
>
Sign in
</div>
{user === null ? (
<>
<div
className={clsx(
'text-base font-medium cursor-pointer whitespace-nowrap',
themeClasses
)}
onClick={firebaseLogin}
>
Sign in
</div>
</>
) : (
<>
<Link href="/create">
<a
className={clsx(
'text-base hidden md:block whitespace-nowrap',
themeClasses
)}
>
Create a market
</a>
</Link>
<ProfileMenu user={user} />
</>
)}
</>
)
}