TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 12:09:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: sticky navbar

Browse Source
This commit is contained in:
tresabhi committed 2024-11-24 20:30:42 -06:00
1 parent e48c57068f
commit 2fe0e9379e
4 files changed
+105 -107
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Navbar.astro
+101 -103
View File
@@ -33,22 +33,21 @@ const isBranchNamed = branchName !== undefined;
height: var(--navbar-height);
top: 0;
z-index: 1;
position: sticky;
}
.expander {
--navbar-height: 48px;
overflow: hidden;
/* overflow: hidden; */
transition-duration: 250ms;
width: 100%;
/* overflow: hidden; */
backdrop-filter: blur(4rem) brightness(0.75);
-webkit-backdrop-filter: blur(4rem) brightness(0.75);
}
.expander[data-expanded='false'] {
max-height: var(--navbar-height);
min-height: 0;
height: var(--navbar-height);
}
.expander[data-expanded='false'] *[data-expanded] {
@@ -56,14 +55,18 @@ const isBranchNamed = branchName !== undefined;
}
.expander[data-expanded='true'] {
max-height: 200vh;
min-height: 100vh;
height: 100vh;
}
.expander[data-expanded='true'] *[data-closed] {
display: none;
}
.expander div[data-radix-scroll-area-viewport] {
overflow-y: scroll !important;
overscroll-behavior: contain;
}
.hamburger {
display: inline-flex;
}
@@ -85,12 +88,6 @@ const isBranchNamed = branchName !== undefined;
max-height: var(--navbar-height) !important;
}
}
.scroll-area {
max-height: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
@@ -112,31 +109,24 @@ const isBranchNamed = branchName !== undefined;
<Flex className="expander" data-expanded="false" direction="column" gap="2">
<Flex justify="center">
<Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
<Flex gap="3" align="center">
<IconButton variant="ghost" color="gray" className="hamburger">
<Cross1Icon data-expanded />
<HamburgerMenuIcon data-closed />
</IconButton>
<Link
color="gray"
highContrast
href="/"
underline="hover"
weight="bold"
>
<Flex align="center" gap="1">
BlitzKit
{
isBranchNamed && (
<Code color="gray" size="1" highContrast variant="outline">
{branchName}
</Code>
)
}
</Flex>
</Link>
</Flex>
<Link
color="gray"
highContrast
href="/"
underline="hover"
weight="bold"
>
<Flex align="center" gap="1">
BlitzKit
{
isBranchNamed && (
<Code color="gray" size="1" variant="outline">
{branchName}
</Code>
)
}
</Flex>
</Link>
<Box flexGrow="1" />
@@ -183,6 +173,7 @@ const isBranchNamed = branchName !== undefined;
>
<DiscordLogoIcon />
</Link>
<Link
style={{ display: 'flex', alignContent: 'center' }}
color="gray"
@@ -193,83 +184,90 @@ const isBranchNamed = branchName !== undefined;
</Link>
<NavbarAccount client:idle />
<IconButton variant="ghost" color="gray" className="hamburger">
<Cross1Icon data-expanded />
<HamburgerMenuIcon data-closed />
</IconButton>
</Flex>
</Flex>
</Flex>
<Grid
columns="repeat(auto-fill, minmax(192px, 1fr))"
flow="dense"
gap="2"
width="100%"
p="3"
pt="0"
>
{
tools.map((tool) => {
const unavailableOnBranch = tool.branches?.every(
(branch) =>
branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
);
<ScrollArea scrollbars="vertical" style={{ height: '100%', width: '100%' }}>
<Grid
columns="repeat(auto-fill, minmax(12rem, 1fr))"
flow="dense"
gap="2"
width="100%"
p="3"
pt="0"
>
{
tools.map((tool) => {
const unavailableOnBranch = tool.branches?.every(
(branch) =>
branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
);
if (unavailableOnBranch) return null;
if (unavailableOnBranch) return null;
return (
<Flex
key={tool.id}
style={{
position: 'relative',
borderRadius: 'var(--radius-2)',
overflow: 'hidden',
backgroundImage: `url(${imgur(tool.image, {
format: 'jpeg',
size: ImgurSize.MediumThumbnail,
})})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
aspectRatio: '2 / 1',
}}
>
<Link
href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
return (
<Flex
key={tool.id}
style={{
display: 'flex',
width: '100%',
height: '100%',
flexDirection: 'column',
textDecoration: 'none',
color: 'inherit',
position: 'relative',
borderRadius: 'var(--radius-2)',
overflow: 'hidden',
backgroundImage: `url(${imgur(tool.image, {
format: 'jpeg',
size: ImgurSize.MediumThumbnail,
})})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
aspectRatio: '2 / 1',
}}
>
<Box
flexGrow="1"
<Link
href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
style={{
backgroundImage: `url(${imgur(tool.image, {
format: 'jpeg',
size: ImgurSize.MediumThumbnail,
})})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
<Flex
p="2"
align="center"
width="100%"
style={{
backgroundColor: 'var(--color-panel-translucent)',
backdropFilter: 'blur(4rem)',
WebkitBackdropFilter: 'blur(4rem)',
display: 'flex',
width: '100%',
height: '100%',
flexDirection: 'column',
textDecoration: 'none',
color: 'inherit',
}}
>
<Text weight="medium">{tool.title}</Text>
</Flex>
</Link>
</Flex>
);
})
}
</Grid>
<Box
flexGrow="1"
style={{
backgroundImage: `url(${imgur(tool.image, {
format: 'jpeg',
size: ImgurSize.MediumThumbnail,
})})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
<Flex
p="2"
align="center"
width="100%"
style={{
backgroundColor: 'var(--color-panel-translucent)',
backdropFilter: 'blur(4rem)',
WebkitBackdropFilter: 'blur(4rem)',
}}
>
<Text>{tool.title}</Text>
</Flex>
</Link>
</Flex>
);
})
}
</Grid>
</ScrollArea>
</Flex>
</Flex>