@greghowe79/the-lib 2.12.7 → 2.12.8
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.
|
@@ -10,6 +10,15 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
10
10
|
const isOpen = qwik.useSignal(false);
|
|
11
11
|
const isClosing = qwik.useSignal(false);
|
|
12
12
|
qwik.useStyles$(styles);
|
|
13
|
+
const closeMenu = qwik.$(() => {
|
|
14
|
+
if (isOpen.value) {
|
|
15
|
+
isClosing.value = true;
|
|
16
|
+
setTimeout(() => {
|
|
17
|
+
isOpen.value = false;
|
|
18
|
+
isClosing.value = false;
|
|
19
|
+
}, 400);
|
|
20
|
+
}
|
|
21
|
+
});
|
|
13
22
|
qwik.useOnWindow("resize", qwik.$(() => {
|
|
14
23
|
const menuList = document.querySelector(".menu-list");
|
|
15
24
|
menuList?.classList.add("no-transition");
|
|
@@ -19,13 +28,8 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
19
28
|
}));
|
|
20
29
|
qwik.useVisibleTask$(({ track }) => {
|
|
21
30
|
track(() => location.url.pathname);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
setTimeout(() => {
|
|
25
|
-
isOpen.value = false;
|
|
26
|
-
isClosing.value = false;
|
|
27
|
-
}, 400);
|
|
28
|
-
}
|
|
31
|
+
isOpen.value = false;
|
|
32
|
+
isClosing.value = false;
|
|
29
33
|
});
|
|
30
34
|
const renderSearchIcon = (icon) => {
|
|
31
35
|
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
@@ -63,6 +67,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
63
67
|
target: item.target,
|
|
64
68
|
rel: item.rel,
|
|
65
69
|
class: "menu-link",
|
|
70
|
+
onClick$: closeMenu,
|
|
66
71
|
children: item.label
|
|
67
72
|
})
|
|
68
73
|
}, item.label);
|
|
@@ -73,6 +78,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
73
78
|
children: /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
74
79
|
href: item.href,
|
|
75
80
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
81
|
+
onClick$: closeMenu,
|
|
76
82
|
children: item.label
|
|
77
83
|
})
|
|
78
84
|
}, item.label);
|
|
@@ -82,6 +88,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
82
88
|
children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
83
89
|
href: item.href,
|
|
84
90
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
91
|
+
onClick$: closeMenu,
|
|
85
92
|
children: item.label
|
|
86
93
|
})
|
|
87
94
|
}, item.label);
|
|
@@ -115,12 +122,14 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
115
122
|
searchLink && (searchLink.reload ? /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
116
123
|
href: searchLink.href,
|
|
117
124
|
class: "search-link",
|
|
118
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
125
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
126
|
+
onClick$: closeMenu,
|
|
119
127
|
children: renderSearchIcon(searchLink.icon)
|
|
120
128
|
}) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
121
129
|
href: searchLink.href,
|
|
122
130
|
class: "search-link",
|
|
123
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
131
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
132
|
+
onClick$: closeMenu,
|
|
124
133
|
children: renderSearchIcon(searchLink.icon)
|
|
125
134
|
})),
|
|
126
135
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
-
import { component$, useSignal, useStyles$, useOnWindow,
|
|
2
|
+
import { component$, useSignal, useStyles$, $, useOnWindow, useVisibleTask$ } from "@builder.io/qwik";
|
|
3
3
|
import { useLocation, Link } from "@builder.io/qwik-city";
|
|
4
4
|
import styles from "./styles.css.qwik.mjs";
|
|
5
5
|
import { Button } from "../button/button.qwik.mjs";
|
|
@@ -8,6 +8,15 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
8
8
|
const isOpen = useSignal(false);
|
|
9
9
|
const isClosing = useSignal(false);
|
|
10
10
|
useStyles$(styles);
|
|
11
|
+
const closeMenu = $(() => {
|
|
12
|
+
if (isOpen.value) {
|
|
13
|
+
isClosing.value = true;
|
|
14
|
+
setTimeout(() => {
|
|
15
|
+
isOpen.value = false;
|
|
16
|
+
isClosing.value = false;
|
|
17
|
+
}, 400);
|
|
18
|
+
}
|
|
19
|
+
});
|
|
11
20
|
useOnWindow("resize", $(() => {
|
|
12
21
|
const menuList = document.querySelector(".menu-list");
|
|
13
22
|
menuList?.classList.add("no-transition");
|
|
@@ -17,13 +26,8 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
17
26
|
}));
|
|
18
27
|
useVisibleTask$(({ track }) => {
|
|
19
28
|
track(() => location.url.pathname);
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
setTimeout(() => {
|
|
23
|
-
isOpen.value = false;
|
|
24
|
-
isClosing.value = false;
|
|
25
|
-
}, 400);
|
|
26
|
-
}
|
|
29
|
+
isOpen.value = false;
|
|
30
|
+
isClosing.value = false;
|
|
27
31
|
});
|
|
28
32
|
const renderSearchIcon = (icon) => {
|
|
29
33
|
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
@@ -61,6 +65,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
61
65
|
target: item.target,
|
|
62
66
|
rel: item.rel,
|
|
63
67
|
class: "menu-link",
|
|
68
|
+
onClick$: closeMenu,
|
|
64
69
|
children: item.label
|
|
65
70
|
})
|
|
66
71
|
}, item.label);
|
|
@@ -71,6 +76,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
71
76
|
children: /* @__PURE__ */ jsx("a", {
|
|
72
77
|
href: item.href,
|
|
73
78
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
79
|
+
onClick$: closeMenu,
|
|
74
80
|
children: item.label
|
|
75
81
|
})
|
|
76
82
|
}, item.label);
|
|
@@ -80,6 +86,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
80
86
|
children: /* @__PURE__ */ jsx(Link, {
|
|
81
87
|
href: item.href,
|
|
82
88
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
89
|
+
onClick$: closeMenu,
|
|
83
90
|
children: item.label
|
|
84
91
|
})
|
|
85
92
|
}, item.label);
|
|
@@ -113,12 +120,14 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
113
120
|
searchLink && (searchLink.reload ? /* @__PURE__ */ jsx("a", {
|
|
114
121
|
href: searchLink.href,
|
|
115
122
|
class: "search-link",
|
|
116
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
123
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
124
|
+
onClick$: closeMenu,
|
|
117
125
|
children: renderSearchIcon(searchLink.icon)
|
|
118
126
|
}) : /* @__PURE__ */ jsx(Link, {
|
|
119
127
|
href: searchLink.href,
|
|
120
128
|
class: "search-link",
|
|
121
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
129
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
130
|
+
onClick$: closeMenu,
|
|
122
131
|
children: renderSearchIcon(searchLink.icon)
|
|
123
132
|
})),
|
|
124
133
|
/* @__PURE__ */ jsx("div", {
|