fix: button

origranot · Oct 14, 2023 · 89af7a2 · 89af7a2
1 parent 1efe206
commit 89af7a2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/apps/frontend/src/components/navbar/burger-button/burger-button.tsx b/apps/frontend/src/components/navbar/burger-button/burger-button.tsx
@@ -1,16 +1,12 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 
 export interface BurgerProps {
   buttonTitle: string;
-  showDropdown: { value: boolean };
 }
 
 export const BurgerButton = component$((props: BurgerProps) => {
   return (
-    <label tabIndex={0} title={props?.buttonTitle} class={'btn btn-ghost dark:fill-white'} 
-     onClick$={$(() => {
-      props.showDropdown.value = !props.showDropdown.value;
-    })}>
+    <label tabIndex={0} title={props?.buttonTitle} class={'btn btn-ghost dark:fill-white'}>
       <svg xmlns="http://www.w3.org/2000/svg" fill="current" viewBox="0 0 24 24" stroke-width={1.5} stroke="current" class="w-6 h-6">
         <path d="M22 13C22 14.11 21.11 15 20 15H4C2.9 15 2 14.11 2 13S2.9 11 4 11H13L15.5 13L18 11H20C21.11 11 22 11.9 22 13M12 3C3 3 3 9 3 9H21C21 9 21 3 12 3M3 18C3 19.66 4.34 21 6 21H18C19.66 21 21 19.66 21 18V17H3V18Z" />
       </svg>

diff --git a/apps/frontend/src/components/navbar/navbar.tsx b/apps/frontend/src/components/navbar/navbar.tsx
@@ -40,12 +40,19 @@ export const Navbar = component$(() => {
           Reduced.to
         </Link>
       </div>
-      <div class="block sm:hidden dropdown dropdown-end">
-        <BurgerButton
-          buttonTitle="Open"
-          showDropdown={showDropdown}
-        />
-        {showDropdown.value == true && (
+      <div
+        class="block sm:hidden dropdown dropdown-end"
+        onFocusout$={({ relatedTarget }, currentTarget) => {
+          if (relatedTarget instanceof HTMLElement && currentTarget.contains(relatedTarget as Node)) {
+            return;
+          }
+
+          showDropdown.value = false;
+        }}
+        onClick$={() => (showDropdown.value = !showDropdown.value)}
+      >
+        <BurgerButton buttonTitle="Open" />
+        {showDropdown.value && (
           <ul tabIndex={0} class="menu dropdown-content shadow bg-base-100 rounded-box w-52 mt-4 p-2">
             <li class={user.value ? 'px-4 py-2' : ''}>
               {user.value ? (