all repos — website @ 1be1d5fceec3abfcde6ccb393501ecbec0492402

My official website.

src/components/Header.astro (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 
---
import Container from '@/components/Container.astro'
import Link from '@/components/Link.astro'
import MobileMenu from '@/components/ui/mobile-menu'
import { ModeToggle } from '@/components/ui/mode-toggle'
import { NAV_LINKS, SITE } from '@/consts'
import { Image } from 'astro:assets'
import logo from '../../public/static/logo.svg'
---

<header
  class="sticky top-0 z-10 bg-background/50 backdrop-blur-md"
  transition:persist
>
  <Container>
    <div class="flex flex-wrap items-center justify-between gap-4 py-4">
      <Link
        href="/"
        class="flex flex-shrink-0 items-center gap-2 text-xl font-semibold transition-colors duration-300 hover:text-primary"
      >
        <Image src={logo} alt="Logo" class="size-8" />
        {SITE.TITLE}
      </Link>
      <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
                href={item.href}
                class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
              >
                {item.label}
              </Link>
            ))
          }
        </nav>
        <MobileMenu client:load transition:persist />
        <ModeToggle client:load transition:persist />
      </div>
    </div>
  </Container>
</header>