fix: Fix menu hover issue (#6019)

* fix: Fix menu hover issue Fixes #5702 * Fix leftmenu hover issue
ietf-tools · Jul 22, 2023 · c717673 · c717673
1 parent 8a88210
commit c717673
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
@@ -84,6 +84,34 @@ html {
     scroll-padding-top: 60px;
 }
 
+// Make submenus open on hover.
+@include media-breakpoint-up(lg) {
+    .dropdown-menu>li>ul {
+        display: none;
+    }
+
+    .dropdown-menu>li:hover>ul {
+        display: block;
+    }
+
+}
+
+@include media-breakpoint-up(md) {
+    .leftmenu .nav>li>ul {
+        display: none;
+    }
+
+    .leftmenu .nav>li:hover>ul {
+        display: block;
+    }
+}
+
+:is(.dropdown-menu, .leftmenu .nav) .dropdown-menu {
+    top: 0;
+    left: 100%;
+    right: auto;
+}
+
 // Make textareas in forms use a monospace font
 textarea.form-control {
     font-family: $font-family-code;

diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
@@ -93,18 +93,6 @@ $(document)
 
 $(document)
     .ready(function () {
-
-        function dropdown_hover(e) {
-            var navbar = $(this)
-                .closest(".navbar");
-            if (navbar.length === 0 || navbar.find(".navbar-toggler")
-                .is(":hidden")) {
-                $(this)
-                    .children(".dropdown-toggle")
-                    .dropdown(e.type == "mouseenter" ? "show" : "hide");
-            }
-        }
-
         // load data for the menu
         $.ajax({
             url: $(document.body)
@@ -140,9 +128,6 @@ $(document)
                     }
                     attachTo.append(menu.join(""));
                 }
-
-                $("ul.nav li.dropdown, ul.nav li.dropend")
-                    .on("mouseenter mouseleave", dropdown_hover);
             }
         });
     });

diff --git a/ietf/templates/base/menu.html b/ietf/templates/base/menu.html
@@ -10,7 +10,6 @@
         <a href="#"
            class="nav-link dropdown-toggle"
            role="button"
-           data-bs-auto-close="false"
            data-bs-toggle="dropdown"
            aria-expanded="false">
             Groups