@sofidevo/astro-dynamic-header 1.0.7 → 1.0.10

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/NavMenu.astro +76 -70
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sofidevo/astro-dynamic-header",
3
- "version": "1.0.7",
3
+ "version": "1.0.10",
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",
package/src/NavMenu.astro CHANGED
@@ -16,45 +16,44 @@ export interface Props {
16
16
  homeText?: string;
17
17
  }
18
18
 
19
- const {
20
- menuItems = [],
21
- showHomeLink = true,
22
- homeText = "Home"
23
- } = Astro.props;
19
+ const { menuItems = [], showHomeLink = true, homeText = "Home" } = Astro.props;
24
20
 
25
21
  const pagePathname = Astro.url.pathname;
26
22
  ---
27
23
 
28
24
  <script>
29
25
  function adjustSubsubmenuPositionOnResize() {
30
- const subsubmenus = document.querySelectorAll('.subsubmenu') as NodeListOf<HTMLElement>;
26
+ const subsubmenus = document.querySelectorAll(
27
+ ".subsubmenu"
28
+ ) as NodeListOf<HTMLElement>;
31
29
 
32
30
  subsubmenus.forEach((subsubmenu) => {
33
31
  const rect = subsubmenu.getBoundingClientRect();
34
32
  const viewportWidth = window.innerWidth;
35
33
 
36
34
  if (rect.right > viewportWidth) {
37
- subsubmenu.style.right = '100%';
38
- subsubmenu.style.left = 'auto';
35
+ subsubmenu.style.right = "100%";
36
+ subsubmenu.style.left = "auto";
39
37
  } else {
40
- subsubmenu.style.left = '100%';
41
- subsubmenu.style.right = 'auto';
38
+ subsubmenu.style.left = "100%";
39
+ subsubmenu.style.right = "auto";
42
40
  }
43
41
  });
44
42
  }
45
43
 
46
44
  function handleSubsubmenuInteraction() {
47
- const parentItems = document.querySelectorAll('.submenu__item--secondary');
45
+ const parentItems = document.querySelectorAll(".submenu__item--secondary");
48
46
 
49
47
  parentItems.forEach((parentItem) => {
50
- const subsubmenu = parentItem.querySelector('.subsubmenu');
48
+ const subsubmenu = parentItem.querySelector(".subsubmenu");
51
49
 
52
50
  if (subsubmenu) {
53
51
  const adjustPosition = () => {
54
52
  const viewportWidth = window.innerWidth;
55
53
 
56
54
  const originalDisplay = (subsubmenu as HTMLElement).style.display;
57
- const originalVisibility = (subsubmenu as HTMLElement).style.visibility;
55
+ const originalVisibility = (subsubmenu as HTMLElement).style
56
+ .visibility;
58
57
 
59
58
  (subsubmenu as HTMLElement).style.display = "block";
60
59
  (subsubmenu as HTMLElement).style.visibility = "hidden";
@@ -64,13 +63,15 @@ const pagePathname = Astro.url.pathname;
64
63
  const rect = subsubmenu.getBoundingClientRect();
65
64
 
66
65
  if (rect.right > viewportWidth) {
67
- (subsubmenu as HTMLElement).style.left = "-220%";
66
+ (subsubmenu as HTMLElement).style.left = "-200%";
67
+ (subsubmenu as HTMLElement).style.right = "auto";
68
68
  const leftRect = subsubmenu.getBoundingClientRect();
69
69
 
70
70
  if (leftRect.left < 0) {
71
71
  (subsubmenu as HTMLElement).style.left = "100%";
72
72
  const overflow = rect.right - viewportWidth + 30;
73
- (subsubmenu as HTMLElement).style.transform = `translateX(-${overflow}px)`;
73
+ (subsubmenu as HTMLElement).style.transform =
74
+ `translateX(-${overflow}px)`;
74
75
  }
75
76
  }
76
77
  (subsubmenu as HTMLElement).style.display = originalDisplay;
@@ -83,8 +84,9 @@ const pagePathname = Astro.url.pathname;
83
84
  (subsubmenu as HTMLElement).style.opacity = "1";
84
85
  (subsubmenu as HTMLElement).style.pointerEvents = "all";
85
86
 
86
- const isPositionedLeft = (subsubmenu as HTMLElement).style.left === "-100%";
87
- const transformDirection = isPositionedLeft ? "-1rem" : "2.5rem";
87
+ const isPositionedLeft =
88
+ (subsubmenu as HTMLElement).style.left === "-100%";
89
+ const transformDirection = isPositionedLeft ? "-2rem" : "2.5rem";
88
90
 
89
91
  const currentTransform = (subsubmenu as HTMLElement).style.transform;
90
92
  if (currentTransform && currentTransform.includes("translateX")) {
@@ -93,7 +95,8 @@ const pagePathname = Astro.url.pathname;
93
95
  );
94
96
  if (existingTranslate) {
95
97
  const existingValue = existingTranslate[1];
96
- (subsubmenu as HTMLElement).style.transform = `translateX(calc(${existingValue} + ${transformDirection}))`;
98
+ (subsubmenu as HTMLElement).style.transform =
99
+ `translateX(calc(${existingValue} + ${transformDirection}))`;
97
100
  }
98
101
  } else {
99
102
  (subsubmenu as HTMLElement).style.transform =
@@ -113,8 +116,8 @@ const pagePathname = Astro.url.pathname;
113
116
  });
114
117
  }
115
118
 
116
- window.addEventListener('resize', adjustSubsubmenuPositionOnResize);
117
- document.addEventListener('DOMContentLoaded', () => {
119
+ window.addEventListener("resize", adjustSubsubmenuPositionOnResize);
120
+ document.addEventListener("DOMContentLoaded", () => {
118
121
  adjustSubsubmenuPositionOnResize();
119
122
  handleSubsubmenuInteraction();
120
123
  });
@@ -122,56 +125,60 @@ const pagePathname = Astro.url.pathname;
122
125
 
123
126
  <nav class="header__menu" id="header-menu">
124
127
  <ul class="menu">
125
- {showHomeLink && pagePathname !== "/" && (
126
- <li class="header__item">
127
- <a class="menu__link" href="/" data-astro-prefetch="hover">
128
- {homeText}
129
- </a>
130
- </li>
131
- )}
132
- {menuItems.map((item) => (
133
- <li class="menu__item">
134
- <a class="menu__link" href={item.link}>
135
- {item.text}
128
+ {
129
+ showHomeLink && pagePathname !== "/" && (
130
+ <li class="header__item">
131
+ <a class="menu__link" href="/" data-astro-prefetch="hover">
132
+ {homeText}
133
+ </a>
134
+ </li>
135
+ )
136
+ }
137
+ {
138
+ menuItems.map((item) => (
139
+ <li class="menu__item">
140
+ <a class="menu__link" href={item.link}>
141
+ {item.text}
142
+ {item.submenu && (
143
+ <iconify-icon
144
+ class="iconify-arrow"
145
+ icon="codicon:triangle-down"
146
+ width="15"
147
+ height="15"
148
+ />
149
+ )}
150
+ </a>
136
151
  {item.submenu && (
137
- <iconify-icon
138
- class="iconify-arrow"
139
- icon="codicon:triangle-down"
140
- width="15"
141
- height="15"
142
- />
143
- )}
144
- </a>
145
- {item.submenu && (
146
- <ul class="submenu">
147
- {item.submenu.map((sub) => (
148
- <li class="submenu__item submenu__item--secondary">
149
- <a href={sub.link}>
150
- {sub.text}
151
- {sub.submenu && sub.submenu.length > 0 && (
152
- <iconify-icon
153
- class="iconify-arrow"
154
- icon="codicon:triangle-down"
155
- width="15"
156
- height="15"
157
- />
152
+ <ul class="submenu">
153
+ {item.submenu.map((sub) => (
154
+ <li class="submenu__item submenu__item--secondary">
155
+ <a href={sub.link}>
156
+ {sub.text}
157
+ {sub.submenu && sub.submenu.length > 0 && (
158
+ <iconify-icon
159
+ class="iconify-arrow"
160
+ icon="codicon:triangle-down"
161
+ width="15"
162
+ height="15"
163
+ />
164
+ )}
165
+ </a>
166
+ {sub.submenu && (
167
+ <ul class="subsubmenu">
168
+ {sub.submenu.map((subsub) => (
169
+ <li class="submenu__item--tertiary">
170
+ <a href={subsub.link}>{subsub.text}</a>
171
+ </li>
172
+ ))}
173
+ </ul>
158
174
  )}
159
- </a>
160
- {sub.submenu && (
161
- <ul class="subsubmenu">
162
- {sub.submenu.map((subsub) => (
163
- <li class="submenu__item--tertiary">
164
- <a href={subsub.link}>{subsub.text}</a>
165
- </li>
166
- ))}
167
- </ul>
168
- )}
169
- </li>
170
- ))}
171
- </ul>
172
- )}
173
- </li>
174
- ))}
175
+ </li>
176
+ ))}
177
+ </ul>
178
+ )}
179
+ </li>
180
+ ))
181
+ }
175
182
  </ul>
176
183
  </nav>
177
184
 
@@ -259,7 +266,7 @@ const pagePathname = Astro.url.pathname;
259
266
  align-items: center;
260
267
  width: 100%;
261
268
  height: 4rem;
262
- border-radius: .4rem;
269
+ border-radius: 0.4rem;
263
270
  color: #fff;
264
271
  color: var(--color-tertiary, #fff);
265
272
  }
@@ -340,7 +347,6 @@ const pagePathname = Astro.url.pathname;
340
347
  .submenu li:hover > .subsubmenu {
341
348
  opacity: 1;
342
349
  pointer-events: all;
343
- right: 0;
344
350
  }
345
351
 
346
352
  .submenu li:hover > .subsubmenu::before {