{"id":30672720,"url":"https://github.com/sofidevo/astro-dynamic-header","last_synced_at":"2025-09-01T05:07:34.722Z","repository":{"id":310729904,"uuid":"1041050142","full_name":"SofiDevO/astro-dynamic-header","owner":"SofiDevO","description":"dynamic header component for astro","archived":false,"fork":false,"pushed_at":"2025-08-29T03:31:05.000Z","size":37471,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-29T06:34:46.753Z","etag":null,"topics":["astro","astrobuild","astrojs","npm","npm-package"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@sofidevo/astro-dynamic-header","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SofiDevO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-19T22:57:04.000Z","updated_at":"2025-08-29T05:15:52.000Z","dependencies_parsed_at":"2025-08-19T23:25:34.692Z","dependency_job_id":null,"html_url":"https://github.com/SofiDevO/astro-dynamic-header","commit_stats":null,"previous_names":["sofidevo/astro-dynamic-header"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SofiDevO/astro-dynamic-header","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fastro-dynamic-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fastro-dynamic-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fastro-dynamic-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fastro-dynamic-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SofiDevO","download_url":"https://codeload.github.com/SofiDevO/astro-dynamic-header/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fastro-dynamic-header/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273077112,"owners_count":25041357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astrobuild","astrojs","npm","npm-package"],"created_at":"2025-09-01T05:07:34.145Z","updated_at":"2025-09-01T05:07:34.708Z","avatar_url":"https://github.com/SofiDevO.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @sofidevo/astro-dynamic-header\n\nA dynamic, responsive header component for Astro projects that can switch between floating and fullscreen styles with multi-level dropdown navigation support.\n\n## Features\n\n- 🎨 **Dynamic Styles**: Switch between floating and fullscreen header layouts\n- 📱 **Fully Responsive**: Mobile-first design with hamburger menu\n- 🎯 **Multi-level Dropdowns**: Support for nested navigation menus\n- 🚀 **TypeScript Support**: Full type safety and IntelliSense\n- 🎨 **Customizable**: Extensive customization options for colors, sizes, and behavior\n- ⚡ **Astro Optimized**: Built specifically for Astro framework\n\n\n### Live demo\n  [https://base-astro-psi.vercel.app/fullscreen-demo](https://base-astro-psi.vercel.app/fullscreen-demo)\n\n## Installation\n\n```bash\n npm i @sofidevo/astro-dynamic-header\n```\n\n## Quick Start\n\n### Basic Usage\n\n```astro\n---\n// Option 1: Import from direct subpath (recommended)\nimport Header from '@sofidevo/astro-dynamic-header/Header';\n\n// Option 2: Import from main entry point with types\nimport { HeaderProps, type MenuItemType } from '@sofidevo/astro-dynamic-header';\n\nconst menuItems = [\n  { link: '/about', text: 'About' },\n  { link: '/contact', text: 'Contact' },\n];\n---\n\n\u003cHeader\n  headerType=\"floating\"\n  logoSrc=\"/logo.png\"\n  menuItems={menuItems}\n/\u003e\n```\n\n### TypeScript Configuration\n\nTo ensure imports work correctly in your Astro project, make sure your `tsconfig.json` has the appropriate configuration:\n\n```json\n{\n  \"compilerOptions\": {\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"extends\": \"astro/tsconfigs/strict\"\n}\n```\n\n### Advanced Usage\n\n```astro\n---\nimport Header from '@sofidevo/astro-dynamic-header/Header';\nimport type { MenuItemType } from '@sofidevo/astro-dynamic-header';\n\nconst menuItems = [\n  {\n    link: '#',\n    text: 'Services',\n    submenu: [\n      {\n        link: '#',\n        text: 'Web Development',\n        submenu: [\n          { link: '/web/frontend', text: 'Frontend' },\n          { link: '/web/backend', text: 'Backend' },\n          { link: '/web/fullstack', text: 'Full Stack' },\n        ],\n      },\n      { link: '/design', text: 'Design' },\n      { link: '/consulting', text: 'Consulting' },\n    ],\n  },\n  { link: '/about', text: 'About' },\n  { link: '/contact', text: 'Contact' },\n];\n---\n\n\u003cHeader\n  headerType=\"fullscreen\"\n  logoSrc=\"/logo.png\"\n  logoAlt=\"My Company\"\n  logoWidth=\"150px\"\n  homeUrl=\"/\"\n  menuItems={menuItems}\n  backgroundColor=\"#000000dd\"\n  backdropBlur=\"blur(15px)\"\n  zIndex={100}\n/\u003e\n```\n\n## Component Props\n\n### Header Component\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `headerType` | `\"floating\" \\| \"fullscreen\"` | `\"floating\"` | Header layout style |\n| `logoSrc` | `string` | `\"/logo.png\"` | Logo image source |\n| `logoAlt` | `string` | `\"Logo\"` | Logo alt text |\n| `logoWidth` | `string` | `\"120px\"` | Logo width |\n| `homeUrl` | `string` | `\"/\"` | Home page URL |\n| `menuItems` | `MenuItemType[]` | `[]` | Navigation menu items |\n| `backgroundColor` | `string` | `\"#0d0d0dcc\"` | Header background color |\n| `backdropBlur` | `string` | `\"blur(20px)\"` | Backdrop filter blur |\n| `zIndex` | `number` | `10` | CSS z-index value |\n\n### Menu Item Structure\n\n```typescript\ninterface MenuItemType {\n  link: string;\n  text: string;\n  submenu?: MenuItemType[];\n}\n```\n\n## Header Types\n\n### Floating Header\n- Centered with max-width constraint\n- Rounded corners\n- Padding around container\n- Perfect for modern, card-like designs\n\n### Fullscreen Header\n- Full viewport width\n- No border radius\n- Edge-to-edge design\n- Ideal for traditional website layouts\n\n\n## Styling and Customization\n\nThe component uses CSS custom properties that you can override:\n\n```css\n:root {\n  --light-spot-color: #00ffff;\n  --color-tertiary: #ffffff;\n  --color-hamburger-lines: #ffffff;\n}\n```\n\n## TypeScript Support\n\nFull TypeScript support with exported interfaces:\n\n```typescript\nimport type {\n  MenuItemType,\n  HeaderProps,\n  NavMenuProps,\n  MobileNavProps,\n  HamburgerButtonProps\n} from '@sofidevo/astro-dynamic-header';\n```\n\n## Browser Support\n\n- All modern browsers\n- Mobile responsive design\n- Supports CSS `backdrop-filter`\n- Graceful degradation for older browsers\n\n## Troubleshooting\n\n### Import Issues\n\nIf you encounter import errors, try these solutions:\n\n1. **Use direct subpath import:**\n   ```astro\n   import Header from '@sofidevo/astro-dynamic-header/Header';\n   ```\n\n2. **Verify TypeScript configuration:**\n   ```json\n   // tsconfig.json\n   {\n     \"compilerOptions\": {\n       \"moduleResolution\": \"bundler\", // or \"nodenext\"\n       \"allowImportingTsExtensions\": true\n     }\n   }\n   ```\n\n3. **Import types separately:**\n   ```astro\n   ---\n   import Header from '@sofidevo/astro-dynamic-header/Header';\n   import type { MenuItemType } from '@sofidevo/astro-dynamic-header';\n   ---\n   ```\n\n### Compatibility\n\n- ✅ Astro 4.x and 5.x\n- ✅ SSG Projects (Static Site Generation)\n- ✅ SSR Projects (Server-Side Rendering)\n- ✅ Hybrid Projects (output: 'hybrid')\n\n## Live Examples\n\nVisit our demo website to see the component in action with interactive examples and complete documentation.\n\n## Testing\n\nThis project includes a comprehensive test suite with 34 tests covering all critical functionality.\n\n### Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage report\nnpm run test:coverage\n```\n\n### Test Coverage\n\nThe test suite covers:\n\n#### Component Logic Tests\n- **Header Component** (4 tests): Hamburger controller functionality, menu toggle behavior\n- **HamburgerButton Component** (10 tests): Button states, responsive behavior, accessibility\n- **MobileNav Component** (7 tests): Dropdown structure, nested submenus, conditional rendering\n- **NavMenu Component** (6 tests): Dynamic positioning, submenu interactions, viewport adjustments\n\n#### Integration Tests (7 tests)\n- Component interaction flows\n- Responsive behavior between mobile/desktop\n- Keyboard navigation and accessibility\n- Menu state management during navigation\n\n### Test Technologies\n- **Vitest**: Fast testing framework\n- **jsdom**: DOM simulation for component testing\n- **TypeScript**: Type-safe test writing\n\n## License\n\nMIT License - see the [LICENSE](./LICENSE) file for details.\n\n## Support\n\nIf you find this package helpful, please consider giving it a ⭐ on GitHub!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofidevo%2Fastro-dynamic-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofidevo%2Fastro-dynamic-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofidevo%2Fastro-dynamic-header/lists"}