@sofidevo/astro-dynamic-header 2.0.2 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,433 +1,275 @@
1
1
  # @sofidevo/astro-dynamic-header
2
2
 
3
- A dynamic, responsive header component for Astro projects that can switch between floating and fullscreen styles with multi-level dropdown navigation support.
4
-
5
- > [!WARNING]
6
- > **Breaking Changes**: Version 2.0+ introduces a restructured configuration object. If you are upgrading from an older version, please review the [Component Props](#component-props) and the [Comprehensive Example](#comprehensive-example) to migrate your configuration.
3
+ A dynamic, responsive header component for Astro projects. Supports floating and fullscreen layouts, multi-level dropdown navigation, native CSS variable customization, dark mode, and TypeScript — all with zero external icon dependencies.
7
4
 
8
5
  ## Features
9
6
 
10
- - **Dynamic Styles**: Switch between floating and fullscreen header layouts
11
- - **Fully Responsive**: Mobile-first design with hamburger menu
12
- - **Multi-level Dropdowns**: Support for nested navigation menus
13
- - **Slot Support**: Customizable slots for desktop header and mobile panel content
14
- - **TypeScript Support**: Full type safety and IntelliSense
15
- - **Customizable**: Extensive customization options for colors, sizes, and behavior
16
- - **Astro Optimized**: Built specifically for Astro framework
7
+ - **Floating & Fullscreen layouts** — switch layouts with a single prop.
8
+ - **Fully Responsive** — mobile-first accordion dropdowns with optimized hit targets.
9
+ - **3-level Dropdowns** — top, secondary, and tertiary nested navigation items.
10
+ - **Dark Mode Ready** — auto-detects `.dark` on `<html>`, or forces a state with `preset`.
11
+ - **Inline SVG Icons** — no external CDNs, no extra network requests, no flash of missing icons.
12
+ - **Slot Support** — inject your custom logo and header actions directly into slots.
13
+ - **Pure CSS Customization** — customize background, blur, and colors using native CSS variables.
14
+ - **Full TypeScript** — all props and config interfaces are fully typed.
17
15
 
18
- ### Live demo
16
+ ### Live Demo
19
17
 
20
18
  [https://base-astro-psi.vercel.app/fullscreen-demo](https://base-astro-psi.vercel.app/fullscreen-demo)
21
19
 
20
+ ---
21
+
22
22
  ## Installation
23
23
 
24
24
  ```bash
25
- npm i @sofidevo/astro-dynamic-header
25
+ npm i @sofidevo/astro-dynamic-header
26
26
  ```
27
27
 
28
- ## Required Dependencies
29
-
30
- You need to add the Iconify CDN to the head of your project for the hamburger menu icons to work properly:
28
+ No external CDN scripts or stylesheet additions are required.
31
29
 
32
- ```html
33
- <script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
34
- ```
35
-
36
- Add this to your main layout or in the `<head>` section of your Astro pages.
30
+ ---
37
31
 
38
32
  ## Quick Start
39
33
 
40
- ### Basic Usage (Automatic Theme)
41
-
42
- By default, the header uses `preset="auto"`, which automatically detects the theme based on a `.dark` class on your root element (`html` or `body`).
43
-
44
34
  ```astro
45
35
  ---
46
36
  import Header from '@sofidevo/astro-dynamic-header/Header';
47
37
 
48
-
49
- const = menuItems: [
50
- { link: '/about', text: 'About' },
51
- ]
52
-
38
+ const menuItems = [
39
+ { link: '/about', text: 'About' },
40
+ { link: '/contact', text: 'Contact' },
41
+ ];
53
42
  ---
54
43
 
55
- <!-- Detects .dark class on root automatically -->
56
- <Header navigation={{ menuItems }} />
44
+ <Header navigation={{ menuItems }}>
45
+ <a slot="logo" href="/">MyLogo</a>
46
+ </Header>
57
47
  ```
58
48
 
59
- ### Advanced Usage (Dual-Theme Customization)
60
-
61
- You can provide custom colors for both light and dark modes simultaneously.
62
-
63
- ```astro
64
-
65
- ---
66
- import Header from '@sofidevo/astro-dynamic-header/Header';
67
- const navigation = {
68
- menuItems: [
69
- { link: '/about', text: 'About' },
70
- ]
71
- };
72
- const theme = {
73
- light: {
74
- accentColor: "#3e1c71",
75
- backgroundColor: "rgba(255, 255, 255, 0.8)"
76
- },
77
- dark: {
78
- accentColor: "#00ffff",
79
- backgroundColor: "rgba(20, 20, 20, 0.9)"
80
- }
81
- };
82
49
  ---
83
50
 
84
- <Header
85
- preset="auto"
86
- theme={theme}
87
- navigation={navigation}
88
- />
89
- ```
90
-
91
51
  ## Component Props
92
52
 
93
- ### Header Component
53
+ ### `<Header>`
94
54
 
95
- | Prop | Type | Default | Description |
96
- | ------------ | ----------------------------- | ------------ | ------------------------------------------ |
97
- | `headerType` | `"floating" \| "fullscreen"` | `"floating"` | Header layout style |
98
- | `preset` | `"light" \| "dark" \| "auto"` | `"auto"` | Theme behavior. `auto` follows root class. |
99
- | `logo` | `LogoConfig` | `{}` | Logo configuration object |
100
- | `navigation` | `NavConfig` | `{}` | Navigation configuration object |
101
- | `theme` | `DualThemeConfig` | `{}` | Custom theme overrides for light/dark |
102
- | `classNames` | `CustomClassNames` | `{}` | Custom class names for CSS Modules |
55
+ | Prop | Type | Default | Description |
56
+ | ------------ | ----------------------------- | ------------ | ------------------------------------------------- |
57
+ | `headerType` | `"floating" \| "fullscreen"` | `"floating"` | Layout style |
58
+ | `preset` | `"light" \| "dark" \| "auto"` | `"auto"` | Theme mode. `"auto"` follows `.dark` on `<html>`. |
59
+ | `navigation` | `NavConfig` | `{}` | Menu items, home link, and custom CSS classes |
60
+ | `theme` | `DualThemeConfig` | `{}` | Optional theme overrides (prefer CSS variables) |
61
+ | `classNames` | `HeaderClassNames` | `{}` | Inject CSS classes into structural elements |
103
62
 
104
- ### Config Objects
63
+ ---
105
64
 
106
- #### DualThemeConfig
65
+ ## Configuration Objects
107
66
 
108
- | Propery | Type | Description |
109
- | ------- | ------------- | ---------------------------- |
110
- | `light` | `ThemeConfig` | Styles applied in light mode |
111
- | `dark` | `ThemeConfig` | Styles applied in dark mode |
67
+ ### `NavConfig`
112
68
 
113
- #### ThemeConfig
69
+ | Property | Type | Default | Description |
70
+ | --------------------- | ------------ | ------- | ------------------------------------------------------- |
71
+ | `menuItems` | `MenuItem[]` | `[]` | Top-level navigation items |
72
+ | `homeUrl` | `string` | `"/"` | URL for the home link |
73
+ | `header__menu__class` | `string` | — | Extra CSS class(es) for the desktop `<nav>` element |
74
+ | `header__item__class` | `string` | — | Extra CSS class(es) for each top-level `<li>` menu item |
75
+ | `menu__link__class` | `string` | — | Extra CSS class(es) for each top-level `<a>` link |
114
76
 
115
- | Propery | Type | Default |
116
- | ----------------------- | -------- | ---------------- |
117
- | `backgroundColor` | `string` | _Preset default_ |
118
- | `backgroundColorOpaque` | `string` | _Preset default_ |
119
- | `backdropBlur` | `string` | `"blur(20px)"` |
120
- | `zIndex` | `number` | `10` |
121
- | `textColor` | `string` | _Preset default_ |
122
- | `accentColor` | `string` | _Preset default_ |
77
+ ### `MenuItem`
123
78
 
124
- > [!IMPORTANT]
125
- > **Transparency vs Solid Submenus**: To ensure the best UI and avoid rendering bugs with `backdrop-filter` on nested elements, submenus and the mobile navigation panel are **solid/opaque**.
126
- >
127
- > If you use a transparent `backgroundColor` (e.g., `rgba`), remember to also provide its solid counterpart in `backgroundColorOpaque`.
79
+ | Property | Type | Required | Description |
80
+ | --------- | --------------------- | -------- | --------------------------------- |
81
+ | `link` | `string` | ✅ | URL the item points to |
82
+ | `text` | `string` | ✅ | Display label |
83
+ | `submenu` | `SecondaryMenuItem[]` | — | Optional nested items (2nd level) |
128
84
 
129
- ```astro
130
- <Header theme={{
131
- light: {
132
- backgroundColor: "rgba(255, 255, 255, 0.7)", // Transparent header body
133
- backgroundColorOpaque: "#ffffff", // Solid submenus
134
- }
135
- }} />
136
- ```
85
+ ### `SecondaryMenuItem`
137
86
 
138
- #### CustomClassNames
87
+ | Property | Type | Required | Description |
88
+ | --------- | -------------------- | -------- | --------------------------------- |
89
+ | `link` | `string` | ✅ | URL the item points to |
90
+ | `text` | `string` | ✅ | Display label |
91
+ | `submenu` | `TertiaryMenuItem[]` | — | Optional nested items (3rd level) |
139
92
 
140
- The `classNames` prop allows you to inject custom CSS classes (such as Tailwind CSS utility classes) into specific high-level elements of the Header component. This provides a bridge between the component's internal styles and your project's global styling system.
93
+ ### `TertiaryMenuItem`
141
94
 
142
- | Property | Target Element | Purpose & Common Use Cases |
143
- | ----------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
144
- | `container` | Outer `div` wrapping the header | **Positioning & Layout**: Use for `top-0`, `z-50`, `fixed`, or adjusting the `max-width` and `mx-auto` logic. |
145
- | `header` | Inner `<header>` element | **Appearance**: The best place for shadows (`shadow-md`), borders (`border-b`), or custom transition durations. |
146
- | `logo` | `<a>` tag surrounding the logo | **Interactions**: Add hover states, custom focus rings, or adjust the flex alignment of the logo group. |
147
- | `logoText` | `<span>` tag containing the logo text | **Typography**: Override font weights, apply text shadows, or use specific tracking/leading classes. |
148
- | `nav` | `div` wrapping the desktop navigation items | **Desktop Layout**: Adjust spacing between the logo and the menu, or add responsive visibility classes (`hidden md:flex`). |
95
+ | Property | Type | Required | Description |
96
+ | -------- | -------- | -------- | ---------------------- |
97
+ | `link` | `string` | ✅ | URL the item points to |
98
+ | `text` | `string` | ✅ | Display label |
149
99
 
150
- ##### Advanced Usage Examples
100
+ ---
151
101
 
152
- **Implementing a Premium Shadow & Border (Tailwind):**
153
- Ideal for creating a modern "glass" effect with a subtle border and shadow that adapts to dark mode.
102
+ ## Custom Class Names
154
103
 
155
- ```astro
156
- <Header
157
- classNames={{
158
- header: "shadow-xl border-b border-black/5 dark:border-white/10 transition-all duration-500",
159
- container: "top-4 px-6"
160
- }}
161
- />
162
- ```
104
+ The `classNames` prop lets you inject CSS classes into specific structural elements.
105
+
106
+ ### `HeaderClassNames`
163
107
 
164
- **Custom Typography for Logo & Nav Spacing:**
165
- Perfect for matching the header with your brand's specific typography and layout requirements.
108
+ | Property | Target element | Common use cases |
109
+ | ----------- | -------------------------------------- | ------------------------------------------------- |
110
+ | `container` | Outer `<div>` wrapping the header | Positioning, padding, `z-index` |
111
+ | `header` | Inner `<header>` element | Shadows, borders, transitions |
112
+ | `logo` | `<a>` tag surrounding the logo slot | Hover effects, focus rings |
113
+ | `logoText` | `<span>` containing the logo text | Font weight, tracking, text transforms |
114
+ | `nav` | `<div>` wrapping the desktop nav items | Spacing, alignment, responsive visibility |
115
+ | `mobileNav` | Root `<nav>` of the mobile panel | Backdrop blur, custom z-index, slide-in overrides |
166
116
 
167
117
  ```astro
168
- <Header
169
- classNames={{
170
- logoText: "tracking-tighter font-black italic uppercase",
171
- nav: "ml-auto gap-8" /* Moves menu to the right and increases gap */
172
- }}
118
+ <!-- Tailwind example -->
119
+ <Header
120
+ classNames={{
121
+ header: "shadow-xl border-b border-black/5 dark:border-white/10",
122
+ container: "top-4 px-6",
123
+ mobileNav: "backdrop-blur-md",
124
+ }}
173
125
  />
174
126
  ```
175
127
 
176
- > [!TIP]
177
- > Since these classes are injected using Astro's `class:list`, you can also pass objects or arrays if you need conditional logic for your custom classes.
178
-
179
- #### LogoConfig
180
-
181
- | Property | Type | Description |
182
- | ----------- | -------- | ------------------------------------------------ |
183
- | `src` | `string` | URL of the logo image |
184
- | `alt` | `string` | Alternative text for the logo image |
185
- | `width` | `string` | Width of the logo (e.g., "50px", "5rem") |
186
- | `text` | `string` | Text to display next to or instead of logo image |
187
- | `textSize` | `string` | Font size for the logo text |
188
- | `textColor` | `string` | Color for the logo text |
189
-
190
- #### NavConfig
191
-
192
- | Property | Type | Description |
193
- | ----------- | ------------ | --------------------------------------- |
194
- | `homeUrl` | `string` | URL for the home link (defaults to `/`) |
195
- | `menuItems` | `MenuItem[]` | Array of navigation menu items |
196
-
197
- #### MenuItem
128
+ ---
198
129
 
199
- | Property | Type | Description |
200
- | --------- | --------------------- | ----------------------------------- |
201
- | `link` | `string` | URL the menu item points to |
202
- | `text` | `string` | Label text for the menu item |
203
- | `submenu` | `SecondaryMenuItem[]` | Optional array of nested menu items |
130
+ ## Slots
204
131
 
205
- ## Slots Support
132
+ | Slot name | Visible on | Description |
133
+ | --------- | ---------------- | ---------------------------------------------------------- |
134
+ | `logo` | Header | Render your logo exactly as you need (native HTML/widgets) |
135
+ | `actions` | Desktop + mobile | Add buttons, links, or utility widgets |
206
136
 
207
- The Header component provides a flexible slot system that allows you to add additional content:
137
+ ```astro
138
+ <Header navigation={{ menuItems }}>
139
+ <a slot="logo" href="/" class="logo-link">
140
+ <img src="/logo.svg" alt="Branding" width="40" />
141
+ <span>MyBrand</span>
142
+ </a>
143
+ <div slot="actions">
144
+ <a href="/login" class="btn">Log in</a>
145
+ </div>
146
+ </Header>
147
+ ```
208
148
 
209
- ### Available Slots
149
+ ---
210
150
 
211
- | Slot Name | Location | Visibility | Description |
212
- | --------- | --------------------- | --------------------- | ---------------------------------------- |
213
- | `actions` | Header & Mobile panel | Responsive visibility | Add action buttons (login, signup, etc.) |
151
+ ## Customization & Theme Config
214
152
 
215
- ### Example with Slots
153
+ You can fully customize the color scheme using **CSS Custom Properties** (recommended) or the `theme` prop.
216
154
 
217
- ```astro
218
- ---
219
- import Header from '@sofidevo/astro-dynamic-header/Header';
155
+ ### Option 1: Native CSS Variables (Recommended)
220
156
 
221
- const navigation = {
222
- menuItems: [{ link: '/about', text: 'About' }]
223
- };
224
- ---
157
+ Set CSS variables globally in your `:root` style block:
225
158
 
226
- <Header navigation={navigation}>
227
- <div slot="actions">
228
- <button class="login-btn">Login</button>
229
- </div>
230
- </Header>
159
+ ```css
160
+ :root {
161
+ /* Light theme overrides */
162
+ --l-accent: #7c3aed;
163
+ --l-bg: rgba(255, 255, 255, 0.85);
164
+ --l-bg-opaque: #ffffff;
165
+ --l-text: #1a1a1a;
166
+ --l-blur: blur(20px);
167
+
168
+ /* Dark theme overrides */
169
+ --d-accent: #a78bfa;
170
+ --d-bg: rgba(10, 10, 10, 0.85);
171
+ --d-bg-opaque: #0a0a0a;
172
+ --d-text: #f5f5f5;
173
+ --d-blur: blur(20px);
174
+
175
+ /* Hamburger lines override */
176
+ --color-hamburger-lines: #7c3aed;
177
+ }
231
178
  ```
232
179
 
233
- ## Comprehensive Example
234
-
235
- Below is a complete implementation example showcasing custom logo configuration, navigation with a home URL, and theme overrides.
180
+ ### Option 2: JS Theme Prop
236
181
 
237
182
  ```astro
238
183
  ---
239
- import Header from '@sofidevo/astro-dynamic-header/Header';
240
-
241
- const menuItems = [
242
- {
243
- link: "#",
244
- text: "Services",
245
- submenu: [
246
- { link: "/design", text: "Design" },
247
- { link: "/consulting", text: "Consulting" },
248
- {
249
- link: "#",
250
- text: "Web Development",
251
- submenu: [
252
- { link: "/web/frontend", text: "Frontend" },
253
- { link: "/web/backend", text: "Backend" },
254
- { link: "/web/fullstack", text: "Full Stack" },
255
- ],
256
- },
257
- ],
258
- },
259
- { link: "/about", text: "About" },
260
- { link: "/contact", text: "Contact" },
261
- ];
184
+ import { defaultThemes } from '@sofidevo/astro-dynamic-header';
262
185
 
263
186
  const theme = {
264
187
  light: {
265
- accentColor: "#ff0000",
266
- backgroundColor: "rgba(255, 255, 255, 0.8)",
188
+ ...defaultThemes.light,
189
+ accentColor: "#7c3aed",
190
+ backgroundColor: "rgba(255, 255, 255, 0.85)",
267
191
  },
268
192
  dark: {
269
- accentColor: "#00ffff",
270
- backgroundColor: "rgba(20, 20, 20, 0.9)",
271
- },
193
+ ...defaultThemes.dark,
194
+ accentColor: "#a78bfa",
195
+ }
272
196
  };
273
197
  ---
274
198
 
275
- <Header
276
- headerType="floating"
277
- preset="dark"
278
- logo={{
279
- src: "https://itssofi.dev/img/icons/sofi-icon.webp",
280
- alt: "My Site Logo",
281
- width: "44px",
282
- }}
283
- navigation={{
284
- homeUrl: "/",
285
- menuItems: menuItems,
286
- }}
287
- theme={theme}
288
- >
289
- <button slot="actions">Login</button>
290
- </Header>
199
+ <Header theme={theme} />
291
200
  ```
292
201
 
293
- ## Header Types
294
-
295
- ### Floating Header
296
-
297
- - Centered with max-width constraint
298
- - Rounded corners
299
- - Padding around container
300
- - Perfect for modern, card-like designs
301
-
302
- ### Fullscreen Header
303
-
304
- - Full viewport width
305
- - No border radius
306
- - Edge-to-edge design
307
- - Ideal for traditional website layouts
308
-
309
- ## Styling and Customization
310
-
311
- The component uses CSS custom properties that you can override:
312
-
313
- ```css
314
- :root {
315
- --light-spot-color: #00ffff;
316
- --color-tertiary: #ffffff;
317
- --color-hamburger-lines: #ffffff;
318
- }
319
- ```
202
+ > [!IMPORTANT]
203
+ > When using transparent backgrounds, always supply a solid fallback in `backgroundColorOpaque`. Submenus and mobile panels utilize this solid color to prevent visual glitches with nested blur effects.
320
204
 
321
- ## TypeScript Support
205
+ ---
322
206
 
323
- The package provides full TypeScript support. You can import types to ensure your configuration is correct:
207
+ ## TypeScript
324
208
 
325
209
  ```astro
326
210
  ---
327
211
  import Header from '@sofidevo/astro-dynamic-header/Header';
328
212
  import type {
329
- NavConfig,
330
- DualThemeConfig,
331
213
  MenuItem,
332
- SecondaryMenuItem
214
+ NavConfig,
215
+ HeaderClassNames,
216
+ HeaderProps,
333
217
  } from '@sofidevo/astro-dynamic-header';
334
218
 
219
+ const menuItems: MenuItem[] = [
220
+ { link: '/about', text: 'About' }
221
+ ];
222
+
335
223
  const navigation: NavConfig = {
336
- menuItems: [
337
- {
338
- link: '/products',
339
- text: 'Products',
340
- submenu: [
341
- { link: '/software', text: 'Software' },
342
- { link: '/hardware', text: 'Hardware' }
343
- ]
344
- }
345
- ]
224
+ menuItems,
225
+ homeUrl: "/",
226
+ header__menu__class: "flex gap-4"
346
227
  };
347
228
 
348
- const theme: DualThemeConfig = {
349
- light: {
350
- accentColor: "#3e1c71",
351
- backgroundColor: "rgba(255, 255, 255, 0.8)",
352
- backgroundColorOpaque: "#ffffff"
353
- },
354
- dark: {
355
- accentColor: "#00ffff",
356
- backgroundColor: "rgba(10, 10, 10, 0.9)",
357
- backgroundColorOpaque: "#0a0a0a"
358
- }
229
+ const classNames: HeaderClassNames = {
230
+ header: "shadow-lg"
359
231
  };
360
232
  ---
361
233
 
362
234
  <Header
363
235
  navigation={navigation}
364
- theme={theme}
365
- preset="auto"
236
+ classNames={classNames}
366
237
  />
367
238
  ```
368
239
 
369
- ### Available Types
370
-
371
- | Type | Description |
372
- | ------------------- | ---------------------------------------------- |
373
- | `MenuItem` | Top-level menu item with optional properties |
374
- | `SecondaryMenuItem` | Second-level menu item |
375
- | `TertiaryMenuItem` | Third-level menu item |
376
- | `NavConfig` | Main navigation configuration object |
377
- | `ThemeConfig` | Individual theme settings (colors, blur, etc.) |
378
- | `DualThemeConfig` | Combined settings for light and dark modes |
379
- | `LogoConfig` | Logo image and text configuration |
380
- | `HeaderProps` | Main props for the Header component |
381
-
382
- ## Browser Support
383
-
384
- - All modern browsers (Chrome, Firefox, Safari, Edge)
385
- - Mobile responsive design with optimized touch targets
386
- - Supports CSS `backdrop-filter` for glassmorphism
387
- - Automatic theme switching based on OS or site preference via `.dark` class
240
+ ---
388
241
 
389
- ## Troubleshooting
242
+ ## Troubleshooting & FAQ
390
243
 
391
- ### Import Issues
244
+ ### Import issues
392
245
 
393
- If you encounter import errors, try these solutions:
246
+ Import using the direct subpath:
394
247
 
395
- 1. **Use direct subpath import:**
248
+ ```astro
249
+ import Header from '@sofidevo/astro-dynamic-header/Header';
250
+ ```
396
251
 
397
- ```astro
398
- import Header from '@sofidevo/astro-dynamic-header/Header';
399
- ```
252
+ Other components are exported similarly:
400
253
 
401
- 2. **Check relative imports in TS:**
402
- In some environments (like `node16`), you might need to use the `.js` extension even for TypeScript files when importing from the package internals, though the main entry point handles this for you.
254
+ ```astro
255
+ import NavMenu from '@sofidevo/astro-dynamic-header/NavMenu';
256
+ import MobileNav from '@sofidevo/astro-dynamic-header/MobileNav';
257
+ import ChevronIcon from '@sofidevo/astro-dynamic-header/ChevronIcon';
258
+ ```
403
259
 
404
- 3. **Verify TypeScript configuration:**
260
+ ### Acordion icons not showing up
405
261
 
406
- ```json
407
- // tsconfig.json
408
- {
409
- "compilerOptions": {
410
- "moduleResolution": "bundler",
411
- "allowImportingTsExtensions": true
412
- }
413
- }
414
- ```
262
+ Icons are rendered as inline SVG components. If you are upgrading from `v1.x` or `v2.0` and have the old ChevronIcon CDN `<script>` tag in your layout `<head>`, you can safely remove it.
415
263
 
416
- ### Compatibility
264
+ ---
417
265
 
418
- - Astro 4.x and 5.x
419
- - SSG Projects (Static Site Generation)
420
- - SSR Projects (Server-Side Rendering)
421
- - Hybrid Projects (output: 'hybrid')
266
+ ## Compatibility
422
267
 
423
- ## Live Examples
268
+ - **Astro 7.x**
269
+ - SSG, SSR, and Hybrid project outputs.
424
270
 
425
- Visit our demo website to see the component in action with interactive examples and complete documentation.
271
+ ---
426
272
 
427
273
  ## License
428
274
 
429
- MIT License - see the [LICENSE](./LICENSE) file for details.
430
-
431
- ## Support
432
-
433
- If you find this package helpful, please consider giving it a star on GitHub!
275
+ MIT License.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sofidevo/astro-dynamic-header",
3
- "version": "2.0.2",
3
+ "version": "3.1.0",
4
4
  "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -14,10 +14,13 @@
14
14
  "./NavMenu": "./src/NavMenu.astro",
15
15
  "./MobileNav": "./src/MobileNav.astro",
16
16
  "./HamburgerButton": "./src/HamburgerButton.astro",
17
+ "./ChevronIcon": "./src/ChevronIcon.astro",
18
+ "./defaults": "./src/defaults.ts",
17
19
  "./Header.astro": "./src/Header.astro",
18
20
  "./NavMenu.astro": "./src/NavMenu.astro",
19
21
  "./MobileNav.astro": "./src/MobileNav.astro",
20
- "./HamburgerButton.astro": "./src/HamburgerButton.astro"
22
+ "./HamburgerButton.astro": "./src/HamburgerButton.astro",
23
+ "./ChevronIcon.astro": "./src/ChevronIcon.astro"
21
24
  },
22
25
  "files": [
23
26
  "src/*.ts",
@@ -50,13 +53,13 @@
50
53
  "author": "SofiDev contact@sofidev.top",
51
54
  "license": "MIT",
52
55
  "peerDependencies": {
53
- "astro": "^6.0.6"
56
+ "astro": "^7.0.0"
54
57
  },
55
58
  "devDependencies": {
56
- "@astrojs/check": "^0.9.8",
59
+ "@astrojs/check": "^0.9.9",
57
60
  "@types/jsdom": "^21.1.7",
58
61
  "@vitest/coverage-v8": "^3.2.4",
59
- "astro": "^6.0.6",
62
+ "astro": "^7.0.4",
60
63
  "jsdom": "^26.1.0",
61
64
  "typescript": "^5.0.0",
62
65
  "vitest": "^3.2.4"
@@ -0,0 +1,25 @@
1
+ ---
2
+ const { class: className, ...rest } = Astro.props;
3
+
4
+ const viewBox = "0 0 24 24";
5
+ const content = `<path class="hlhawq"/>`;
6
+ ---
7
+
8
+ <svg
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ width="1em"
11
+ height="1em"
12
+ class={className}
13
+ viewBox={viewBox}
14
+ {...rest}
15
+ set:html={content}
16
+ />
17
+
18
+ <style is:inline>
19
+ .hlhawq {
20
+ fill: currentColor;
21
+ d: path(
22
+ "M11.646 15.146L5.854 9.354a.5.5 0 0 1 .353-.854h11.586a.5.5 0 0 1 .353.854l-5.793 5.792a.5.5 0 0 1-.707 0"
23
+ );
24
+ }
25
+ </style>