From f0ae58d17462426066a34b995966a4f7b6df2296 Mon Sep 17 00:00:00 2001
From: Leo <contact@leonguyen.com>
Date: Sat, 25 Feb 2023 15:08:04 -0600
Subject: [PATCH] Perfect auto drop for downdown menu.

---
 scss/bootstrap/_navbar.scss | 54 ++++++++++++-------------------------
 1 file changed, 17 insertions(+), 37 deletions(-)

diff --git a/scss/bootstrap/_navbar.scss b/scss/bootstrap/_navbar.scss
index 9068053..0430669 100644
--- a/scss/bootstrap/_navbar.scss
+++ b/scss/bootstrap/_navbar.scss
@@ -11,48 +11,28 @@
   }
 
   // Make dropdown menus auto drop
-  .dropdown {
-    .dropdown-menu {
-      // z-index: 10000;
-      display: none;
-      opacity: 0;
-      pointer-events: none;
-      // transition: all .15s linear;
-      // animation: disappear 0.15s linear;
-    }
-
-    &:hover {
+  @include media-breakpoint-up(md) {
+    .dropdown {
       .dropdown-menu {
-        pointer-events: auto;
-        display: block;
-        opacity: 1;
-        // transition: all .15s linear;
-        animation: appear 0.15s linear;
-      }
-    }
-
-    @keyframes appear {
-      0% {
         display: block;
         opacity: 0;
+        transition: all .15s linear;
+        pointer-events: none; // Prevent auto show when mouse is below top menu item
+        min-width: 170px;
       }
-      100% {
-        display: block;
-        opacity: 1;
+
+      &:hover {
+        .dropdown-menu {
+          display: block;
+          opacity: 1;
+          pointer-events: auto; // Prevent auto hide when mouse is in dropdown menu
+        }
+      }
+
+      .dropdown-menu-end {
+        right: 0;
+        left: auto;
       }
     }
-
-    /*@keyframes disappear {
-      0% {
-        opacity: 1;
-        display: block;
-        transform: scale(1);
-      }
-      100% {
-        opacity: 0;
-        display: none;
-        transform: scale(0);
-      }
-    }*/
   }
 }