z0x/blog.z0x.ca
Code Actions

feat: shadcn-style mobile menu

Browse source
This commit is contained in:
enscribe 2024-09-12 19:59:13 -07:00
parent 2211c4bbf3
commit 72655a8317
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
5 changed files with 70 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/Header.astro
View file

@ -2,6 +2,7 @@
import { ModeToggle } from '@/components/ui/mode-toggle'
import Container from '@components/Container.astro'
import Link from '@components/Link.astro'
import MobileMenu from '@components/ui/mobile-menu'
import { NAV_LINKS, SITE } from '@consts'
import { Image } from 'astro:assets'
import logo from '../../public/static/logo.svg'
@ -20,8 +21,8 @@ import logo from '../../public/static/logo.svg'
<Image src={logo} alt="Logo" class="size-8 rounded-sm" />
{SITE.TITLE}
</Link>
<div class="flex items-center gap-4">
<nav class="flex items-center gap-4 text-sm sm:gap-6">
<div class="flex items-center gap-2 md:gap-4">
<nav class="hidden items-center gap-4 text-sm sm:gap-6 md:flex">
{
NAV_LINKS.map((item) => (
<Link
@ -33,7 +34,8 @@ import logo from '../../public/static/logo.svg'
))
}
</nav>
<ModeToggle client:load />
<MobileMenu client:load transition:persist />
<ModeToggle client:load transition:persist />
</div>
</div>
</Container>