Header

현대적인 헤더는 sticky 네비게이션과 글래스 효과를 특징으로 합니다.

주요 기능

🎨 디자인 특징

Sticky Navigation, Glass Effect, Gradient Background, Smooth Animations

📱 반응형 디자인

모든 화면 크기에서 완벽하게 작동하는 반응형 레이아웃

🌟 인터랙션

모든 요소에 부드러운 호버 효과와 애니메이션 적용

🌙 다크 모드

라이트/다크 테마 완벽 지원

📱 반응형 디자인

헤더는 모든 화면 크기에서 완벽하게 작동합니다:

화면 크기	동작
Desktop	전체 네비게이션 표시
Tablet	압축된 레이아웃
Mobile	햄버거 메뉴로 전환

🌟 인터랙션

헤더의 모든 요소는 호버 시 반응합니다:

1. 로고: 호버 시 그라데이션과 회전 효과
2. 네비게이션 링크: 배경색 변경과 이동 효과
3. 테마 토글: 회전 애니메이션
4. 소셜 링크: 플랫폼별 색상 변경

코드 예제

🚀 기본 사용법 ⚙️ 커스터마이징

---
// Header 컴포넌트 사용 예제
import Header from '@pelagornis/page/overrides/Header.astro';
---

<Header />

---
// 커스텀 헤더 설정
import Header from '@pelagornis/page/overrides/Header.astro';

const customNavLinks = [
  { label: "홈", link: "/" },
  { label: "문서", link: "/docs/" },
  { label: "블로그", link: "/blog/" },
];
---

<Header navLinks={customNavLinks} />

팁: 헤더는 자동으로 현재 페이지를 감지하여 활성 상태를 표시합니다.

커스터마이제이션

CSS 변수를 사용하여 헤더의 모양을 변경할 수 있습니다:

:root {
  --header-height: 4rem;
  --header-blur: 16px;
  --header-opacity: 0.8;
  --header-bg: rgba(255, 255, 255, 0.8);
  --header-border: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --header-bg: rgba(0, 0, 0, 0.8);
  --header-border: rgba(255, 255, 255, 0.1);
}