@greghowe79/the-lib 2.12.8 → 2.12.9
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,17 +8,7 @@ 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);
|
|
12
11
|
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
|
-
});
|
|
22
12
|
qwik.useOnWindow("resize", qwik.$(() => {
|
|
23
13
|
const menuList = document.querySelector(".menu-list");
|
|
24
14
|
menuList?.classList.add("no-transition");
|
|
@@ -29,7 +19,6 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
29
19
|
qwik.useVisibleTask$(({ track }) => {
|
|
30
20
|
track(() => location.url.pathname);
|
|
31
21
|
isOpen.value = false;
|
|
32
|
-
isClosing.value = false;
|
|
33
22
|
});
|
|
34
23
|
const renderSearchIcon = (icon) => {
|
|
35
24
|
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
@@ -56,7 +45,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
56
45
|
})
|
|
57
46
|
}),
|
|
58
47
|
/* @__PURE__ */ jsxRuntime.jsxs("ul", {
|
|
59
|
-
class: `menu-list ${isOpen.value ?
|
|
48
|
+
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
60
49
|
children: [
|
|
61
50
|
listItems?.map((item) => {
|
|
62
51
|
if (item.target === "_blank") {
|
|
@@ -67,7 +56,6 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
67
56
|
target: item.target,
|
|
68
57
|
rel: item.rel,
|
|
69
58
|
class: "menu-link",
|
|
70
|
-
onClick$: closeMenu,
|
|
71
59
|
children: item.label
|
|
72
60
|
})
|
|
73
61
|
}, item.label);
|
|
@@ -78,7 +66,6 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
78
66
|
children: /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
79
67
|
href: item.href,
|
|
80
68
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
81
|
-
onClick$: closeMenu,
|
|
82
69
|
children: item.label
|
|
83
70
|
})
|
|
84
71
|
}, item.label);
|
|
@@ -88,7 +75,6 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
88
75
|
children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
89
76
|
href: item.href,
|
|
90
77
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
91
|
-
onClick$: closeMenu,
|
|
92
78
|
children: item.label
|
|
93
79
|
})
|
|
94
80
|
}, item.label);
|
|
@@ -123,13 +109,11 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
123
109
|
href: searchLink.href,
|
|
124
110
|
class: "search-link",
|
|
125
111
|
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
126
|
-
onClick$: closeMenu,
|
|
127
112
|
children: renderSearchIcon(searchLink.icon)
|
|
128
113
|
}) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
129
114
|
href: searchLink.href,
|
|
130
115
|
class: "search-link",
|
|
131
116
|
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
132
|
-
onClick$: closeMenu,
|
|
133
117
|
children: renderSearchIcon(searchLink.icon)
|
|
134
118
|
})),
|
|
135
119
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
@@ -1,22 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
-
import { component$, useSignal, useStyles$,
|
|
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);
|
|
10
9
|
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
|
-
});
|
|
20
10
|
useOnWindow("resize", $(() => {
|
|
21
11
|
const menuList = document.querySelector(".menu-list");
|
|
22
12
|
menuList?.classList.add("no-transition");
|
|
@@ -27,7 +17,6 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
27
17
|
useVisibleTask$(({ track }) => {
|
|
28
18
|
track(() => location.url.pathname);
|
|
29
19
|
isOpen.value = false;
|
|
30
|
-
isClosing.value = false;
|
|
31
20
|
});
|
|
32
21
|
const renderSearchIcon = (icon) => {
|
|
33
22
|
return typeof icon === "function" ? icon({}, null, 0) : icon;
|
|
@@ -54,7 +43,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
54
43
|
})
|
|
55
44
|
}),
|
|
56
45
|
/* @__PURE__ */ jsxs("ul", {
|
|
57
|
-
class: `menu-list ${isOpen.value ?
|
|
46
|
+
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
58
47
|
children: [
|
|
59
48
|
listItems?.map((item) => {
|
|
60
49
|
if (item.target === "_blank") {
|
|
@@ -65,7 +54,6 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
65
54
|
target: item.target,
|
|
66
55
|
rel: item.rel,
|
|
67
56
|
class: "menu-link",
|
|
68
|
-
onClick$: closeMenu,
|
|
69
57
|
children: item.label
|
|
70
58
|
})
|
|
71
59
|
}, item.label);
|
|
@@ -76,7 +64,6 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
76
64
|
children: /* @__PURE__ */ jsx("a", {
|
|
77
65
|
href: item.href,
|
|
78
66
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
79
|
-
onClick$: closeMenu,
|
|
80
67
|
children: item.label
|
|
81
68
|
})
|
|
82
69
|
}, item.label);
|
|
@@ -86,7 +73,6 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
86
73
|
children: /* @__PURE__ */ jsx(Link, {
|
|
87
74
|
href: item.href,
|
|
88
75
|
class: location.url.pathname === item.href ? "active" : "menu-link",
|
|
89
|
-
onClick$: closeMenu,
|
|
90
76
|
children: item.label
|
|
91
77
|
})
|
|
92
78
|
}, item.label);
|
|
@@ -121,13 +107,11 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
121
107
|
href: searchLink.href,
|
|
122
108
|
class: "search-link",
|
|
123
109
|
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
124
|
-
onClick$: closeMenu,
|
|
125
110
|
children: renderSearchIcon(searchLink.icon)
|
|
126
111
|
}) : /* @__PURE__ */ jsx(Link, {
|
|
127
112
|
href: searchLink.href,
|
|
128
113
|
class: "search-link",
|
|
129
114
|
"aria-label": searchLink.ariaLabel ?? "Search",
|
|
130
|
-
onClick$: closeMenu,
|
|
131
115
|
children: renderSearchIcon(searchLink.icon)
|
|
132
116
|
})),
|
|
133
117
|
/* @__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 .
|
|
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";
|
|
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 .
|
|
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";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|