@greghowe79/the-lib 1.3.9 → 1.4.1

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 +1 -1
  2. package/lib/components/navigationmenu/NavigationMenu.qwik.mjs +1 -1
  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
@@ -41,7 +41,7 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
41
41
  ]
42
42
  }),
43
43
  /* @__PURE__ */ jsxRuntime.jsxs("ul", {
44
- class: "menu-list",
44
+ class: `menu-list ${isOpen.value ? "open" : ""}`,
45
45
  children: [
46
46
  listItems?.map((item) => {
47
47
  return /* @__PURE__ */ jsxRuntime.jsx("li", {
package/lib/components/navigationmenu/NavigationMenu.qwik.mjs CHANGED
@@ -39,7 +39,7 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
39
39
  ]
40
40
  }),
41
41
  /* @__PURE__ */ jsxs("ul", {
42
- class: "menu-list",
42
+ class: `menu-list ${isOpen.value ? "open" : ""}`,
43
43
  children: [
44
44
  listItems?.map((item) => {
45
45
  return /* @__PURE__ */ jsx("li", {
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-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\r\n@media (max-width: 949px) {\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 verticale occupa tutta la vh rimanente e animato */\r\n .menu-list {\r\n position: absolute;\r\n top: 100%; /* altezza della nav */\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: flex;\r\n flex-direction: column;\r\n max-height: 0; /* chiuso */\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-in-out;\r\n z-index: 5;\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 100%); /* aperto, tutto lo spazio sotto nav */\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-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\r\n@media (max-width: 949px) {\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 verticale occupa tutta la vh rimanente e animato */\r\n .menu-list {\r\n position: absolute;\r\n top: 100%; /* altezza della nav */\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: flex;\r\n flex-direction: column;\r\n max-height: 0; /* chiuso */\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-in-out;\r\n z-index: 5;\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 100%); /* aperto, tutto lo spazio sotto nav */\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.3.9",
3
+ "version": "1.4.1",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",