@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 +165 -323
- package/package.json +8 -5
- package/src/ChevronIcon.astro +25 -0
- package/src/HamburgerButton.astro +2 -12
- package/src/Header.astro +75 -116
- package/src/MobileNav.astro +57 -26
- package/src/MoonIcon.astro +106 -0
- package/src/NavMenu.astro +41 -23
- package/src/SunIcon.astro +34 -0
- package/src/defaults.ts +36 -0
- package/src/index.ts +71 -63
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
|
|
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
|
-
- **
|
|
11
|
-
- **Fully Responsive
|
|
12
|
-
- **
|
|
13
|
-
- **
|
|
14
|
-
- **
|
|
15
|
-
- **
|
|
16
|
-
- **
|
|
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
|
|
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
|
-
|
|
25
|
+
npm i @sofidevo/astro-dynamic-header
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
|
|
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
|
-
|
|
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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
38
|
+
const menuItems = [
|
|
39
|
+
{ link: '/about', text: 'About' },
|
|
40
|
+
{ link: '/contact', text: 'Contact' },
|
|
41
|
+
];
|
|
53
42
|
---
|
|
54
43
|
|
|
55
|
-
|
|
56
|
-
<
|
|
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
|
|
53
|
+
### `<Header>`
|
|
94
54
|
|
|
95
|
-
| Prop | Type | Default | Description
|
|
96
|
-
| ------------ | ----------------------------- | ------------ |
|
|
97
|
-
| `headerType` | `"floating" \| "fullscreen"` | `"floating"` |
|
|
98
|
-
| `preset` | `"light" \| "dark" \| "auto"` | `"auto"` | Theme
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
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
|
-
|
|
63
|
+
---
|
|
105
64
|
|
|
106
|
-
|
|
65
|
+
## Configuration Objects
|
|
107
66
|
|
|
108
|
-
|
|
109
|
-
| ------- | ------------- | ---------------------------- |
|
|
110
|
-
| `light` | `ThemeConfig` | Styles applied in light mode |
|
|
111
|
-
| `dark` | `ThemeConfig` | Styles applied in dark mode |
|
|
67
|
+
### `NavConfig`
|
|
112
68
|
|
|
113
|
-
|
|
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
|
-
|
|
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
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
93
|
+
### `TertiaryMenuItem`
|
|
141
94
|
|
|
142
|
-
| Property
|
|
143
|
-
|
|
|
144
|
-
| `
|
|
145
|
-
| `
|
|
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
|
-
|
|
100
|
+
---
|
|
151
101
|
|
|
152
|
-
|
|
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
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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
|
-
|
|
165
|
-
|
|
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
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
149
|
+
---
|
|
210
150
|
|
|
211
|
-
|
|
212
|
-
| --------- | --------------------- | --------------------- | ---------------------------------------- |
|
|
213
|
-
| `actions` | Header & Mobile panel | Responsive visibility | Add action buttons (login, signup, etc.) |
|
|
151
|
+
## Customization & Theme Config
|
|
214
152
|
|
|
215
|
-
|
|
153
|
+
You can fully customize the color scheme using **CSS Custom Properties** (recommended) or the `theme` prop.
|
|
216
154
|
|
|
217
|
-
|
|
218
|
-
---
|
|
219
|
-
import Header from '@sofidevo/astro-dynamic-header/Header';
|
|
155
|
+
### Option 1: Native CSS Variables (Recommended)
|
|
220
156
|
|
|
221
|
-
|
|
222
|
-
menuItems: [{ link: '/about', text: 'About' }]
|
|
223
|
-
};
|
|
224
|
-
---
|
|
157
|
+
Set CSS variables globally in your `:root` style block:
|
|
225
158
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
266
|
-
|
|
188
|
+
...defaultThemes.light,
|
|
189
|
+
accentColor: "#7c3aed",
|
|
190
|
+
backgroundColor: "rgba(255, 255, 255, 0.85)",
|
|
267
191
|
},
|
|
268
192
|
dark: {
|
|
269
|
-
|
|
270
|
-
|
|
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
|
-
|
|
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
|
-
|
|
205
|
+
---
|
|
322
206
|
|
|
323
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
349
|
-
|
|
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
|
-
|
|
365
|
-
preset="auto"
|
|
236
|
+
classNames={classNames}
|
|
366
237
|
/>
|
|
367
238
|
```
|
|
368
239
|
|
|
369
|
-
|
|
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
|
|
244
|
+
### Import issues
|
|
392
245
|
|
|
393
|
-
|
|
246
|
+
Import using the direct subpath:
|
|
394
247
|
|
|
395
|
-
|
|
248
|
+
```astro
|
|
249
|
+
import Header from '@sofidevo/astro-dynamic-header/Header';
|
|
250
|
+
```
|
|
396
251
|
|
|
397
|
-
|
|
398
|
-
import Header from '@sofidevo/astro-dynamic-header/Header';
|
|
399
|
-
```
|
|
252
|
+
Other components are exported similarly:
|
|
400
253
|
|
|
401
|
-
|
|
402
|
-
|
|
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
|
-
|
|
260
|
+
### Acordion icons not showing up
|
|
405
261
|
|
|
406
|
-
|
|
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
|
-
|
|
264
|
+
---
|
|
417
265
|
|
|
418
|
-
|
|
419
|
-
- SSG Projects (Static Site Generation)
|
|
420
|
-
- SSR Projects (Server-Side Rendering)
|
|
421
|
-
- Hybrid Projects (output: 'hybrid')
|
|
266
|
+
## Compatibility
|
|
422
267
|
|
|
423
|
-
|
|
268
|
+
- **Astro 7.x**
|
|
269
|
+
- SSG, SSR, and Hybrid project outputs.
|
|
424
270
|
|
|
425
|
-
|
|
271
|
+
---
|
|
426
272
|
|
|
427
273
|
## License
|
|
428
274
|
|
|
429
|
-
MIT License
|
|
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": "
|
|
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": "^
|
|
56
|
+
"astro": "^7.0.0"
|
|
54
57
|
},
|
|
55
58
|
"devDependencies": {
|
|
56
|
-
"@astrojs/check": "^0.9.
|
|
59
|
+
"@astrojs/check": "^0.9.9",
|
|
57
60
|
"@types/jsdom": "^21.1.7",
|
|
58
61
|
"@vitest/coverage-v8": "^3.2.4",
|
|
59
|
-
"astro": "^
|
|
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>
|