@greghowe79/the-lib 2.11.9 → 2.12.1

package/lib/components/card/card.qwik.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const styles = require("./styles.css.qwik.cjs");
 const qwikCity = require("@builder.io/qwik-city");
-const Card = qwik.component$(({ item, icon, subtitle, link, path, disabled }) => {
+const Card = qwik.component$(({ item, icon, subtitle, link, path, disabled, reload }) => {
   qwik.useStyles$(styles);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "card",
@@ -67,7 +67,13 @@ const Card = qwik.component$(({ item, icon, subtitle, link, path, disabled }) =>
                   class: "card-icon",
                   children: typeof icon === "function" ? icon({}, null, 0) : icon
                 }),
-                /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
+                reload === true ? /* @__PURE__ */ jsxRuntime.jsx("a", {
+                  href: path,
+                  class: disabled ? "link_disabled" : "go-to-profile",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    children: link
+                  })
+                }) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
                   href: path,
                   class: disabled ? "link_disabled" : "go-to-profile",
                   children: /* @__PURE__ */ jsxRuntime.jsx("div", {

package/lib/components/card/card.qwik.mjs

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useStyles$ } from "@builder.io/qwik";
 import styles from "./styles.css.qwik.mjs";
 import { Link } from "@builder.io/qwik-city";
-const Card = component$(({ item, icon, subtitle, link, path, disabled }) => {
+const Card = component$(({ item, icon, subtitle, link, path, disabled, reload }) => {
   useStyles$(styles);
   return /* @__PURE__ */ jsxs("div", {
     class: "card",
@@ -65,7 +65,13 @@ const Card = component$(({ item, icon, subtitle, link, path, disabled }) => {
                   class: "card-icon",
                   children: typeof icon === "function" ? icon({}, null, 0) : icon
                 }),
-                /* @__PURE__ */ jsx(Link, {
+                reload === true ? /* @__PURE__ */ jsx("a", {
+                  href: path,
+                  class: disabled ? "link_disabled" : "go-to-profile",
+                  children: /* @__PURE__ */ jsx("div", {
+                    children: link
+                  })
+                }) : /* @__PURE__ */ jsx(Link, {
                   href: path,
                   class: disabled ? "link_disabled" : "go-to-profile",
                   children: /* @__PURE__ */ jsx("div", {

package/lib/components/navigationmenu/NavigationMenu.qwik.cjs

@@ -5,7 +5,7 @@ const qwik = require("@builder.io/qwik");
 const qwikCity = require("@builder.io/qwik-city");
 const styles = require("./styles.css.qwik.cjs");
 const button = require("../button/button.qwik.cjs");
-const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload }) => {
+const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload, searchLink }) => {
   const location = qwikCity.useLocation();
   const isOpen = qwik.useSignal(false);
   qwik.useStyles$(styles);
@@ -20,6 +20,9 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
     track(() => location.url.pathname);
     isOpen.value = false;
   });
+  const renderSearchIcon = (icon) => {
+    return typeof icon === "function" ? icon({}, null, 0) : icon;
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("nav", {
     class: `menu ${isOpen.value ? "open" : ""}`,
     "aria-label": ariaLabel,
@@ -29,30 +32,17 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
         /* @__PURE__ */ jsxRuntime.jsxs("div", {
           class: "menu-left",
           children: [
-            logoReload ? /* @__PURE__ */ jsxRuntime.jsx("a", {
-              href: `/${locale}`,
-              "aria-label": "Homepage",
-              children: logoComponent && logoComponent({}, null, 0)
-            }) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
-              href: `/${locale}`,
-              "aria-label": "Homepage",
-              children: logoComponent && logoComponent({}, null, 0)
-            }),
-            /* @__PURE__ */ jsxRuntime.jsxs("button", {
-              "aria-label": "Toggle menu",
-              onClick$: () => isOpen.value = !isOpen.value,
-              class: `menu-toggle ${isOpen.value ? "open" : ""}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", {
-                  class: "bar"
-                }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", {
-                  class: "bar"
-                }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", {
-                  class: "bar"
-                })
-              ]
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "menu-logo",
+              children: logoReload ? /* @__PURE__ */ jsxRuntime.jsx("a", {
+                href: `/${locale}`,
+                "aria-label": "Homepage",
+                children: logoComponent && logoComponent({}, null, 0)
+              }) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
+                href: `/${locale}`,
+                "aria-label": "Homepage",
+                children: logoComponent && logoComponent({}, null, 0)
+              })
             }),
             /* @__PURE__ */ jsxRuntime.jsxs("ul", {
               class: `menu-list ${isOpen.value ? "open" : ""}`,
@@ -93,10 +83,6 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
                     return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
                       id,
                       label: label ?? "",
-                      // onClick$={() => {
-                      //   isOpen.value = false;
-                      //   onClick$?.();
-                      // }}
                       onClick$: () => {
                         onClick$?.();
                       },
@@ -113,21 +99,53 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
             })
           ]
         }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: "menu-right desktop-only",
-          children: actions?.map((action) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
-              id: action.id,
-              label: action.label ?? "",
-              onClick$: action.onClick$,
-              icon: action.icon,
-              variant: action.variant,
-              ariaLabel: action.ariaLabel,
-              customColors: action.customColors,
-              isLoading: isLoading && !!action.label,
-              disabled: isLoading
-            }, action.id);
-          })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "menu-toolbar",
+          children: [
+            searchLink && (searchLink.reload ? /* @__PURE__ */ jsxRuntime.jsx("a", {
+              href: searchLink.href,
+              class: "search-link",
+              "aria-label": searchLink.ariaLabel ?? "Search",
+              children: renderSearchIcon(searchLink.icon)
+            }) : /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
+              href: searchLink.href,
+              class: "search-link",
+              "aria-label": searchLink.ariaLabel ?? "Search",
+              children: renderSearchIcon(searchLink.icon)
+            })),
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "desktop-only",
+              children: actions?.map((action) => {
+                return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
+                  id: action.id,
+                  label: action.label ?? "",
+                  onClick$: action.onClick$,
+                  icon: action.icon,
+                  variant: action.variant,
+                  ariaLabel: action.ariaLabel,
+                  customColors: action.customColors,
+                  isLoading: isLoading && !!action.label,
+                  disabled: isLoading
+                }, action.id);
+              })
+            }),
+            /* @__PURE__ */ jsxRuntime.jsxs("button", {
+              "aria-label": "Toggle menu",
+              onClick$: () => isOpen.value = !isOpen.value,
+              class: `menu-toggle ${isOpen.value ? "open" : ""}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", {
+                  class: "bar"
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", {
+                  class: "bar"
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", {
+                  class: "bar"
+                })
+              ]
+            })
+          ]
         })
       ]
     })

package/lib/components/navigationmenu/NavigationMenu.qwik.mjs

@@ -3,7 +3,7 @@ import { component$, useSignal, useStyles$, useOnWindow, $, useVisibleTask$ } fr
 import { useLocation, Link } from "@builder.io/qwik-city";
 import styles from "./styles.css.qwik.mjs";
 import { Button } from "../button/button.qwik.mjs";
-const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload }) => {
+const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, actions, locale, isLoading, logoReload, searchLink }) => {
   const location = useLocation();
   const isOpen = useSignal(false);
   useStyles$(styles);
@@ -18,6 +18,9 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
     track(() => location.url.pathname);
     isOpen.value = false;
   });
+  const renderSearchIcon = (icon) => {
+    return typeof icon === "function" ? icon({}, null, 0) : icon;
+  };
   return /* @__PURE__ */ jsx("nav", {
     class: `menu ${isOpen.value ? "open" : ""}`,
     "aria-label": ariaLabel,
@@ -27,30 +30,17 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
         /* @__PURE__ */ jsxs("div", {
           class: "menu-left",
           children: [
-            logoReload ? /* @__PURE__ */ jsx("a", {
-              href: `/${locale}`,
-              "aria-label": "Homepage",
-              children: logoComponent && logoComponent({}, null, 0)
-            }) : /* @__PURE__ */ jsx(Link, {
-              href: `/${locale}`,
-              "aria-label": "Homepage",
-              children: logoComponent && logoComponent({}, null, 0)
-            }),
-            /* @__PURE__ */ jsxs("button", {
-              "aria-label": "Toggle menu",
-              onClick$: () => isOpen.value = !isOpen.value,
-              class: `menu-toggle ${isOpen.value ? "open" : ""}`,
-              children: [
-                /* @__PURE__ */ jsx("span", {
-                  class: "bar"
-                }),
-                /* @__PURE__ */ jsx("span", {
-                  class: "bar"
-                }),
-                /* @__PURE__ */ jsx("span", {
-                  class: "bar"
-                })
-              ]
+            /* @__PURE__ */ jsx("div", {
+              class: "menu-logo",
+              children: logoReload ? /* @__PURE__ */ jsx("a", {
+                href: `/${locale}`,
+                "aria-label": "Homepage",
+                children: logoComponent && logoComponent({}, null, 0)
+              }) : /* @__PURE__ */ jsx(Link, {
+                href: `/${locale}`,
+                "aria-label": "Homepage",
+                children: logoComponent && logoComponent({}, null, 0)
+              })
             }),
             /* @__PURE__ */ jsxs("ul", {
               class: `menu-list ${isOpen.value ? "open" : ""}`,
@@ -91,10 +81,6 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
                     return /* @__PURE__ */ jsx(Button, {
                       id,
                       label: label ?? "",
-                      // onClick$={() => {
-                      //   isOpen.value = false;
-                      //   onClick$?.();
-                      // }}
                       onClick$: () => {
                         onClick$?.();
                       },
@@ -111,21 +97,53 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
             })
           ]
         }),
-        /* @__PURE__ */ jsx("div", {
-          class: "menu-right desktop-only",
-          children: actions?.map((action) => {
-            return /* @__PURE__ */ jsx(Button, {
-              id: action.id,
-              label: action.label ?? "",
-              onClick$: action.onClick$,
-              icon: action.icon,
-              variant: action.variant,
-              ariaLabel: action.ariaLabel,
-              customColors: action.customColors,
-              isLoading: isLoading && !!action.label,
-              disabled: isLoading
-            }, action.id);
-          })
+        /* @__PURE__ */ jsxs("div", {
+          class: "menu-toolbar",
+          children: [
+            searchLink && (searchLink.reload ? /* @__PURE__ */ jsx("a", {
+              href: searchLink.href,
+              class: "search-link",
+              "aria-label": searchLink.ariaLabel ?? "Search",
+              children: renderSearchIcon(searchLink.icon)
+            }) : /* @__PURE__ */ jsx(Link, {
+              href: searchLink.href,
+              class: "search-link",
+              "aria-label": searchLink.ariaLabel ?? "Search",
+              children: renderSearchIcon(searchLink.icon)
+            })),
+            /* @__PURE__ */ jsx("div", {
+              class: "desktop-only",
+              children: actions?.map((action) => {
+                return /* @__PURE__ */ jsx(Button, {
+                  id: action.id,
+                  label: action.label ?? "",
+                  onClick$: action.onClick$,
+                  icon: action.icon,
+                  variant: action.variant,
+                  ariaLabel: action.ariaLabel,
+                  customColors: action.customColors,
+                  isLoading: isLoading && !!action.label,
+                  disabled: isLoading
+                }, action.id);
+              })
+            }),
+            /* @__PURE__ */ jsxs("button", {
+              "aria-label": "Toggle menu",
+              onClick$: () => isOpen.value = !isOpen.value,
+              class: `menu-toggle ${isOpen.value ? "open" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("span", {
+                  class: "bar"
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  class: "bar"
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  class: "bar"
+                })
+              ]
+            })
+          ]
         })
       ]
     })

package/lib/components/navigationmenu/styles.css.qwik.cjs

@@ -1,3 +1,3 @@
 "use strict";
-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/* 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    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";
+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 link ── */\r\n.search-link {\r\n  display: flex;\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: 4px;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n  background-color: #f0f0f0;\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  .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";
 module.exports = styles;

package/lib/components/navigationmenu/styles.css.qwik.mjs

@@ -1,4 +1,4 @@
-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/* 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    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";
+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 link ── */\r\n.search-link {\r\n  display: flex;\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: 4px;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.search-link:hover {\r\n  background-color: #f0f0f0;\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  .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";
 export {
   styles as default
 };

package/lib-types/components/card/card.d.ts

@@ -34,6 +34,7 @@ export interface CardProps {
     link: string;
     path: string;
     disabled?: boolean;
+    reload?: boolean;
 }
 export declare const Card: Component<CardProps>;
 export {};

package/lib-types/components/navigationmenu/NavigationMenu.d.ts

@@ -7,6 +7,12 @@ export interface NavItem {
     target?: string;
     rel?: string;
 }
+export interface SearchLink {
+    href: string;
+    icon: JSXOutput | Component<unknown>;
+    reload?: boolean;
+    ariaLabel?: string;
+}
 export interface NavigationMenuProps {
     ariaLabel?: string;
     logoComponent?: Component<unknown>;
@@ -14,6 +20,7 @@ export interface NavigationMenuProps {
     locale?: string;
     isLoading?: boolean;
     logoReload?: boolean;
+    searchLink?: SearchLink;
     actions?: Array<{
         id: string;
         label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "2.11.9",
+  "version": "2.12.1",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",