@sofidevo/astro-dynamic-header 1.0.19 → 1.0.21
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 +127 -1
- package/package.json +1 -1
- package/src/Header.astro +1 -1
- package/src/MobileNav.astro +1 -0
package/README.md
CHANGED
|
@@ -7,7 +7,8 @@ A dynamic, responsive header component for Astro projects that can switch betwee
|
|
|
7
7
|
- 🎨 **Dynamic Styles**: Switch between floating and fullscreen header layouts
|
|
8
8
|
- 📱 **Fully Responsive**: Mobile-first design with hamburger menu
|
|
9
9
|
- 🎯 **Multi-level Dropdowns**: Support for nested navigation menus
|
|
10
|
-
-
|
|
10
|
+
- � **Slot Support**: Customizable slots for desktop header and mobile panel content
|
|
11
|
+
- �🚀 **TypeScript Support**: Full type safety and IntelliSense
|
|
11
12
|
- 🎨 **Customizable**: Extensive customization options for colors, sizes, and behavior
|
|
12
13
|
- ⚡ **Astro Optimized**: Built specifically for Astro framework
|
|
13
14
|
|
|
@@ -132,6 +133,131 @@ interface MenuItemType {
|
|
|
132
133
|
}
|
|
133
134
|
```
|
|
134
135
|
|
|
136
|
+
## Slots Support
|
|
137
|
+
|
|
138
|
+
The Header component provides two customizable slots that allow you to add additional content:
|
|
139
|
+
|
|
140
|
+
### Available Slots
|
|
141
|
+
|
|
142
|
+
| Slot Name | Location | Visibility | Description |
|
|
143
|
+
|-----------|----------|------------|-------------|
|
|
144
|
+
| `slot-desktop` | Header (desktop & mobile) | Always visible | Add content to the main header area |
|
|
145
|
+
| `slot-panel` | Mobile navigation panel | Mobile only | Add content to the mobile menu panel |
|
|
146
|
+
|
|
147
|
+
### Slot Examples
|
|
148
|
+
|
|
149
|
+
#### Using Individual Slots
|
|
150
|
+
|
|
151
|
+
```astro
|
|
152
|
+
---
|
|
153
|
+
import Header from '@sofidevo/astro-dynamic-header/Header';
|
|
154
|
+
|
|
155
|
+
const menuItems = [
|
|
156
|
+
{ link: '/about', text: 'About' },
|
|
157
|
+
{ link: '/contact', text: 'Contact' },
|
|
158
|
+
];
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
<!-- Adding content only to desktop header -->
|
|
162
|
+
<Header
|
|
163
|
+
headerType="floating"
|
|
164
|
+
logoSrc="/logo.png"
|
|
165
|
+
menuItems={menuItems}
|
|
166
|
+
>
|
|
167
|
+
<button slot="slot-desktop" class="cta-button">Get Started</button>
|
|
168
|
+
</Header>
|
|
169
|
+
|
|
170
|
+
<!-- Adding content only to mobile panel -->
|
|
171
|
+
<Header
|
|
172
|
+
headerType="fullscreen"
|
|
173
|
+
logoSrc="/logo.png"
|
|
174
|
+
menuItems={menuItems}
|
|
175
|
+
>
|
|
176
|
+
<div slot="slot-panel" class="mobile-footer">
|
|
177
|
+
<p>© 2024 My Company</p>
|
|
178
|
+
<div class="social-links">
|
|
179
|
+
<a href="/twitter">Twitter</a>
|
|
180
|
+
<a href="/linkedin">LinkedIn</a>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</Header>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
#### Using Both Slots Together
|
|
187
|
+
|
|
188
|
+
```astro
|
|
189
|
+
---
|
|
190
|
+
import Header from '@sofidevo/astro-dynamic-header/Header';
|
|
191
|
+
|
|
192
|
+
const menuItems = [
|
|
193
|
+
{ link: '/about', text: 'About' },
|
|
194
|
+
{ link: '/services', text: 'Services' },
|
|
195
|
+
{ link: '/contact', text: 'Contact' },
|
|
196
|
+
];
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
<Header
|
|
200
|
+
headerType="fullscreen"
|
|
201
|
+
logoSrc="/logo.png"
|
|
202
|
+
logoAlt="My Company"
|
|
203
|
+
logoWidth="150px"
|
|
204
|
+
homeUrl="/"
|
|
205
|
+
menuItems={menuItems}
|
|
206
|
+
backgroundColor="#000000dd"
|
|
207
|
+
backdropBlur="blur(15px)"
|
|
208
|
+
zIndex={100}
|
|
209
|
+
>
|
|
210
|
+
<!-- Content for desktop header -->
|
|
211
|
+
<button slot="slot-desktop" class="cta-button">
|
|
212
|
+
Sign Up
|
|
213
|
+
</button>
|
|
214
|
+
|
|
215
|
+
<!-- Content for mobile panel -->
|
|
216
|
+
<div slot="slot-panel" class="mobile-extras">
|
|
217
|
+
<button class="mobile-cta">Download App</button>
|
|
218
|
+
<div class="mobile-contact">
|
|
219
|
+
<p>Call us: +1 (555) 123-4567</p>
|
|
220
|
+
<p>Email: info@company.com</p>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
</Header>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
#### Responsive Slot Behavior
|
|
227
|
+
|
|
228
|
+
The `slot-desktop` is visible on both desktop and mobile by default. If you want to hide it on mobile, use CSS:
|
|
229
|
+
|
|
230
|
+
```css
|
|
231
|
+
/* Hide desktop slot on mobile devices */
|
|
232
|
+
@media (width < 768px) {
|
|
233
|
+
.cta-button {
|
|
234
|
+
display: none;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* Or create responsive variants */
|
|
239
|
+
.desktop-only {
|
|
240
|
+
display: block;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
@media (width < 768px) {
|
|
244
|
+
.desktop-only {
|
|
245
|
+
display: none;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
```astro
|
|
251
|
+
<Header menuItems={menuItems}>
|
|
252
|
+
<button slot="slot-desktop" class="cta-button desktop-only">
|
|
253
|
+
Desktop CTA
|
|
254
|
+
</button>
|
|
255
|
+
<div slot="slot-panel">
|
|
256
|
+
<button class="mobile-cta">Mobile CTA</button>
|
|
257
|
+
</div>
|
|
258
|
+
</Header>
|
|
259
|
+
```
|
|
260
|
+
|
|
135
261
|
## Header Types
|
|
136
262
|
|
|
137
263
|
### Floating Header
|
package/package.json
CHANGED
package/src/Header.astro
CHANGED
|
@@ -88,7 +88,7 @@ const {
|
|
|
88
88
|
<img class="header__logo" src={logoSrc} alt={logoAlt} style={`width: ${logoWidth};`} />
|
|
89
89
|
</a>
|
|
90
90
|
<NavMenu menuItems={menuItems} />
|
|
91
|
-
<slot/>
|
|
91
|
+
<slot name="slot-desktop" />
|
|
92
92
|
<HamburgerButton />
|
|
93
93
|
|
|
94
94
|
<MobileNav menuItems={menuItems} type={headerType} />
|