@greghowe79/the-lib 1.4.8 → 1.5.0

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 -77
  2. package/lib/components/navigationmenu/NavigationMenu.qwik.mjs +79 -77
  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,87 +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
- class: `menu-toggle ${isOpen.value ? "open" : ""}`,
33
- children: [
34
- /* @__PURE__ */ jsxRuntime.jsx("span", {
35
- class: "bar"
36
- }),
37
- /* @__PURE__ */ jsxRuntime.jsx("span", {
38
- class: "bar"
39
- }),
40
- /* @__PURE__ */ jsxRuntime.jsx("span", {
41
- class: "bar"
42
- })
43
- ]
44
- }),
45
- /* @__PURE__ */ jsxRuntime.jsxs("ul", {
46
- class: `menu-list ${isOpen.value ? "open" : ""}`,
47
- children: [
48
- listItems?.map((item) => {
49
- return /* @__PURE__ */ jsxRuntime.jsx("li", {
50
- children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
51
- href: item.href,
52
- class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
53
- onClick$: () => isOpen.value = false,
54
- 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);
55
74
  })
56
- }, item.label);
57
- }),
58
- actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("li", {
59
- class: "mobile-only",
60
- children: actions.map((action) => {
61
- const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
62
- return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
63
- id,
64
- label: label ?? "",
65
- onClick$: () => {
66
- isOpen.value = false;
67
- onClick$?.();
68
- },
69
- icon,
70
- variant,
71
- ariaLabel: ariaLabel2
72
- }, id);
73
75
  })
74
- })
75
- ]
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);
76
91
  })
77
- ]
78
- }),
79
- /* @__PURE__ */ jsxRuntime.jsx("div", {
80
- class: "menu-right desktop-only",
81
- children: actions?.map((action) => {
82
- return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
83
- id: action.id,
84
- label: action.label ?? "",
85
- onClick$: action.onClick$,
86
- icon: action.icon,
87
- variant: action.variant,
88
- ariaLabel: action.ariaLabel
89
- }, action.id);
90
92
  })
91
- })
92
- ]
93
+ ]
94
+ })
93
95
  })
94
- });
96
+ );
95
97
  });
96
98
  exports.NavigationMenu = NavigationMenu;
package/lib/components/navigationmenu/NavigationMenu.qwik.mjs CHANGED
@@ -8,88 +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
- class: `menu-toggle ${isOpen.value ? "open" : ""}`,
31
- children: [
32
- /* @__PURE__ */ jsx("span", {
33
- class: "bar"
34
- }),
35
- /* @__PURE__ */ jsx("span", {
36
- class: "bar"
37
- }),
38
- /* @__PURE__ */ jsx("span", {
39
- class: "bar"
40
- })
41
- ]
42
- }),
43
- /* @__PURE__ */ jsxs("ul", {
44
- class: `menu-list ${isOpen.value ? "open" : ""}`,
45
- children: [
46
- listItems?.map((item) => {
47
- return /* @__PURE__ */ jsx("li", {
48
- children: /* @__PURE__ */ jsx(Link, {
49
- href: item.href,
50
- class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
51
- onClick$: () => isOpen.value = false,
52
- 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);
53
72
  })
54
- }, item.label);
55
- }),
56
- actions && actions.length > 0 && /* @__PURE__ */ jsx("li", {
57
- class: "mobile-only",
58
- children: actions.map((action) => {
59
- const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
60
- return /* @__PURE__ */ jsx(Button, {
61
- id,
62
- label: label ?? "",
63
- onClick$: () => {
64
- isOpen.value = false;
65
- onClick$?.();
66
- },
67
- icon,
68
- variant,
69
- ariaLabel: ariaLabel2
70
- }, id);
71
73
  })
72
- })
73
- ]
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);
74
89
  })
75
- ]
76
- }),
77
- /* @__PURE__ */ jsx("div", {
78
- class: "menu-right desktop-only",
79
- children: actions?.map((action) => {
80
- return /* @__PURE__ */ jsx(Button, {
81
- id: action.id,
82
- label: action.label ?? "",
83
- onClick$: action.onClick$,
84
- icon: action.icon,
85
- variant: action.variant,
86
- ariaLabel: action.ariaLabel
87
- }, action.id);
88
90
  })
89
- })
90
- ]
91
+ ]
92
+ })
91
93
  })
92
- });
94
+ );
93
95
  });
94
96
  export {
95
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 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
+ 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 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 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";
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 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.8",
3
+ "version": "1.5.0",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",