@luminescent/ui-qwik 5.0.1-6 → 5.0.1-7

package/lib/index.qwik.cjs

@@ -683,7 +683,7 @@ const Menu = qwik.component$(({ size, ...props }) => {
     ]
   });
 });
-const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
+const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
   const menu = qwik.useSignal(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
     ...props,
@@ -696,28 +696,23 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
     children: [
       !nohamburger && /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: {
-          "absolute top-full flex w-full flex-col items-center px-2 motion-safe:transition-all sm:hidden": true,
+          "absolute top-full lum-card motion-safe:transition-all sm:hidden max-w-7xl gap-2 px-2 py-4": true,
+          "w-[calc(100%-theme(spacing.8))] mx-4": floating,
+          "w-[calc(100%-theme(spacing.4))] mx-2": !floating,
           "mt-2": menu.value,
-          "pointer-events-none opacity-0": !menu.value,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent"),
-          'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lum before:drop-shadow-xl before:content-[""]': true
+          "pointer-events-none opacity-0 -mt-2 scale-95": !menu.value,
+          "backdrop-blur-lg": !noblur,
+          [colorClass]: true
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: {
-            [colorClass]: true,
-            "flex w-full max-w-7xl flex-col gap-2 rounded-lum border px-2 py-4 motion-safe:transition-all": true
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-            name: "mobile"
-          })
+        children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+          name: "mobile"
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: {
           [colorClass]: !floating,
           "!border-x-0 !border-t-0": !floating,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent") && !floating,
-          'before:absolute before:-z-10 before:h-full before:w-full before:drop-shadow-xl before:content-[""]': !floating,
+          "backdrop-blur-lg": !noblur && !floating,
           "relative mx-2 mt-2": floating
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -725,8 +720,7 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
             "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
             [colorClass]: floating,
             "rounded-lum border": floating,
-            "before:backdrop-blur-lg": !colorClass.includes("transparent") && floating,
-            'before:absolute before:-z-10 before:h-full before:w-full before:max-w-7xl before:rounded-lum before:drop-shadow-xl before:content-[""]': floating
+            "backdrop-blur-lg": !noblur && floating
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", {

package/lib/index.qwik.mjs

@@ -681,7 +681,7 @@ const Menu = component$(({ size, ...props }) => {
     ]
   });
 });
-const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
+const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
   const menu = useSignal(false);
   return /* @__PURE__ */ jsxs("nav", {
     ...props,
@@ -694,28 +694,23 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum
     children: [
       !nohamburger && /* @__PURE__ */ jsx("div", {
         class: {
-          "absolute top-full flex w-full flex-col items-center px-2 motion-safe:transition-all sm:hidden": true,
+          "absolute top-full lum-card motion-safe:transition-all sm:hidden max-w-7xl gap-2 px-2 py-4": true,
+          "w-[calc(100%-theme(spacing.8))] mx-4": floating,
+          "w-[calc(100%-theme(spacing.4))] mx-2": !floating,
           "mt-2": menu.value,
-          "pointer-events-none opacity-0": !menu.value,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent"),
-          'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lum before:drop-shadow-xl before:content-[""]': true
+          "pointer-events-none opacity-0 -mt-2 scale-95": !menu.value,
+          "backdrop-blur-lg": !noblur,
+          [colorClass]: true
         },
-        children: /* @__PURE__ */ jsx("div", {
-          class: {
-            [colorClass]: true,
-            "flex w-full max-w-7xl flex-col gap-2 rounded-lum border px-2 py-4 motion-safe:transition-all": true
-          },
-          children: /* @__PURE__ */ jsx(Slot, {
-            name: "mobile"
-          })
+        children: /* @__PURE__ */ jsx(Slot, {
+          name: "mobile"
         })
       }),
       /* @__PURE__ */ jsx("div", {
         class: {
           [colorClass]: !floating,
           "!border-x-0 !border-t-0": !floating,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent") && !floating,
-          'before:absolute before:-z-10 before:h-full before:w-full before:drop-shadow-xl before:content-[""]': !floating,
+          "backdrop-blur-lg": !noblur && !floating,
           "relative mx-2 mt-2": floating
         },
         children: /* @__PURE__ */ jsxs("div", {
@@ -723,8 +718,7 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum
             "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
             [colorClass]: floating,
             "rounded-lum border": floating,
-            "before:backdrop-blur-lg": !colorClass.includes("transparent") && floating,
-            'before:absolute before:-z-10 before:h-full before:w-full before:max-w-7xl before:rounded-lum before:drop-shadow-xl before:content-[""]': floating
+            "backdrop-blur-lg": !noblur && floating
           },
           children: [
             /* @__PURE__ */ jsx("div", {

package/lib-types/components/elements/Nav.d.ts

@@ -5,6 +5,7 @@ interface NavProps extends Omit<PropsOf<'nav'>, 'class'> {
     };
     fixed?: boolean;
     floating?: boolean;
+    noblur?: boolean;
     nohamburger?: boolean;
     colorClass?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "5.0.1-6",
+  "version": "5.0.1-7",
   "description": "Luminescent UI library - Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -50,7 +50,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@luminescent/ui": "5.0.1-6"
+    "@luminescent/ui": "5.0.1-7"
   },
   "scripts": {
     "build": "qwik build",