update nav

LuminescentDev · Dec 5, 2024 · 4d38d86 · 4d38d86
1 parent e7f570c
commit 4d38d86
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/packages/ui-qwik/src/components/docs/Nav.tsx b/packages/ui-qwik/src/components/docs/Nav.tsx
@@ -4,6 +4,7 @@ import { Header, Nav, DropdownRaw, Toggle } from '../../index';
 interface navOptions {
   fixed?: boolean;
   floating?: boolean;
+  nohamburger?: boolean;
   colorClass?: string;
 }
 
@@ -18,14 +19,16 @@ export default component$(() => {
         label="fixed" />
       <Toggle id="nav-floating" onChange$={(e, element) => store.floating = element.checked}
         label="floating" />
+      <Toggle id="nav-nohamburger" onChange$={(e, element) => store.nohamburger = element.checked}
+        label="nohamburger" />
       <label for="nav-colorclass">colorClass</label>
       <input id="nav-colorclass" class="w-full lum-input lum-pad-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md"
         onInput$={(e, el) => store.colorClass = el.value}
         value={store.colorClass}
         placeholder="lum-bg-gray-900"
       />
       <div class="lum-card relative h-40">
-        <Nav floating={store.floating} fixed={store.fixed} colorClass={store.colorClass}>
+        <Nav floating={store.floating} fixed={store.fixed} nohamburger={store.nohamburger} colorClass={store.colorClass}>
 
           <button q:slot="start" class={'lum-btn lum-bg-transparent'}>
             Brand

diff --git a/packages/ui-qwik/src/components/elements/Nav.tsx b/packages/ui-qwik/src/components/elements/Nav.tsx
@@ -5,10 +5,11 @@ interface NavContainerProps extends Omit<PropsOf<'nav'>, 'class'> {
   class?: { [key: string]: boolean };
   fixed?: boolean;
   floating?: boolean;
+  nohamburger?: boolean;
   colorClass?: string;
 }
 
-export const Nav = component$<NavContainerProps>(({ fixed, floating, colorClass = 'lum-bg-gray-900', ...props }) => {
+export const Nav = component$<NavContainerProps>(({ fixed, floating, nohamburger, colorClass = 'lum-bg-gray-900', ...props }) => {
   const menu = useSignal(false);
 
   return (
@@ -18,20 +19,22 @@ export const Nav = component$<NavContainerProps>(({ fixed, floating, colorClass
       'absolute': !fixed,
       ...props.class,
     }}>
-      <div class={{
-        'sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full': true,
-        'mt-2': menu.value,
-        'opacity-0 pointer-events-none': !menu.value,
-        'before:backdrop-blur-lg': !colorClass.includes('transparent'),
-        'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true,
-      }}>
+      {!nohamburger && (
         <div class={{
-          [colorClass]: true,
-          'flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg': true,
+          'sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full': true,
+          'mt-2': menu.value,
+          'opacity-0 pointer-events-none': !menu.value,
+          'before:backdrop-blur-lg': !colorClass.includes('transparent'),
+          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true,
         }}>
-          <Slot name="mobile" />
+          <div class={{
+            [colorClass]: true,
+            'flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg': true,
+          }}>
+            <Slot name="mobile" />
+          </div>
         </div>
-      </div>
+      )}
       <div class={{
         [colorClass]: !floating,
         '!border-t-0 !border-x-0': !floating,
@@ -54,11 +57,13 @@ export const Nav = component$<NavContainerProps>(({ fixed, floating, colorClass
           </div>
           <div class="flex items-center flex-1 gap-2 py-2 justify-end">
             <Slot name="end" />
-            <button class={'lum-btn lum-pad-equal-md lum-bg-transparent sm:hidden'} onClick$={() => menu.value = !menu.value}>
-              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-              </svg>
-            </button>
+            {!nohamburger && (
+              <button class={'lum-btn lum-pad-equal-md lum-bg-transparent sm:hidden'} onClick$={() => menu.value = !menu.value}>
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                </svg>
+              </button>
+            )}
           </div>
         </div>
       </div>