@sofidevo/astro-dynamic-header 1.0.29 → 1.0.31
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 +10 -0
- package/package.json +6 -5
- package/src/Header.astro +6 -5
- package/src/MobileNav.astro +1 -1
- package/src/NavMenu.astro +6 -5
package/README.md
CHANGED
|
@@ -22,6 +22,16 @@ A dynamic, responsive header component for Astro projects that can switch betwee
|
|
|
22
22
|
npm i @sofidevo/astro-dynamic-header
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
## Required Dependencies
|
|
26
|
+
|
|
27
|
+
You need to add the Iconify CDN to the head of your project for the hamburger menu icons to work properly:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Add this to your main layout or in the `<head>` section of your Astro pages.
|
|
34
|
+
|
|
25
35
|
## Quick Start
|
|
26
36
|
|
|
27
37
|
### Basic Usage
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sofidevo/astro-dynamic-header",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.31",
|
|
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",
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
"./HamburgerButton.astro": "./src/HamburgerButton.astro"
|
|
21
21
|
},
|
|
22
22
|
"files": [
|
|
23
|
-
"src",
|
|
23
|
+
"src/*.ts",
|
|
24
|
+
"src/*.astro",
|
|
24
25
|
"README.md"
|
|
25
26
|
],
|
|
26
27
|
"scripts": {
|
|
@@ -52,17 +53,17 @@
|
|
|
52
53
|
"astro": "^4.0.0 || ^5.0.0"
|
|
53
54
|
},
|
|
54
55
|
"devDependencies": {
|
|
55
|
-
"@astrojs/check": "^0.9.
|
|
56
|
+
"@astrojs/check": "^0.9.6",
|
|
56
57
|
"@types/jsdom": "^21.1.7",
|
|
57
58
|
"@vitest/coverage-v8": "^3.2.4",
|
|
58
|
-
"astro": "^5.
|
|
59
|
+
"astro": "^5.16.11",
|
|
59
60
|
"jsdom": "^26.1.0",
|
|
60
61
|
"typescript": "^5.0.0",
|
|
61
62
|
"vitest": "^3.2.4"
|
|
62
63
|
},
|
|
63
64
|
"repository": {
|
|
64
65
|
"type": "git",
|
|
65
|
-
"url": "https://github.com/SofiDevO/astro-dynamic-header"
|
|
66
|
+
"url": "git+https://github.com/SofiDevO/astro-dynamic-header.git"
|
|
66
67
|
},
|
|
67
68
|
"bugs": {
|
|
68
69
|
"url": "https://github.com/SofiDevO/astro-dynamic-header/issues"
|
package/src/Header.astro
CHANGED
|
@@ -30,7 +30,7 @@ const {
|
|
|
30
30
|
headerType = "floating",
|
|
31
31
|
logoSrc = "/logo.png",
|
|
32
32
|
logoAlt = "Logo",
|
|
33
|
-
logoWidth = "
|
|
33
|
+
logoWidth = "55px",
|
|
34
34
|
homeUrl = "/",
|
|
35
35
|
menuItems = [],
|
|
36
36
|
backgroundColor = "#0d0d0dcc",
|
|
@@ -97,7 +97,7 @@ const {
|
|
|
97
97
|
</header>
|
|
98
98
|
</div>
|
|
99
99
|
|
|
100
|
-
<style>
|
|
100
|
+
<style is:inline>
|
|
101
101
|
/* Base styles for header container */
|
|
102
102
|
.header__container {
|
|
103
103
|
width: 100%;
|
|
@@ -115,7 +115,7 @@ const {
|
|
|
115
115
|
|
|
116
116
|
/* Floating header container styles */
|
|
117
117
|
.header__container--floating {
|
|
118
|
-
padding:
|
|
118
|
+
padding: .5rem;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
/* Fullscreen header container styles */
|
|
@@ -129,6 +129,7 @@ const {
|
|
|
129
129
|
align-items: center;
|
|
130
130
|
width: 100%;
|
|
131
131
|
justify-content: space-between;
|
|
132
|
+
padding: 1rem 2rem;
|
|
132
133
|
|
|
133
134
|
@media (width < 768px) {
|
|
134
135
|
align-self: flex-end;
|
|
@@ -140,8 +141,8 @@ const {
|
|
|
140
141
|
/* Floating header styles */
|
|
141
142
|
.header--floating {
|
|
142
143
|
max-width: 1100px;
|
|
143
|
-
border-radius:
|
|
144
|
-
padding:
|
|
144
|
+
border-radius: 20px;
|
|
145
|
+
padding: .7rem 1rem;
|
|
145
146
|
|
|
146
147
|
@media (width < 768px) {
|
|
147
148
|
max-width: 95%;
|
package/src/MobileNav.astro
CHANGED
package/src/NavMenu.astro
CHANGED
|
@@ -33,10 +33,10 @@ const pagePathname = Astro.url.pathname;
|
|
|
33
33
|
|
|
34
34
|
if (rect.right > viewportWidth) {
|
|
35
35
|
subsubmenu.style.right = "100%";
|
|
36
|
-
subsubmenu.style.left = "
|
|
36
|
+
subsubmenu.style.left = "0";
|
|
37
37
|
} else {
|
|
38
38
|
subsubmenu.style.left = "100%";
|
|
39
|
-
subsubmenu.style.right = "
|
|
39
|
+
subsubmenu.style.right = "0";
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
}
|
|
@@ -58,12 +58,12 @@ const pagePathname = Astro.url.pathname;
|
|
|
58
58
|
(subsubmenu as HTMLElement).style.display = "block";
|
|
59
59
|
(subsubmenu as HTMLElement).style.visibility = "hidden";
|
|
60
60
|
(subsubmenu as HTMLElement).style.left = "100%";
|
|
61
|
-
(subsubmenu as HTMLElement).style.transform = "";
|
|
61
|
+
(subsubmenu as HTMLElement).style.transform = "auto";
|
|
62
62
|
|
|
63
63
|
const rect = subsubmenu.getBoundingClientRect();
|
|
64
64
|
|
|
65
65
|
if (rect.right > viewportWidth) {
|
|
66
|
-
(subsubmenu as HTMLElement).style.left = "-
|
|
66
|
+
(subsubmenu as HTMLElement).style.left = "-100%";
|
|
67
67
|
(subsubmenu as HTMLElement).style.right = "auto";
|
|
68
68
|
const leftRect = subsubmenu.getBoundingClientRect();
|
|
69
69
|
|
|
@@ -182,7 +182,7 @@ const pagePathname = Astro.url.pathname;
|
|
|
182
182
|
</ul>
|
|
183
183
|
</nav>
|
|
184
184
|
|
|
185
|
-
<style>
|
|
185
|
+
<style is:inline>
|
|
186
186
|
.header__menu {
|
|
187
187
|
@media (width < 768px) {
|
|
188
188
|
display: none;
|
|
@@ -256,6 +256,7 @@ const pagePathname = Astro.url.pathname;
|
|
|
256
256
|
.menu__item {
|
|
257
257
|
padding: 6px;
|
|
258
258
|
position: relative;
|
|
259
|
+
list-style: none;
|
|
259
260
|
}
|
|
260
261
|
|
|
261
262
|
.submenu a,
|