mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 20:19:49 +02:00
feat: clone navbar
This commit is contained in:
TrèsAbhi committed
1 parent
4062a09c05
commit
bde1bd279d
1 file changed
+161
-147
+161
-147
@@ -18,7 +18,7 @@ import {
|
|||||||
Text,
|
Text,
|
||||||
} from '@radix-ui/themes';
|
} from '@radix-ui/themes';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { Suspense, useEffect, useState } from 'react';
|
import { Suspense, useEffect, useRef, useState } from 'react';
|
||||||
import * as styles from '../../app/page.css';
|
import * as styles from '../../app/page.css';
|
||||||
import { REGIONS, UNLOCALIZED_REGION_NAMES } from '../../constants/regions';
|
import { REGIONS, UNLOCALIZED_REGION_NAMES } from '../../constants/regions';
|
||||||
import { TOOLS } from '../../constants/tools';
|
import { TOOLS } from '../../constants/tools';
|
||||||
@@ -37,7 +37,8 @@ export const NAVBAR_HEIGHT = 64;
|
|||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const wideFormat = useWideFormat(480);
|
const wideFormat = useWideFormat(480);
|
||||||
const login = useApp((state) => state.login);
|
const login = useApp((state) => state.login);
|
||||||
const [showHamburgerMenu, setShowHamburgerMenu] = useState(true);
|
const [showHamburgerMenu, setShowHamburgerMenu] = useState(false);
|
||||||
|
const navbar = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!login) return;
|
if (!login) return;
|
||||||
@@ -85,164 +86,177 @@ export default function Navbar() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Box
|
||||||
<Box
|
ref={navbar}
|
||||||
style={{
|
style={{
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
maxHeight: showHamburgerMenu ? '100%' : NAVBAR_HEIGHT + 1, // extra pixel for frost bleeding
|
maxHeight: showHamburgerMenu ? '100%' : NAVBAR_HEIGHT + 1, // extra pixel for frost bleeding
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
background: theme.colors.appBackground1_alpha,
|
background: theme.colors.appBackground1_alpha,
|
||||||
borderBottom: theme.borderStyles.nonInteractive,
|
borderBottom: theme.borderStyles.nonInteractive,
|
||||||
backdropFilter: 'blur(4rem)',
|
backdropFilter: 'blur(4rem)',
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
transition: 'max-height 0.5s ease',
|
transition: 'max-height 0.5s ease',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
}}
|
}}
|
||||||
onPointerEnter={() => setShowHamburgerMenu(true)}
|
onPointerEnter={() => setShowHamburgerMenu(true)}
|
||||||
onPointerLeave={() => setShowHamburgerMenu(false)}
|
onPointerLeave={(event) => {
|
||||||
>
|
if (
|
||||||
<Flex direction="column" align="center" pt="2">
|
navbar.current ===
|
||||||
<Flex
|
document.elementFromPoint(event.clientX, event.clientY)
|
||||||
justify="between"
|
) {
|
||||||
align="center"
|
// false positive bug: https://stackoverflow.com/a/45267167/12294756
|
||||||
style={{ maxWidth: 1600, width: '100%', padding: '0 16px' }}
|
return;
|
||||||
gap="4"
|
}
|
||||||
|
|
||||||
|
setShowHamburgerMenu(false);
|
||||||
|
}}
|
||||||
|
onFocus={() => setShowHamburgerMenu(true)}
|
||||||
|
onBlur={() => setShowHamburgerMenu(false)}
|
||||||
|
>
|
||||||
|
<Flex direction="column" align="center" pt="2">
|
||||||
|
<Flex
|
||||||
|
justify="between"
|
||||||
|
align="center"
|
||||||
|
style={{ maxWidth: 1600, width: '100%', padding: '0 16px' }}
|
||||||
|
gap="4"
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
variant="ghost"
|
||||||
|
color="gray"
|
||||||
|
onClick={() => setShowHamburgerMenu((state) => !state)}
|
||||||
>
|
>
|
||||||
<IconButton
|
{showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
|
||||||
variant="ghost"
|
</IconButton>
|
||||||
color="gray"
|
|
||||||
onClick={() => setShowHamburgerMenu((state) => !state)}
|
|
||||||
>
|
|
||||||
{showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
|
|
||||||
</IconButton>
|
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
href="/"
|
href="/"
|
||||||
style={{
|
style={{
|
||||||
color: 'inherit',
|
color: 'inherit',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<BlitzkitWide />
|
<BlitzkitWide />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div style={{ flex: 1 }} />
|
<div style={{ flex: 1 }} />
|
||||||
|
|
||||||
{wideFormat && plugs}
|
{wideFormat && plugs}
|
||||||
|
|
||||||
<Link href="/settings" onClick={() => setShowHamburgerMenu(false)}>
|
<Link href="/settings" onClick={() => setShowHamburgerMenu(false)}>
|
||||||
<Flex style={{ width: '100%', height: '100%' }} justify="center">
|
<Flex style={{ width: '100%', height: '100%' }} justify="center">
|
||||||
|
<IconButton variant="ghost" color="gray">
|
||||||
|
<GearIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Flex>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{login && (
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
<IconButton variant="ghost" color="gray">
|
<IconButton variant="ghost" color="gray">
|
||||||
<GearIcon />
|
<PersonIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Flex>
|
</Popover.Trigger>
|
||||||
</Link>
|
|
||||||
|
|
||||||
{login && (
|
<Popover.Content align="center">
|
||||||
<Popover.Root>
|
<Flex direction="column" gap="2">
|
||||||
<Popover.Trigger>
|
<Suspense fallback={<Spinner />}>
|
||||||
<IconButton variant="ghost" color="gray">
|
<LoggedIn />
|
||||||
<PersonIcon />
|
</Suspense>
|
||||||
</IconButton>
|
</Flex>
|
||||||
</Popover.Trigger>
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
)}
|
||||||
|
|
||||||
<Popover.Content align="center">
|
{/* TODO: re-enable in the future */}
|
||||||
<Flex direction="column" gap="2">
|
{!login && false && (
|
||||||
<Suspense fallback={<Spinner />}>
|
<Dialog.Root>
|
||||||
<LoggedIn />
|
<Dialog.Trigger>
|
||||||
</Suspense>
|
<Button variant="ghost">Log in</Button>
|
||||||
</Flex>
|
</Dialog.Trigger>
|
||||||
</Popover.Content>
|
|
||||||
</Popover.Root>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* TODO: re-enable in the future */}
|
<Dialog.Content
|
||||||
{!login && false && (
|
|
||||||
<Dialog.Root>
|
|
||||||
<Dialog.Trigger>
|
|
||||||
<Button variant="ghost">Log in</Button>
|
|
||||||
</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content
|
|
||||||
style={{
|
|
||||||
maxWidth: 360,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex direction="column" gap="2" align="center">
|
|
||||||
<Heading size="3">Choose your region</Heading>
|
|
||||||
|
|
||||||
<Flex gap="4" align="center" justify="center" wrap="wrap">
|
|
||||||
{REGIONS.map((region) => (
|
|
||||||
<LinkRadix
|
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
|
||||||
key={region}
|
|
||||||
href={authURL(
|
|
||||||
region,
|
|
||||||
typeof window === 'undefined'
|
|
||||||
? undefined
|
|
||||||
: location.href,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{UNLOCALIZED_REGION_NAMES[region]}
|
|
||||||
</LinkRadix>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex mt="6" gap="3" justify="center" wrap="wrap">
|
|
||||||
{TOOLS.filter((tool) => !tool.href).map((tool) => (
|
|
||||||
<Link
|
|
||||||
href={tool.href ?? `/tools/${tool.id}`}
|
|
||||||
target={tool.href ? '_blank' : undefined}
|
|
||||||
className={
|
|
||||||
tool.disabled ? styles.tool.disabled : styles.tool.enabled
|
|
||||||
}
|
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(/assets/banners/${tool.id}.webp)`,
|
maxWidth: 360,
|
||||||
cursor: tool.disabled ? 'default' : 'pointer',
|
|
||||||
opacity: tool.disabled ? 0.25 : 1,
|
|
||||||
height: 64,
|
|
||||||
width: 144,
|
|
||||||
borderRadius: 8,
|
|
||||||
textDecoration: 'none',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
overflow: 'hidden',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
justifyContent: 'flex-end',
|
|
||||||
padding: 8,
|
|
||||||
transition: `box-shadow ${theme.durations.regular}`,
|
|
||||||
}}
|
}}
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
|
||||||
>
|
>
|
||||||
<Text
|
<Flex direction="column" gap="2" align="center">
|
||||||
style={{
|
<Heading size="3">Choose your region</Heading>
|
||||||
color: theme.colors.textHighContrast,
|
|
||||||
display: 'flex',
|
<Flex gap="4" align="center" justify="center" wrap="wrap">
|
||||||
alignItems: 'center',
|
{REGIONS.map((region) => (
|
||||||
justifyContent: 'center',
|
<LinkRadix
|
||||||
}}
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
>
|
key={region}
|
||||||
{tool.title}
|
href={authURL(
|
||||||
</Text>
|
region,
|
||||||
</Link>
|
typeof window === 'undefined'
|
||||||
))}
|
? undefined
|
||||||
</Flex>
|
: location.href,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{UNLOCALIZED_REGION_NAMES[region]}
|
||||||
|
</LinkRadix>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
)}
|
||||||
</Flex>
|
</Flex>
|
||||||
</Box>
|
|
||||||
</>
|
<Flex mt="6" gap="3" justify="center" wrap="wrap">
|
||||||
|
{TOOLS.filter((tool) => !tool.href).map((tool) => (
|
||||||
|
<Link
|
||||||
|
href={tool.href ?? `/tools/${tool.id}`}
|
||||||
|
target={tool.href ? '_blank' : undefined}
|
||||||
|
className={
|
||||||
|
tool.disabled ? styles.tool.disabled : styles.tool.enabled
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(/assets/banners/${tool.id}.webp)`,
|
||||||
|
cursor: tool.disabled ? 'default' : 'pointer',
|
||||||
|
opacity: tool.disabled ? 0.25 : 1,
|
||||||
|
height: 64,
|
||||||
|
minWidth: 144,
|
||||||
|
maxWidth: 192,
|
||||||
|
flex: 1,
|
||||||
|
borderRadius: 8,
|
||||||
|
textDecoration: 'none',
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
overflow: 'hidden',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
padding: 8,
|
||||||
|
transition: `box-shadow ${theme.durations.regular}`,
|
||||||
|
}}
|
||||||
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
color: theme.colors.textHighContrast,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tool.title}
|
||||||
|
</Text>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user