@sofidevo/astro-dynamic-header 1.0.9 → 1.0.11

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 +74 -68
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sofidevo/astro-dynamic-header",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
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";
@@ -71,7 +70,8 @@ const pagePathname = Astro.url.pathname;
71
70
  if (leftRect.left < 0) {
72
71
  (subsubmenu as HTMLElement).style.left = "100%";
73
72
  const overflow = rect.right - viewportWidth + 30;
74
- (subsubmenu as HTMLElement).style.transform = `translateX(-${overflow}px)`;
73
+ (subsubmenu as HTMLElement).style.transform =
74
+ `translateX(-${overflow}px)`;
75
75
  }
76
76
  }
77
77
  (subsubmenu as HTMLElement).style.display = originalDisplay;
@@ -84,8 +84,9 @@ const pagePathname = Astro.url.pathname;
84
84
  (subsubmenu as HTMLElement).style.opacity = "1";
85
85
  (subsubmenu as HTMLElement).style.pointerEvents = "all";
86
86
 
87
- const isPositionedLeft = (subsubmenu as HTMLElement).style.left === "-100%";
88
- const transformDirection = isPositionedLeft ? "-1rem" : "2.5rem";
87
+ const isPositionedLeft =
88
+ (subsubmenu as HTMLElement).style.left === "-100%";
89
+ const transformDirection = isPositionedLeft ? "-2rem" : "2.4rem";
89
90
 
90
91
  const currentTransform = (subsubmenu as HTMLElement).style.transform;
91
92
  if (currentTransform && currentTransform.includes("translateX")) {
@@ -94,7 +95,8 @@ const pagePathname = Astro.url.pathname;
94
95
  );
95
96
  if (existingTranslate) {
96
97
  const existingValue = existingTranslate[1];
97
- (subsubmenu as HTMLElement).style.transform = `translateX(calc(${existingValue} + ${transformDirection}))`;
98
+ (subsubmenu as HTMLElement).style.transform =
99
+ `translateX(calc(${existingValue} + ${transformDirection}))`;
98
100
  }
99
101
  } else {
100
102
  (subsubmenu as HTMLElement).style.transform =
@@ -114,8 +116,8 @@ const pagePathname = Astro.url.pathname;
114
116
  });
115
117
  }
116
118
 
117
- window.addEventListener('resize', adjustSubsubmenuPositionOnResize);
118
- document.addEventListener('DOMContentLoaded', () => {
119
+ window.addEventListener("resize", adjustSubsubmenuPositionOnResize);
120
+ document.addEventListener("DOMContentLoaded", () => {
119
121
  adjustSubsubmenuPositionOnResize();
120
122
  handleSubsubmenuInteraction();
121
123
  });
@@ -123,56 +125,60 @@ const pagePathname = Astro.url.pathname;
123
125
 
124
126
  <nav class="header__menu" id="header-menu">
125
127
  <ul class="menu">
126
- {showHomeLink && pagePathname !== "/" && (
127
- <li class="header__item">
128
- <a class="menu__link" href="/" data-astro-prefetch="hover">
129
- {homeText}
130
- </a>
131
- </li>
132
- )}
133
- {menuItems.map((item) => (
134
- <li class="menu__item">
135
- <a class="menu__link" href={item.link}>
136
- {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>
137
151
  {item.submenu && (
138
- <iconify-icon
139
- class="iconify-arrow"
140
- icon="codicon:triangle-down"
141
- width="15"
142
- height="15"
143
- />
144
- )}
145
- </a>
146
- {item.submenu && (
147
- <ul class="submenu">
148
- {item.submenu.map((sub) => (
149
- <li class="submenu__item submenu__item--secondary">
150
- <a href={sub.link}>
151
- {sub.text}
152
- {sub.submenu && sub.submenu.length > 0 && (
153
- <iconify-icon
154
- class="iconify-arrow"
155
- icon="codicon:triangle-down"
156
- width="15"
157
- height="15"
158
- />
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>
159
174
  )}
160
- </a>
161
- {sub.submenu && (
162
- <ul class="subsubmenu">
163
- {sub.submenu.map((subsub) => (
164
- <li class="submenu__item--tertiary">
165
- <a href={subsub.link}>{subsub.text}</a>
166
- </li>
167
- ))}
168
- </ul>
169
- )}
170
- </li>
171
- ))}
172
- </ul>
173
- )}
174
- </li>
175
- ))}
175
+ </li>
176
+ ))}
177
+ </ul>
178
+ )}
179
+ </li>
180
+ ))
181
+ }
176
182
  </ul>
177
183
  </nav>
178
184
 
@@ -260,7 +266,7 @@ const pagePathname = Astro.url.pathname;
260
266
  align-items: center;
261
267
  width: 100%;
262
268
  height: 4rem;
263
- border-radius: .4rem;
269
+ border-radius: 0.4rem;
264
270
  color: #fff;
265
271
  color: var(--color-tertiary, #fff);
266
272
  }