Fix : User menu not closing mobile

clementp0 · Aug 8, 2024 · 719d16c · 719d16c
1 parent d42e66a
commit 719d16c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/assets/index.js b/assets/index.js
@@ -29,6 +29,17 @@ $(() => {
     $('.has-sidebar').removeClass('menu-open')
   })
 
+  // User menu
+
+  $('.dropbtn').on('click', () => {
+    $('.dropdown-content').toggleClass('dropdown-content-open')
+  })
+  $('.dropdown-content-tray').on('click', function (e) {
+    if (e.target != this) return
+    $('.dropdown-content').removeClass('dropdown-content-open')
+  })
+
+
   // Friend page
   const friendElement = $('.add-friend.inmodal')
   new UserModal(friendElement)

diff --git a/assets/scss/components/header.scss b/assets/scss/components/header.scss
@@ -93,16 +93,15 @@
       position: relative;
       display: inline-block;
 
-      &:hover .dropdown-content {
-
-        display: block;
-        opacity: 1;
-        transform: translateY(0);
-        -webkit-transition: opacity 0.2s ease-out, transform 0.5s ease-out;
-        transition: opacity 0.2s ease-out, transform 0.5s ease-out;
+      &-content-open {
+        display: block!important;
+        opacity: 1!important;
+        transform: translateY(0)!important;
+        -webkit-transition: opacity 0.2s ease-out, transform 0.5s ease-out!important;
+        transition: opacity 0.2s ease-out, transform 0.5s ease-out!important;
 
         @media (max-width: 768px) {
-          transform: translateY(-100%);
+          transform: translateY(-100%)!important;
         }
       }
 
@@ -147,7 +146,7 @@
         box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
 
         @media (max-width: 768px) {
-          transition: all 0.5s;
+          transition: all 0.5s!important;
           display: block;
           position: fixed;
           width: 100%;