zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): show docs sidebar on tablet

Browse Source 
closes #509
This commit is contained in:
Darius Cepulis
2026-02-11 10:47:16 -06:00
parent bcf948c8f9
commit f5773825ba
5 changed files with 51 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/NavBar/MobileNav.tsx
+40 -30
View File
@@ -25,7 +25,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
{/* Trigger button - hamburger menu */}
<Dialog.Trigger
className={clsx(
'sm:hidden flex items-center justify-center p-3 h-full aspect-square',
'md:hidden flex items-center justify-center p-3 h-full aspect-square',
dark
? 'bg-light-80 text-dark-100 intent:bg-light-40'
: 'bg-dark-100 dark:bg-light-80 text-light-80 dark:text-dark-100 intent:bg-dark-80 dark:intent:bg-light-40'
@@ -41,7 +41,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
<Dialog.Popup
className={clsx(
'fixed inset-0 z-50 flex flex-col',
dark ? 'bg-dark-100 text-light-100' : 'bg-light-80 dark:bg-dark-100 text-dark-100 dark:text-light-100'
dark ? 'bg-dark-100 text-light-100 dark' : 'bg-light-80 dark:bg-dark-100 text-dark-100 dark:text-light-100'
)}
>
<FilmGrain currentPath={currentPath} />
@@ -68,38 +68,48 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
</Dialog.Close>
</div>
{/* Astro makes it hard to know if we have children, so, we use -mt-px to hide the border-b if we don't */}
<div className={clsx('-mt-px border-b', dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80')}>
{children}
</div>
<div className="overflow-y-scroll">
{/* Astro makes it hard to know if we have children, so, we use -mt-px to hide the border-b if we don't */}
<div className={clsx('-mt-px border-b', dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80')}>
{children}
</div>
{/* Navigation links */}
<nav className="flex flex-col py-3">
{navLinks.map((link) => {
const isActive = link.matchPath && currentPath.startsWith(link.matchPath);
const className = clsx('text-lg px-6 py-3', isActive ? 'underline' : 'intent:underline');
{/* Navigation links */}
<nav className="flex flex-col py-3">
{navLinks.map((link) => {
const isActive = link.matchPath && currentPath.startsWith(link.matchPath);
const className = clsx('text-lg px-6 py-3', isActive ? 'underline' : 'intent:underline');
if (link.href === '/docs') {
return (
<GetStartedLink key={link.href} className={className} aria-current={isActive ? 'page' : undefined}>
{link.label}
</GetStartedLink>
);
}
if (link.href === '/docs') {
return (
<GetStartedLink key={link.href} className={className} aria-current={isActive ? 'page' : undefined}>
{link.label}
</GetStartedLink>
<a
key={link.href}
href={link.href}
className={className}
aria-current={isActive ? 'page' : undefined}
>
{link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
</a>
);
}
return (
<a key={link.href} href={link.href} className={className} aria-current={isActive ? 'page' : undefined}>
{link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
</a>
);
})}
<a href={GITHUB_REPO_URL} className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline">
GitHub <ArrowUpRight size="1em" />
</a>
<a href={DISCORD_INVITE_URL} className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline">
Discord <ArrowUpRight size="1em" />
</a>
</nav>
})}
<a href={GITHUB_REPO_URL} className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline">
GitHub <ArrowUpRight size="1em" />
</a>
<a
href={DISCORD_INVITE_URL}
className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline"
>
Discord <ArrowUpRight size="1em" />
</a>
</nav>
</div>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
site/src/components/NavBar/NavBar.astro
+3 -3
View File
@@ -50,7 +50,7 @@ const { class: className, dark = false } = Astro.props;
<Search dark={dark} class="ml-auto mr-4 sm:self-center" />
{/* Desktop nav links */}
<div class="hidden sm:flex -mb-px pr-3">
<div class="hidden md:flex -mb-px pr-3">
<GetStartedLink
client:idle
className={clsx(
@@ -98,7 +98,7 @@ const { class: className, dark = false } = Astro.props;
</div>
{/* Mobile nav */}
<!-- <MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
<MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
<slot name="mobile-nav" />
</MobileNav> -->
</MobileNav>
</nav>