@greghowe79/the-lib 2.12.6 → 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.
|
@@ -8,7 +8,17 @@ const button = require("../button/button.qwik.cjs");
|
|
|
8
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
|
+
const isClosing = qwik.useSignal(false);
|
|
11
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
|
+
});
|
|
12
22
|
qwik.useOnWindow("resize", qwik.$(() => {
|
|
13
23
|
const menuList = document.querySelector(".menu-list");
|
|
14
24
|
menuList?.classList.add("no-transition");
|
|
@@ -18,15 +28,8 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
18
28
|
}));
|
|
19
29
|
qwik.useVisibleTask$(({ track }) => {
|
|
20
30
|
track(() => location.url.pathname);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
menuList?.classList.remove("open");
|
|
24
|
-
setTimeout(() => {
|
|
25
|
-
isOpen.value = false;
|
|
26
|
-
}, 400);
|
|
27
|
-
} else {
|
|
28
|
-
isOpen.value = false;
|
|
29
|
-
}
|
|
31
|
+
isOpen.value = false;
|
|
32
|
+
isClosing.value = false;
|
|
30
33
|
});
|
|
31
34
|
const renderSearchIcon = (icon) => {
|
|
32
35
|
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
@@ -53,7 +56,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
53
56
|
})
|
|
54
57
|
}),
|
|
55
58
|
/* @__PURE__ */ jsxRuntime.jsxs("ul", {
|
|
56
|
-
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
59
|
+
class: `menu-list ${isOpen.value ? isClosing.value ? "closing" : "open" : ""}`,
|
|
57
60
|
children: [
|
|
58
61
|
listItems?.map((item) => {
|
|
59
62
|
if (item.target === "_blank") {
|
|
@@ -64,6 +67,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
64
67
|
target: item.target,
|
|
65
68
|
rel: item.rel,
|
|
66
69
|
class: "menu-link",
|
|
70
|
+
onClick$: closeMenu,
|
|
67
71
|
children: item.label
|
|
68
72
|
})
|
|
69
73
|
}, item.label);
|
|
@@ -74,6 +78,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
74
78
|
children: /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
75
79
|
href: item.href,
|
|
76
80
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
81
|
+
onClick$: closeMenu,
|
|
77
82
|
children: item.label
|
|
78
83
|
})
|
|
79
84
|
}, item.label);
|
|
@@ -83,6 +88,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
83
88
|
children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
84
89
|
href: item.href,
|
|
85
90
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
91
|
+
onClick$: closeMenu,
|
|
86
92
|
children: item.label
|
|
87
93
|
})
|
|
88
94
|
}, item.label);
|
|
@@ -116,12 +122,14 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
116
122
|
searchLink && (searchLink.reload ? /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
117
123
|
href: searchLink.href,
|
|
118
124
|
class: "search-link",
|
|
119
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
125
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
126
|
+
onClick$: closeMenu,
|
|
120
127
|
children: renderSearchIcon(searchLink.icon)
|
|
121
128
|
}) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
122
129
|
href: searchLink.href,
|
|
123
130
|
class: "search-link",
|
|
124
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
131
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
132
|
+
onClick$: closeMenu,
|
|
125
133
|
children: renderSearchIcon(searchLink.icon)
|
|
126
134
|
})),
|
|
127
135
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
@@ -1,12 +1,22 @@
|
|
|
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";
|
|
6
6
|
const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload, searchLink }) => {
|
|
7
7
|
const location = useLocation();
|
|
8
8
|
const isOpen = useSignal(false);
|
|
9
|
+
const isClosing = useSignal(false);
|
|
9
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
|
+
});
|
|
10
20
|
useOnWindow("resize", $(() => {
|
|
11
21
|
const menuList = document.querySelector(".menu-list");
|
|
12
22
|
menuList?.classList.add("no-transition");
|
|
@@ -16,15 +26,8 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
16
26
|
}));
|
|
17
27
|
useVisibleTask$(({ track }) => {
|
|
18
28
|
track(() => location.url.pathname);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
menuList?.classList.remove("open");
|
|
22
|
-
setTimeout(() => {
|
|
23
|
-
isOpen.value = false;
|
|
24
|
-
}, 400);
|
|
25
|
-
} else {
|
|
26
|
-
isOpen.value = false;
|
|
27
|
-
}
|
|
29
|
+
isOpen.value = false;
|
|
30
|
+
isClosing.value = false;
|
|
28
31
|
});
|
|
29
32
|
const renderSearchIcon = (icon) => {
|
|
30
33
|
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
@@ -51,7 +54,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
51
54
|
})
|
|
52
55
|
}),
|
|
53
56
|
/* @__PURE__ */ jsxs("ul", {
|
|
54
|
-
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
57
|
+
class: `menu-list ${isOpen.value ? isClosing.value ? "closing" : "open" : ""}`,
|
|
55
58
|
children: [
|
|
56
59
|
listItems?.map((item) => {
|
|
57
60
|
if (item.target === "_blank") {
|
|
@@ -62,6 +65,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
62
65
|
target: item.target,
|
|
63
66
|
rel: item.rel,
|
|
64
67
|
class: "menu-link",
|
|
68
|
+
onClick$: closeMenu,
|
|
65
69
|
children: item.label
|
|
66
70
|
})
|
|
67
71
|
}, item.label);
|
|
@@ -72,6 +76,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
72
76
|
children: /* @__PURE__ */ jsx("a", {
|
|
73
77
|
href: item.href,
|
|
74
78
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
79
|
+
onClick$: closeMenu,
|
|
75
80
|
children: item.label
|
|
76
81
|
})
|
|
77
82
|
}, item.label);
|
|
@@ -81,6 +86,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
81
86
|
children: /* @__PURE__ */ jsx(Link, {
|
|
82
87
|
href: item.href,
|
|
83
88
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
89
|
+
onClick$: closeMenu,
|
|
84
90
|
children: item.label
|
|
85
91
|
})
|
|
86
92
|
}, item.label);
|
|
@@ -114,12 +120,14 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
114
120
|
searchLink && (searchLink.reload ? /* @__PURE__ */ jsx("a", {
|
|
115
121
|
href: searchLink.href,
|
|
116
122
|
class: "search-link",
|
|
117
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
123
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
124
|
+
onClick$: closeMenu,
|
|
118
125
|
children: renderSearchIcon(searchLink.icon)
|
|
119
126
|
}) : /* @__PURE__ */ jsx(Link, {
|
|
120
127
|
href: searchLink.href,
|
|
121
128
|
class: "search-link",
|
|
122
|
-
"aria-label": searchLink.ariaLabel ?? "Search
|
|
129
|
+
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
130
|
+
onClick$: closeMenu,
|
|
123
131
|
children: renderSearchIcon(searchLink.icon)
|
|
124
132
|
})),
|
|
125
133
|
/* @__PURE__ */ jsx("div", {
|
|
@@ -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.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 ── */\r\n.search-link {\r\n display: none;\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: 2rem;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n background-color: #f5f5f7;\r\n}\r\n\r\n.search-list-item {\r\n display: flex;\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 .search-link {\r\n display: flex;\r\n }\r\n\r\n .search-list-item {\r\n display: none;\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
|
+
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 ── */\r\n.search-link {\r\n display: none;\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: 2rem;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n background-color: #f5f5f7;\r\n}\r\n\r\n.search-list-item {\r\n display: flex;\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 .search-link {\r\n display: flex;\r\n }\r\n\r\n .search-list-item {\r\n display: none;\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 .menu-list.closing {\r\n max-height: 0;\r\n opacity: 0;\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.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 ── */\r\n.search-link {\r\n display: none;\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: 2rem;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n background-color: #f5f5f7;\r\n}\r\n\r\n.search-list-item {\r\n display: flex;\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 .search-link {\r\n display: flex;\r\n }\r\n\r\n .search-list-item {\r\n display: none;\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";
|
|
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 ── */\r\n.search-link {\r\n display: none;\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: 2rem;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n background-color: #f5f5f7;\r\n}\r\n\r\n.search-list-item {\r\n display: flex;\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 .search-link {\r\n display: flex;\r\n }\r\n\r\n .search-list-item {\r\n display: none;\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 .menu-list.closing {\r\n max-height: 0;\r\n opacity: 0;\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
|
};
|