TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 19:49:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: navbar scrolling

Browse Source
This commit is contained in:
tresabhi committed 2024-11-12 21:34:49 -06:00
1 parent 9687720a83
commit d165a1fc35
1 file changed
+89 -83
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/components/Navbar.astro
+89 -83
View File
@@ -20,6 +20,7 @@ import {
import { resolveBranchName } from '../core/blitzkit/branches'; import { resolveBranchName } from '../core/blitzkit/branches';
import { homeTool, TOOLS } from '../constants/tools'; import { homeTool, TOOLS } from '../constants/tools';
import { NavbarAccount } from './NavbarAccount'; import { NavbarAccount } from './NavbarAccount';
import { times } from 'lodash-es';
const toolsFiltered = TOOLS.filter((tool) => !('href' in tool)); const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
const tools = [homeTool, ...toolsFiltered]; const tools = [homeTool, ...toolsFiltered];
@@ -30,7 +31,6 @@ const isBranchNamed = branchName !== undefined;
<style> <style>
.navbar { .navbar {
height: var(--navbar-height); height: var(--navbar-height);
position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
@@ -38,28 +38,30 @@ const isBranchNamed = branchName !== undefined;
.expander { .expander {
--navbar-height: 48px; --navbar-height: 48px;
overflow: hidden;
transition-duration: 250ms; transition-duration: 250ms;
width: 100%; width: 100%;
/* overflow: hidden; */ /* overflow: hidden; */
backdrop-filter: blur(4rem) brightness(0.75); backdrop-filter: blur(4rem) brightness(0.75);
-webkit-backdrop-filter: blur(4rem) brightness(0.75); -webkit-backdrop-filter: blur(4rem) brightness(0.75);
}
&[data-expanded='false'] { .expander[data-expanded='false'] {
max-height: var(--navbar-height); max-height: var(--navbar-height);
min-height: 0;
}
*[data-expanded] { .expander[data-expanded='false'] *[data-expanded] {
display: none; display: none;
} }
}
&[data-expanded='true'] { .expander[data-expanded='true'] {
max-height: 100vh; max-height: 200vh;
overscroll-behavior: contain; min-height: 100vh;
}
*[data-closed] { .expander[data-expanded='true'] *[data-closed] {
display: none; display: none;
}
}
} }
.hamburger { .hamburger {
@@ -80,9 +82,15 @@ const isBranchNamed = branchName !== undefined;
} }
.expander { .expander {
max-height: var(--navbar-height); max-height: var(--navbar-height) !important;
} }
} }
.scroll-area {
max-height: 200px;
height: 200px;
background-color: red;
}
</style> </style>
<script> <script>
@@ -189,81 +197,79 @@ const isBranchNamed = branchName !== undefined;
</Flex> </Flex>
</Flex> </Flex>
<ScrollArea> <Grid
<Grid columns="repeat(auto-fill, minmax(192px, 1fr))"
columns="repeat(auto-fill, minmax(192px, 1fr))" flow="dense"
flow="dense" gap="2"
gap="2" width="100%"
width="100%" p="3"
p="3" pt="0"
pt="0" >
> {
{ tools.map((tool) => {
tools.map((tool) => { const unavailableOnBranch = tool.branches?.every(
const unavailableOnBranch = tool.branches?.every( (branch) =>
(branch) => branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH), );
);
if (unavailableOnBranch) return null; if (unavailableOnBranch) return null;
return ( return (
<Flex <Flex
key={tool.id} 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}`}
style={{ style={{
position: 'relative', display: 'flex',
borderRadius: 'var(--radius-2)', width: '100%',
overflow: 'hidden', height: '100%',
backgroundImage: `url(${imgur(tool.image, { flexDirection: 'column',
format: 'jpeg', textDecoration: 'none',
size: ImgurSize.MediumThumbnail, color: 'inherit',
})})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
aspectRatio: '2 / 1',
}} }}
> >
<Link <Box
href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`} flexGrow="1"
style={{ style={{
display: 'flex', backgroundImage: `url(${imgur(tool.image, {
width: '100%', format: 'jpeg',
height: '100%', size: ImgurSize.MediumThumbnail,
flexDirection: 'column', })})`,
textDecoration: 'none', backgroundSize: 'cover',
color: 'inherit', backgroundPosition: 'center',
}}
/>
<Flex
p="2"
align="center"
width="100%"
style={{
backgroundColor: 'var(--color-panel-translucent)',
backdropFilter: 'blur(4rem)',
WebkitBackdropFilter: 'blur(4rem)',
}} }}
> >
<Box <Text weight="medium">{tool.title}</Text>
flexGrow="1" </Flex>
style={{ </Link>
backgroundImage: `url(${imgur(tool.image, { </Flex>
format: 'jpeg', );
size: ImgurSize.MediumThumbnail, })
})})`, }
backgroundSize: 'cover', </Grid>
backgroundPosition: 'center',
}}
/>
<Flex
p="2"
align="center"
width="100%"
style={{
backgroundColor: 'var(--color-panel-translucent)',
backdropFilter: 'blur(4rem)',
WebkitBackdropFilter: 'blur(4rem)',
}}
>
<Text weight="medium">{tool.title}</Text>
</Flex>
</Link>
</Flex>
);
})
}
</Grid>
</ScrollArea>
</Flex> </Flex>
</Flex> </Flex>