mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 10:47:04 +02:00
feat: more things
This commit is contained in:
TrèsAbhi committed
1 parent
4b88a52fcf
commit
bc9e1c3007
2 files changed
+198
-80
No files matched your search
@@ -1,6 +1,7 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { style, styleVariants } from '@vanilla-extract/css';
|
||||
|
||||
const MIN_WIDTH = 640 + 64;
|
||||
const MIN_WIDTH = 640 + 128;
|
||||
const HEIGHT = 48;
|
||||
|
||||
export const hamburger = style({
|
||||
display: 'inline-flex',
|
||||
@@ -21,3 +22,33 @@ export const tools = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const navbarBase = style({
|
||||
// 1px overlap with content to bleed color
|
||||
marginBottom: -1,
|
||||
backdropFilter: 'blur(4rem) brightness(0.75)',
|
||||
WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
|
||||
zIndex: 1,
|
||||
transitionDuration: '250ms',
|
||||
|
||||
'@media': {
|
||||
[`screen and (min-width: ${MIN_WIDTH}px)`]: {
|
||||
maxHeight: HEIGHT,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const navbar = styleVariants({
|
||||
false: [
|
||||
navbarBase,
|
||||
{
|
||||
maxHeight: HEIGHT,
|
||||
},
|
||||
],
|
||||
true: [
|
||||
navbarBase,
|
||||
{
|
||||
maxHeight: '100vh',
|
||||
},
|
||||
],
|
||||
});
|
||||
+165
-78
@@ -1,15 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Cross1Icon,
|
||||
DiscordLogoIcon,
|
||||
GearIcon,
|
||||
HamburgerMenuIcon,
|
||||
PersonIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import { Box, Flex, IconButton, Separator } from '@radix-ui/themes';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Grid,
|
||||
IconButton,
|
||||
ScrollArea,
|
||||
Separator,
|
||||
Text,
|
||||
} from '@radix-ui/themes';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { TOOLS } from '../../constants/tools';
|
||||
import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
|
||||
import { PatreonIcon } from '../../icons/Patreon';
|
||||
import * as App from '../../stores/app';
|
||||
import { Link } from '../Link';
|
||||
@@ -23,93 +33,170 @@ export default function Navbar() {
|
||||
|
||||
return (
|
||||
<Flex
|
||||
justify="center"
|
||||
direction="column"
|
||||
position="sticky"
|
||||
top="0"
|
||||
style={{
|
||||
// 1px overlap with content to bleed color
|
||||
marginBottom: -1,
|
||||
backdropFilter: 'blur(4rem) brightness(0.75)',
|
||||
WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
|
||||
zIndex: 1,
|
||||
}}
|
||||
className={styles.navbar[`${showHamburgerMenu}`]}
|
||||
overflow="hidden"
|
||||
>
|
||||
<Flex flexGrow="1" maxWidth="1024px" p="2" align="center">
|
||||
<Flex gap="3" align="center">
|
||||
<IconButton variant="ghost" color="gray" className={styles.hamburger}>
|
||||
<HamburgerMenuIcon />
|
||||
</IconButton>
|
||||
<Flex justify="center">
|
||||
<Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
|
||||
<Flex gap="3" align="center">
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
className={styles.hamburger}
|
||||
onClick={() => setShowHamburgerMenu((state) => !state)}
|
||||
>
|
||||
{showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
|
||||
</IconButton>
|
||||
|
||||
<Link
|
||||
color="gray"
|
||||
highContrast
|
||||
href="/"
|
||||
underline="hover"
|
||||
weight="bold"
|
||||
<Link
|
||||
color="gray"
|
||||
highContrast
|
||||
href="/"
|
||||
underline="hover"
|
||||
weight="bold"
|
||||
onClick={() => setShowHamburgerMenu(false)}
|
||||
>
|
||||
BlitzKit
|
||||
</Link>
|
||||
</Flex>
|
||||
|
||||
<Box flexGrow="1" />
|
||||
|
||||
<Flex
|
||||
align="center"
|
||||
gap="2"
|
||||
justify="center"
|
||||
className={styles.tools}
|
||||
>
|
||||
BlitzKit
|
||||
</Link>
|
||||
</Flex>
|
||||
{TOOLS.map((tool, index) => {
|
||||
const selected = pathname.startsWith(`/tools/${tool.id}`);
|
||||
|
||||
<Box flexGrow="1" />
|
||||
return (
|
||||
<>
|
||||
{index > 0 && <Separator orientation="vertical" size="1" />}
|
||||
<Link
|
||||
color="gray"
|
||||
highContrast={selected}
|
||||
size="2"
|
||||
href={`tools/${tool.id}`}
|
||||
key={tool.title}
|
||||
underline={selected ? 'always' : 'hover'}
|
||||
>
|
||||
{tool.title}
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Flex align="center" gap="2" justify="center" className={styles.tools}>
|
||||
{TOOLS.map((tool, index) => {
|
||||
const selected = pathname.startsWith(`/tools/${tool.id}`);
|
||||
<Box flexGrow="1" />
|
||||
|
||||
return (
|
||||
<>
|
||||
{index > 0 && <Separator orientation="vertical" size="1" />}
|
||||
<Link
|
||||
color="gray"
|
||||
highContrast={selected}
|
||||
size="2"
|
||||
href={`tools/${tool.id}`}
|
||||
key={tool.title}
|
||||
underline={selected ? 'always' : 'hover'}
|
||||
>
|
||||
{tool.title}
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Box flexGrow="1" />
|
||||
|
||||
<Flex align="center" gap="3">
|
||||
<Link
|
||||
style={{ display: 'flex', alignContent: 'center' }}
|
||||
color="gray"
|
||||
href="https://discord.gg/nDt7AjGJQH"
|
||||
underline="none"
|
||||
target="_blank"
|
||||
>
|
||||
<DiscordLogoIcon />
|
||||
</Link>
|
||||
<Link
|
||||
style={{ display: 'flex', alignContent: 'center' }}
|
||||
color="gray"
|
||||
href="https://discord.gg/nDt7AjGJQH"
|
||||
underline="none"
|
||||
target="_blank"
|
||||
>
|
||||
<PatreonIcon width="0.75em" height="0.75em" />
|
||||
</Link>
|
||||
<Link
|
||||
style={{ display: 'flex', alignContent: 'center' }}
|
||||
color="gray"
|
||||
href="/settings"
|
||||
underline="none"
|
||||
target="_blank"
|
||||
>
|
||||
<GearIcon />
|
||||
</Link>
|
||||
<IconButton variant="ghost" color="gray">
|
||||
<PersonIcon />
|
||||
</IconButton>
|
||||
<Flex align="center" gap="3">
|
||||
<Link
|
||||
style={{ display: 'flex', alignContent: 'center' }}
|
||||
color="gray"
|
||||
href="https://discord.gg/nDt7AjGJQH"
|
||||
underline="none"
|
||||
target="_blank"
|
||||
onClick={() => setShowHamburgerMenu(false)}
|
||||
>
|
||||
<DiscordLogoIcon />
|
||||
</Link>
|
||||
<Link
|
||||
style={{ display: 'flex', alignContent: 'center' }}
|
||||
color="gray"
|
||||
href="https://discord.gg/nDt7AjGJQH"
|
||||
underline="none"
|
||||
target="_blank"
|
||||
onClick={() => setShowHamburgerMenu(false)}
|
||||
>
|
||||
<PatreonIcon width="0.75em" height="0.75em" />
|
||||
</Link>
|
||||
<Link
|
||||
style={{ display: 'flex', alignContent: 'center' }}
|
||||
color="gray"
|
||||
href="/settings"
|
||||
underline="none"
|
||||
target="_blank"
|
||||
onClick={() => setShowHamburgerMenu(false)}
|
||||
>
|
||||
<GearIcon />
|
||||
</Link>
|
||||
<IconButton variant="ghost" color="gray">
|
||||
<PersonIcon />
|
||||
</IconButton>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<ScrollArea>
|
||||
<Flex justify="center">
|
||||
<Grid
|
||||
columns="repeat(auto-fill, minmax(128px, 1fr))"
|
||||
flow="dense"
|
||||
gap="2"
|
||||
width="100%"
|
||||
p="4"
|
||||
pt="0"
|
||||
>
|
||||
{TOOLS.map((tool) => (
|
||||
<Flex
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderRadius: 'var(--radius-2)',
|
||||
overflow: 'hidden',
|
||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
aspectRatio: '4 / 3',
|
||||
}}
|
||||
onClick={() => setShowHamburgerMenu(false)}
|
||||
>
|
||||
<Link
|
||||
href={`/tools/${tool.id}`}
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
flexGrow="1"
|
||||
style={{
|
||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
|
||||
<Flex
|
||||
p="2"
|
||||
align="center"
|
||||
width="100%"
|
||||
direction={{
|
||||
initial: 'column',
|
||||
sm: 'row',
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: 'var(--color-panel-translucent)',
|
||||
backdropFilter: 'blur(4rem)',
|
||||
WebkitBackdropFilter: 'blur(4rem)',
|
||||
}}
|
||||
>
|
||||
<Text weight="medium">{tool.title}</Text>
|
||||
</Flex>
|
||||
</Link>
|
||||
</Flex>
|
||||
))}
|
||||
</Grid>
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user