@greghowe79/the-lib 1.4.0 → 1.4.2

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 +15 -8
  2. package/lib/components/navigationmenu/NavigationMenu.qwik.mjs +15 -8
  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
@@ -48,20 +48,27 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
48
48
  children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
49
49
  href: item.href,
50
50
  class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
51
+ onClick$: () => isOpen.value = false,
51
52
  children: item.label
52
53
  })
53
54
  }, item.label);
54
55
  }),
55
56
  actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("li", {
56
57
  class: "mobile-only",
57
- children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
58
- id: action.id,
59
- label: action.label ?? "",
60
- onClick$: action.onClick$,
61
- icon: action.icon,
62
- variant: action.variant,
63
- ariaLabel: action.ariaLabel
64
- }, action.id))
58
+ children: actions.map((action) => {
59
+ const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
60
+ return /* @__PURE__ */ jsxRuntime.jsx(button.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
+ })
65
72
  })
66
73
  ]
67
74
  })
package/lib/components/navigationmenu/NavigationMenu.qwik.mjs CHANGED
@@ -46,20 +46,27 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
46
46
  children: /* @__PURE__ */ jsx(Link, {
47
47
  href: item.href,
48
48
  class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
49
+ onClick$: () => isOpen.value = false,
49
50
  children: item.label
50
51
  })
51
52
  }, item.label);
52
53
  }),
53
54
  actions && actions.length > 0 && /* @__PURE__ */ jsx("li", {
54
55
  class: "mobile-only",
55
- children: actions.map((action) => /* @__PURE__ */ jsx(Button, {
56
- id: action.id,
57
- label: action.label ?? "",
58
- onClick$: action.onClick$,
59
- icon: action.icon,
60
- variant: action.variant,
61
- ariaLabel: action.ariaLabel
62
- }, action.id))
56
+ children: actions.map((action) => {
57
+ const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon } = action;
58
+ return /* @__PURE__ */ jsx(Button, {
59
+ id,
60
+ label: label ?? "",
61
+ onClick$: () => {
62
+ isOpen.value = false;
63
+ onClick$?.();
64
+ },
65
+ icon,
66
+ variant,
67
+ ariaLabel: ariaLabel2
68
+ }, id);
69
+ })
63
70
  })
64
71
  ]
65
72
  })
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-toggle {\r\n display: flex;\r\n }\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n }\r\n .menu-list {\r\n position: absolute;\r\n top: 64px;\r\n left: 0;\r\n right: 0;\r\n background-color: white;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n padding: 1rem;\r\n display: none;\r\n z-index: 5;\r\n }\r\n\r\n .menu-list.open {\r\n display: flex;\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@media (min-width: 950px) {\r\n .menu-toggle {\r\n display: none;\r\n }\r\n\r\n .menu-list {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 1.5rem;\r\n position: static;\r\n background: none;\r\n padding: 0;\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";
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: calc(5.75rem - 2rem);\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 }\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: rgba(255, 255, 255, 0.8);\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem - 2rem);\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-toggle {\r\n display: flex;\r\n }\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n }\r\n .menu-list {\r\n position: absolute;\r\n top: 64px;\r\n left: 0;\r\n right: 0;\r\n background-color: white;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n padding: 1rem;\r\n display: none;\r\n z-index: 5;\r\n }\r\n\r\n .menu-list.open {\r\n display: flex;\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@media (min-width: 950px) {\r\n .menu-toggle {\r\n display: none;\r\n }\r\n\r\n .menu-list {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 1.5rem;\r\n position: static;\r\n background: none;\r\n padding: 0;\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";
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: calc(5.75rem - 2rem);\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 }\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: rgba(255, 255, 255, 0.8);\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem - 2rem);\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.0",
3
+ "version": "1.4.2",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",