@greghowe79/the-lib 2.12.0 → 2.12.1
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/lib/components/navigationmenu/NavigationMenu.qwik.cjs +62 -44
- package/lib/components/navigationmenu/NavigationMenu.qwik.mjs +62 -44
- package/lib/components/navigationmenu/styles.css.qwik.cjs +1 -1
- package/lib/components/navigationmenu/styles.css.qwik.mjs +1 -1
- package/lib-types/components/navigationmenu/NavigationMenu.d.ts +7 -0
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ const qwik = require("@builder.io/qwik");
|
|
|
5
5
|
const qwikCity = require("@builder.io/qwik-city");
|
|
6
6
|
const styles = require("./styles.css.qwik.cjs");
|
|
7
7
|
const button = require("../button/button.qwik.cjs");
|
|
8
|
-
const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload }) => {
|
|
8
|
+
const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload, searchLink }) => {
|
|
9
9
|
const location = qwikCity.useLocation();
|
|
10
10
|
const isOpen = qwik.useSignal(false);
|
|
11
11
|
qwik.useStyles$(styles);
|
|
@@ -20,6 +20,9 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
20
20
|
track(() => location.url.pathname);
|
|
21
21
|
isOpen.value = false;
|
|
22
22
|
});
|
|
23
|
+
const renderSearchIcon = (icon) => {
|
|
24
|
+
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
25
|
+
};
|
|
23
26
|
return /* @__PURE__ */ jsxRuntime.jsx("nav", {
|
|
24
27
|
class: `menu ${isOpen.value ? "open" : ""}`,
|
|
25
28
|
"aria-label": ariaLabel,
|
|
@@ -29,30 +32,17 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
29
32
|
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
30
33
|
class: "menu-left",
|
|
31
34
|
children: [
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
onClick$: () => isOpen.value = !isOpen.value,
|
|
44
|
-
class: `menu-toggle ${isOpen.value ? "open" : ""}`,
|
|
45
|
-
children: [
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
47
|
-
class: "bar"
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
50
|
-
class: "bar"
|
|
51
|
-
}),
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
53
|
-
class: "bar"
|
|
54
|
-
})
|
|
55
|
-
]
|
|
35
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
36
|
+
class: "menu-logo",
|
|
37
|
+
children: logoReload ? /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
38
|
+
href: `/${locale}`,
|
|
39
|
+
"aria-label": "Homepage",
|
|
40
|
+
children: logoComponent && logoComponent({}, null, 0)
|
|
41
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
42
|
+
href: `/${locale}`,
|
|
43
|
+
"aria-label": "Homepage",
|
|
44
|
+
children: logoComponent && logoComponent({}, null, 0)
|
|
45
|
+
})
|
|
56
46
|
}),
|
|
57
47
|
/* @__PURE__ */ jsxRuntime.jsxs("ul", {
|
|
58
48
|
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
@@ -93,10 +83,6 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
93
83
|
return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
|
|
94
84
|
id,
|
|
95
85
|
label: label ?? "",
|
|
96
|
-
// onClick$={() => {
|
|
97
|
-
// isOpen.value = false;
|
|
98
|
-
// onClick$?.();
|
|
99
|
-
// }}
|
|
100
86
|
onClick$: () => {
|
|
101
87
|
onClick$?.();
|
|
102
88
|
},
|
|
@@ -113,21 +99,53 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
113
99
|
})
|
|
114
100
|
]
|
|
115
101
|
}),
|
|
116
|
-
/* @__PURE__ */ jsxRuntime.
|
|
117
|
-
class: "menu-
|
|
118
|
-
children:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
},
|
|
130
|
-
|
|
102
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
103
|
+
class: "menu-toolbar",
|
|
104
|
+
children: [
|
|
105
|
+
searchLink && (searchLink.reload ? /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
106
|
+
href: searchLink.href,
|
|
107
|
+
class: "search-link",
|
|
108
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
109
|
+
children: renderSearchIcon(searchLink.icon)
|
|
110
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
111
|
+
href: searchLink.href,
|
|
112
|
+
class: "search-link",
|
|
113
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
114
|
+
children: renderSearchIcon(searchLink.icon)
|
|
115
|
+
})),
|
|
116
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
117
|
+
class: "desktop-only",
|
|
118
|
+
children: actions?.map((action) => {
|
|
119
|
+
return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
|
|
120
|
+
id: action.id,
|
|
121
|
+
label: action.label ?? "",
|
|
122
|
+
onClick$: action.onClick$,
|
|
123
|
+
icon: action.icon,
|
|
124
|
+
variant: action.variant,
|
|
125
|
+
ariaLabel: action.ariaLabel,
|
|
126
|
+
customColors: action.customColors,
|
|
127
|
+
isLoading: isLoading && !!action.label,
|
|
128
|
+
disabled: isLoading
|
|
129
|
+
}, action.id);
|
|
130
|
+
})
|
|
131
|
+
}),
|
|
132
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
133
|
+
"aria-label": "Toggle menu",
|
|
134
|
+
onClick$: () => isOpen.value = !isOpen.value,
|
|
135
|
+
class: `menu-toggle ${isOpen.value ? "open" : ""}`,
|
|
136
|
+
children: [
|
|
137
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
138
|
+
class: "bar"
|
|
139
|
+
}),
|
|
140
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
141
|
+
class: "bar"
|
|
142
|
+
}),
|
|
143
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
144
|
+
class: "bar"
|
|
145
|
+
})
|
|
146
|
+
]
|
|
147
|
+
})
|
|
148
|
+
]
|
|
131
149
|
})
|
|
132
150
|
]
|
|
133
151
|
})
|
|
@@ -3,7 +3,7 @@ import { component$, useSignal, useStyles$, useOnWindow, $, useVisibleTask$ } fr
|
|
|
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";
|
|
6
|
-
const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload }) => {
|
|
6
|
+
const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload, searchLink }) => {
|
|
7
7
|
const location = useLocation();
|
|
8
8
|
const isOpen = useSignal(false);
|
|
9
9
|
useStyles$(styles);
|
|
@@ -18,6 +18,9 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
18
18
|
track(() => location.url.pathname);
|
|
19
19
|
isOpen.value = false;
|
|
20
20
|
});
|
|
21
|
+
const renderSearchIcon = (icon) => {
|
|
22
|
+
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
23
|
+
};
|
|
21
24
|
return /* @__PURE__ */ jsx("nav", {
|
|
22
25
|
class: `menu ${isOpen.value ? "open" : ""}`,
|
|
23
26
|
"aria-label": ariaLabel,
|
|
@@ -27,30 +30,17 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
27
30
|
/* @__PURE__ */ jsxs("div", {
|
|
28
31
|
class: "menu-left",
|
|
29
32
|
children: [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
onClick$: () => isOpen.value = !isOpen.value,
|
|
42
|
-
class: `menu-toggle ${isOpen.value ? "open" : ""}`,
|
|
43
|
-
children: [
|
|
44
|
-
/* @__PURE__ */ jsx("span", {
|
|
45
|
-
class: "bar"
|
|
46
|
-
}),
|
|
47
|
-
/* @__PURE__ */ jsx("span", {
|
|
48
|
-
class: "bar"
|
|
49
|
-
}),
|
|
50
|
-
/* @__PURE__ */ jsx("span", {
|
|
51
|
-
class: "bar"
|
|
52
|
-
})
|
|
53
|
-
]
|
|
33
|
+
/* @__PURE__ */ jsx("div", {
|
|
34
|
+
class: "menu-logo",
|
|
35
|
+
children: logoReload ? /* @__PURE__ */ jsx("a", {
|
|
36
|
+
href: `/${locale}`,
|
|
37
|
+
"aria-label": "Homepage",
|
|
38
|
+
children: logoComponent && logoComponent({}, null, 0)
|
|
39
|
+
}) : /* @__PURE__ */ jsx(Link, {
|
|
40
|
+
href: `/${locale}`,
|
|
41
|
+
"aria-label": "Homepage",
|
|
42
|
+
children: logoComponent && logoComponent({}, null, 0)
|
|
43
|
+
})
|
|
54
44
|
}),
|
|
55
45
|
/* @__PURE__ */ jsxs("ul", {
|
|
56
46
|
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
@@ -91,10 +81,6 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
91
81
|
return /* @__PURE__ */ jsx(Button, {
|
|
92
82
|
id,
|
|
93
83
|
label: label ?? "",
|
|
94
|
-
// onClick$={() => {
|
|
95
|
-
// isOpen.value = false;
|
|
96
|
-
// onClick$?.();
|
|
97
|
-
// }}
|
|
98
84
|
onClick$: () => {
|
|
99
85
|
onClick$?.();
|
|
100
86
|
},
|
|
@@ -111,21 +97,53 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
111
97
|
})
|
|
112
98
|
]
|
|
113
99
|
}),
|
|
114
|
-
/* @__PURE__ */
|
|
115
|
-
class: "menu-
|
|
116
|
-
children:
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
},
|
|
128
|
-
|
|
100
|
+
/* @__PURE__ */ jsxs("div", {
|
|
101
|
+
class: "menu-toolbar",
|
|
102
|
+
children: [
|
|
103
|
+
searchLink && (searchLink.reload ? /* @__PURE__ */ jsx("a", {
|
|
104
|
+
href: searchLink.href,
|
|
105
|
+
class: "search-link",
|
|
106
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
107
|
+
children: renderSearchIcon(searchLink.icon)
|
|
108
|
+
}) : /* @__PURE__ */ jsx(Link, {
|
|
109
|
+
href: searchLink.href,
|
|
110
|
+
class: "search-link",
|
|
111
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
112
|
+
children: renderSearchIcon(searchLink.icon)
|
|
113
|
+
})),
|
|
114
|
+
/* @__PURE__ */ jsx("div", {
|
|
115
|
+
class: "desktop-only",
|
|
116
|
+
children: actions?.map((action) => {
|
|
117
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
118
|
+
id: action.id,
|
|
119
|
+
label: action.label ?? "",
|
|
120
|
+
onClick$: action.onClick$,
|
|
121
|
+
icon: action.icon,
|
|
122
|
+
variant: action.variant,
|
|
123
|
+
ariaLabel: action.ariaLabel,
|
|
124
|
+
customColors: action.customColors,
|
|
125
|
+
isLoading: isLoading && !!action.label,
|
|
126
|
+
disabled: isLoading
|
|
127
|
+
}, action.id);
|
|
128
|
+
})
|
|
129
|
+
}),
|
|
130
|
+
/* @__PURE__ */ jsxs("button", {
|
|
131
|
+
"aria-label": "Toggle menu",
|
|
132
|
+
onClick$: () => isOpen.value = !isOpen.value,
|
|
133
|
+
class: `menu-toggle ${isOpen.value ? "open" : ""}`,
|
|
134
|
+
children: [
|
|
135
|
+
/* @__PURE__ */ jsx("span", {
|
|
136
|
+
class: "bar"
|
|
137
|
+
}),
|
|
138
|
+
/* @__PURE__ */ jsx("span", {
|
|
139
|
+
class: "bar"
|
|
140
|
+
}),
|
|
141
|
+
/* @__PURE__ */ jsx("span", {
|
|
142
|
+
class: "bar"
|
|
143
|
+
})
|
|
144
|
+
]
|
|
145
|
+
})
|
|
146
|
+
]
|
|
129
147
|
})
|
|
130
148
|
]
|
|
131
149
|
})
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = ".menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n
|
|
2
|
+
const styles = "/* .menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n display: flex;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n .menu-container {\r\n height: 100%;\r\n padding: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: 1rem;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n} */\r\n\r\n.menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n/* ── Layout ── */\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 0 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n\r\n.menu-logo {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ── Links ── */\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n/* ── Search link ── */\r\n.search-link {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n background-color: #f0f0f0;\r\n}\r\n\r\n/* ── Hamburger button ── */\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n/* ── Visibility helpers ── */\r\n.desktop-only {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n/* ── Mobile ── */\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n\r\n .menu-container {\r\n height: 100%;\r\n padding: 0 1rem;\r\n }\r\n\r\n .menu-left {\r\n padding-left: 1rem;\r\n }\r\n\r\n .menu-toolbar {\r\n padding-right: 1rem;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = ".menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n
|
|
1
|
+
const styles = "/* .menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n display: flex;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n .menu-container {\r\n height: 100%;\r\n padding: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: 1rem;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n} */\r\n\r\n.menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n/* ── Layout ── */\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 0 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n\r\n.menu-logo {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ── Links ── */\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n/* ── Search link ── */\r\n.search-link {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n background-color: #f0f0f0;\r\n}\r\n\r\n/* ── Hamburger button ── */\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n/* ── Visibility helpers ── */\r\n.desktop-only {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n/* ── Mobile ── */\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n\r\n .menu-container {\r\n height: 100%;\r\n padding: 0 1rem;\r\n }\r\n\r\n .menu-left {\r\n padding-left: 1rem;\r\n }\r\n\r\n .menu-toolbar {\r\n padding-right: 1rem;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -7,6 +7,12 @@ export interface NavItem {
|
|
|
7
7
|
target?: string;
|
|
8
8
|
rel?: string;
|
|
9
9
|
}
|
|
10
|
+
export interface SearchLink {
|
|
11
|
+
href: string;
|
|
12
|
+
icon: JSXOutput | Component<unknown>;
|
|
13
|
+
reload?: boolean;
|
|
14
|
+
ariaLabel?: string;
|
|
15
|
+
}
|
|
10
16
|
export interface NavigationMenuProps {
|
|
11
17
|
ariaLabel?: string;
|
|
12
18
|
logoComponent?: Component<unknown>;
|
|
@@ -14,6 +20,7 @@ export interface NavigationMenuProps {
|
|
|
14
20
|
locale?: string;
|
|
15
21
|
isLoading?: boolean;
|
|
16
22
|
logoReload?: boolean;
|
|
23
|
+
searchLink?: SearchLink;
|
|
17
24
|
actions?: Array<{
|
|
18
25
|
id: string;
|
|
19
26
|
label?: string;
|