@greghowe79/the-lib 1.4.7 → 1.4.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.
Files changed (5) hide show
  1. package/lib/components/navigationmenu/NavigationMenu.qwik.cjs +79 -76
  2. package/lib/components/navigationmenu/NavigationMenu.qwik.mjs +79 -76
  3. package/lib/components/navigationmenu/styles.css.qwik.cjs +1 -1
  4. package/lib/components/navigationmenu/styles.css.qwik.mjs +1 -1
  5. package/package.json +1 -1
package/lib/components/navigationmenu/NavigationMenu.qwik.cjs CHANGED
@@ -10,86 +10,89 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
10
10
  const location = qwikCity.useLocation();
11
11
  const isOpen = qwik.useSignal(false);
12
12
  qwik.useStyles$(styles);
13
- return /* @__PURE__ */ jsxRuntime.jsx("nav", {
14
- class: "menu",
15
- "aria-label": ariaLabel,
16
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
17
- class: "menu-container",
18
- children: [
19
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
20
- class: "menu-left",
21
- children: [
22
- /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
23
- href: `/${locale}`,
24
- "aria-label": "Homepage",
25
- onClick$: () => isOpen.value = false,
26
- children: logoComponent && logoComponent({}, null, 0)
27
- }),
28
- /* @__PURE__ */ jsxRuntime.jsxs("button", {
29
- class: "menu-toggle",
30
- "aria-label": "Toggle menu",
31
- onClick$: () => isOpen.value = !isOpen.value,
32
- children: [
33
- /* @__PURE__ */ jsxRuntime.jsx("span", {
34
- class: "bar"
35
- }),
36
- /* @__PURE__ */ jsxRuntime.jsx("span", {
37
- class: "bar"
38
- }),
39
- /* @__PURE__ */ jsxRuntime.jsx("span", {
40
- class: "bar"
41
- })
42
- ]
43
- }),
44
- /* @__PURE__ */ jsxRuntime.jsxs("ul", {
45
- class: `menu-list ${isOpen.value ? "open" : ""}`,
46
- children: [
47
- listItems?.map((item) => {
48
- return /* @__PURE__ */ jsxRuntime.jsx("li", {
49
- children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
50
- href: item.href,
51
- class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
52
- onClick$: () => isOpen.value = false,
53
- children: item.label
13
+ return (
14
+ // <nav class="menu" aria-label={ariaLabel}>
15
+ /* @__PURE__ */ jsxRuntime.jsx("nav", {
16
+ class: `menu ${isOpen.value ? "open" : ""}`,
17
+ "aria-label": ariaLabel,
18
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
19
+ class: "menu-container",
20
+ children: [
21
+ /* @__PURE__ */ jsxRuntime.jsxs("div", {
22
+ class: "menu-left",
23
+ children: [
24
+ /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
25
+ href: `/${locale}`,
26
+ "aria-label": "Homepage",
27
+ onClick$: () => isOpen.value = false,
28
+ children: logoComponent && logoComponent({}, null, 0)
29
+ }),
30
+ /* @__PURE__ */ jsxRuntime.jsxs("button", {
31
+ "aria-label": "Toggle menu",
32
+ onClick$: () => isOpen.value = !isOpen.value,
33
+ class: `menu-toggle ${isOpen.value ? "open" : ""}`,
34
+ children: [
35
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
36
+ class: "bar"
37
+ }),
38
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
39
+ class: "bar"
40
+ }),
41
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
42
+ class: "bar"
43
+ })
44
+ ]
45
+ }),
46
+ /* @__PURE__ */ jsxRuntime.jsxs("ul", {
47
+ class: `menu-list ${isOpen.value ? "open" : ""}`,
48
+ children: [
49
+ listItems?.map((item) => {
50
+ return /* @__PURE__ */ jsxRuntime.jsx("li", {
51
+ children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
52
+ href: item.href,
53
+ class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
54
+ onClick$: () => isOpen.value = false,
55
+ children: item.label
56
+ })
57
+ }, item.label);
58
+ }),
59
+ actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("li", {
60
+ class: "mobile-only",
61
+ children: actions.map((action) => {
62
+ const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
63
+ return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
64
+ id,
65
+ label: label ?? "",
66
+ onClick$: () => {
67
+ isOpen.value = false;
68
+ onClick$?.();
69
+ },
70
+ icon,
71
+ variant,
72
+ ariaLabel: ariaLabel2
73
+ }, id);
54
74
  })
55
- }, item.label);
56
- }),
57
- actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("li", {
58
- class: "mobile-only",
59
- children: actions.map((action) => {
60
- const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
61
- return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
62
- id,
63
- label: label ?? "",
64
- onClick$: () => {
65
- isOpen.value = false;
66
- onClick$?.();
67
- },
68
- icon,
69
- variant,
70
- ariaLabel: ariaLabel2
71
- }, id);
72
75
  })
73
- })
74
- ]
76
+ ]
77
+ })
78
+ ]
79
+ }),
80
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
81
+ class: "menu-right desktop-only",
82
+ children: actions?.map((action) => {
83
+ return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
84
+ id: action.id,
85
+ label: action.label ?? "",
86
+ onClick$: action.onClick$,
87
+ icon: action.icon,
88
+ variant: action.variant,
89
+ ariaLabel: action.ariaLabel
90
+ }, action.id);
75
91
  })
76
- ]
77
- }),
78
- /* @__PURE__ */ jsxRuntime.jsx("div", {
79
- class: "menu-right desktop-only",
80
- children: actions?.map((action) => {
81
- return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
82
- id: action.id,
83
- label: action.label ?? "",
84
- onClick$: action.onClick$,
85
- icon: action.icon,
86
- variant: action.variant,
87
- ariaLabel: action.ariaLabel
88
- }, action.id);
89
92
  })
90
- })
91
- ]
93
+ ]
94
+ })
92
95
  })
93
- });
96
+ );
94
97
  });
95
98
  exports.NavigationMenu = NavigationMenu;
package/lib/components/navigationmenu/NavigationMenu.qwik.mjs CHANGED
@@ -8,87 +8,90 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
8
8
  const location = useLocation();
9
9
  const isOpen = useSignal(false);
10
10
  useStyles$(styles);
11
- return /* @__PURE__ */ jsx("nav", {
12
- class: "menu",
13
- "aria-label": ariaLabel,
14
- children: /* @__PURE__ */ jsxs("div", {
15
- class: "menu-container",
16
- children: [
17
- /* @__PURE__ */ jsxs("div", {
18
- class: "menu-left",
19
- children: [
20
- /* @__PURE__ */ jsx(Link, {
21
- href: `/${locale}`,
22
- "aria-label": "Homepage",
23
- onClick$: () => isOpen.value = false,
24
- children: logoComponent && logoComponent({}, null, 0)
25
- }),
26
- /* @__PURE__ */ jsxs("button", {
27
- class: "menu-toggle",
28
- "aria-label": "Toggle menu",
29
- onClick$: () => isOpen.value = !isOpen.value,
30
- children: [
31
- /* @__PURE__ */ jsx("span", {
32
- class: "bar"
33
- }),
34
- /* @__PURE__ */ jsx("span", {
35
- class: "bar"
36
- }),
37
- /* @__PURE__ */ jsx("span", {
38
- class: "bar"
39
- })
40
- ]
41
- }),
42
- /* @__PURE__ */ jsxs("ul", {
43
- class: `menu-list ${isOpen.value ? "open" : ""}`,
44
- children: [
45
- listItems?.map((item) => {
46
- return /* @__PURE__ */ jsx("li", {
47
- children: /* @__PURE__ */ jsx(Link, {
48
- href: item.href,
49
- class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
50
- onClick$: () => isOpen.value = false,
51
- children: item.label
11
+ return (
12
+ // <nav class="menu" aria-label={ariaLabel}>
13
+ /* @__PURE__ */ jsx("nav", {
14
+ class: `menu ${isOpen.value ? "open" : ""}`,
15
+ "aria-label": ariaLabel,
16
+ children: /* @__PURE__ */ jsxs("div", {
17
+ class: "menu-container",
18
+ children: [
19
+ /* @__PURE__ */ jsxs("div", {
20
+ class: "menu-left",
21
+ children: [
22
+ /* @__PURE__ */ jsx(Link, {
23
+ href: `/${locale}`,
24
+ "aria-label": "Homepage",
25
+ onClick$: () => isOpen.value = false,
26
+ children: logoComponent && logoComponent({}, null, 0)
27
+ }),
28
+ /* @__PURE__ */ jsxs("button", {
29
+ "aria-label": "Toggle menu",
30
+ onClick$: () => isOpen.value = !isOpen.value,
31
+ class: `menu-toggle ${isOpen.value ? "open" : ""}`,
32
+ children: [
33
+ /* @__PURE__ */ jsx("span", {
34
+ class: "bar"
35
+ }),
36
+ /* @__PURE__ */ jsx("span", {
37
+ class: "bar"
38
+ }),
39
+ /* @__PURE__ */ jsx("span", {
40
+ class: "bar"
41
+ })
42
+ ]
43
+ }),
44
+ /* @__PURE__ */ jsxs("ul", {
45
+ class: `menu-list ${isOpen.value ? "open" : ""}`,
46
+ children: [
47
+ listItems?.map((item) => {
48
+ return /* @__PURE__ */ jsx("li", {
49
+ children: /* @__PURE__ */ jsx(Link, {
50
+ href: item.href,
51
+ class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
52
+ onClick$: () => isOpen.value = false,
53
+ children: item.label
54
+ })
55
+ }, item.label);
56
+ }),
57
+ actions && actions.length > 0 && /* @__PURE__ */ jsx("li", {
58
+ class: "mobile-only",
59
+ children: actions.map((action) => {
60
+ const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
61
+ return /* @__PURE__ */ jsx(Button, {
62
+ id,
63
+ label: label ?? "",
64
+ onClick$: () => {
65
+ isOpen.value = false;
66
+ onClick$?.();
67
+ },
68
+ icon,
69
+ variant,
70
+ ariaLabel: ariaLabel2
71
+ }, id);
52
72
  })
53
- }, item.label);
54
- }),
55
- actions && actions.length > 0 && /* @__PURE__ */ jsx("li", {
56
- class: "mobile-only",
57
- children: actions.map((action) => {
58
- const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
59
- return /* @__PURE__ */ jsx(Button, {
60
- id,
61
- label: label ?? "",
62
- onClick$: () => {
63
- isOpen.value = false;
64
- onClick$?.();
65
- },
66
- icon,
67
- variant,
68
- ariaLabel: ariaLabel2
69
- }, id);
70
73
  })
71
- })
72
- ]
74
+ ]
75
+ })
76
+ ]
77
+ }),
78
+ /* @__PURE__ */ jsx("div", {
79
+ class: "menu-right desktop-only",
80
+ children: actions?.map((action) => {
81
+ return /* @__PURE__ */ jsx(Button, {
82
+ id: action.id,
83
+ label: action.label ?? "",
84
+ onClick$: action.onClick$,
85
+ icon: action.icon,
86
+ variant: action.variant,
87
+ ariaLabel: action.ariaLabel
88
+ }, action.id);
73
89
  })
74
- ]
75
- }),
76
- /* @__PURE__ */ jsx("div", {
77
- class: "menu-right desktop-only",
78
- children: actions?.map((action) => {
79
- return /* @__PURE__ */ jsx(Button, {
80
- id: action.id,
81
- label: action.label ?? "",
82
- onClick$: action.onClick$,
83
- icon: action.icon,
84
- variant: action.variant,
85
- ariaLabel: action.ariaLabel
86
- }, action.id);
87
90
  })
88
- })
89
- ]
91
+ ]
92
+ })
90
93
  })
91
- });
94
+ );
92
95
  });
93
96
  export {
94
97
  NavigationMenu
package/lib/components/navigationmenu/styles.css.qwik.cjs CHANGED
@@ -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}\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}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\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/* 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;\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 }\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}\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-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}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\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/* 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.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 }\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;
package/lib/components/navigationmenu/styles.css.qwik.mjs CHANGED
@@ -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}\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}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\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/* 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;\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 }\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}\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-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}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\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/* 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.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 }\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
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "1.4.7",
3
+ "version": "1.4.9",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",