Merge pull request #42 from Google-Developer-Student-Club-Malaysia/de…

…v-yot
Google-Developer-Student-Club-Malaysia · Jan 13, 2024 · d4ca7f2 · d4ca7f2
2 parents 38bd862 + eb7b7a3
commit d4ca7f2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/kitahack-frontend/src/app/layouts/navbar/navbar.component.html b/kitahack-frontend/src/app/layouts/navbar/navbar.component.html
@@ -10,7 +10,7 @@
       <button (click)="toggleEventNavbar()" type="button"
         class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
         <span class="sr-only">Open event menu</span>
-        <svg class="w-6 h-6" fill="none" st1roke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round"
             d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z">
@@ -33,8 +33,7 @@
 
       <div class="relative">
         <button (click)="toggleEventButton()" type="button"
-          class="flex items-center text-sm font-semibold leading-6 text-gray-700 gap-x-1 z-index" aria-expanded="false"
-          [class.focused]="eventButtonOpen" (blur)="eventButtonOpen = false">
+          class="flex items-center text-sm font-semibold leading-6 text-gray-700 gap-x-1 z-index" aria-expanded="false">
           Events
           <svg class="flex-none w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd"
@@ -47,8 +46,7 @@
 
 
         <div [ngClass]="eventButtonOpen ? 'absolute' : 'hidden'"
-          class="z-50 w-screen max-w-md mt-3 overflow-y-scroll bg-white shadow-lg top-full rounded-3xl ring-1 ring-gray-900/5 h-[70vh] right-0"
-          (focusin)="eventButtonOpen = true" (focusout)="eventButtonOpen = false">
+          class="z-50 w-screen max-w-md mt-3 overflow-y-scroll bg-white shadow-lg top-full rounded-3xl ring-1 ring-gray-900/5 h-[70vh] right-0">
           <div class="p-4">
             <div *ngFor="let clientPage of clientPages"
               class="relative flex p-4 text-sm leading-6 rounded-lg group gap-x-6 hover:bg-gray-50">
@@ -82,7 +80,7 @@
       <div class="relative">
         <button (click)="toggleMoreButton()" type="button"
           class="flex items-center text-sm font-semibold leading-6 text-gray-700 gap-x-1 z-index" aria-expanded="false"
-          [class.focused]="moreButtonOpen" (blur)="moreButtonOpen = false">
+          [class.focused]="moreButtonOpen" (blur)="toggleEventNavbarDelay()">
           More
           <svg class="flex-none w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd"

diff --git a/kitahack-frontend/src/app/layouts/navbar/navbar.component.ts b/kitahack-frontend/src/app/layouts/navbar/navbar.component.ts
@@ -30,4 +30,10 @@ export class NavbarComponent {
   toggleEventNavbar() {
     this.eventNavbarOpen = !this.eventNavbarOpen;
   }
+
+  toggleEventNavbarDelay() {
+    setTimeout(() => {
+      this.eventButtonOpen = false
+    }, 100);
+  }
 }