fix: js right menu handler

src/scripts/navigate-event.js

@@ -19,13 +19,27 @@ function closeRightMenu() {
       el.querySelector('.text-right').setAttribute('hidden', '');
       el.querySelector('.text-left').removeAttribute('hidden');
     });
-    Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
+    Array.from(rightMenu).forEach(el => {
+      el.removeAttribute("open");
+      el.classList.add('sm-hidden');
+      Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
+        ac.classList.remove('icon-close');
+        ac.classList.add('icon-options-vertical');
+      });
+    });
   }
 }
 
 function openRightMenu() {
   let rightMenu = document.querySelectorAll(".jsRightMenu");
-  Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
+  Array.from(rightMenu).forEach(el => {
+    el.setAttribute("open", "");
+    el.classList.remove('sm-hidden');
+    Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
+      ac.classList.remove('icon-options-vertical');
+      ac.classList.add('icon-close');
+    });
+  });
   Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
     el.querySelector('.text-left').setAttribute('hidden', '');
     el.querySelector('.text-right').removeAttribute('hidden');
@@ -35,48 +49,31 @@ function openRightMenu() {
   );
 }
 
-const adminControl = document.querySelector('.jsMobileSidebarAdminControl');
+function closeRightMobileMenu() {
-const buttons = adminControl.querySelectorAll('.jsMobileRightMenuButton');
+  let rightMenu = document.querySelectorAll(".jsRightMenu");
-const rightMenu = adminControl.querySelector('.jsRightMenu');
+  if (Array.from(rightMenu).filter(el => el.hasAttribute("mobile-open")).length > 0) {
-
+    Array.from(rightMenu).forEach(el => {
-Array.from(buttons).forEach(button => 
+      el.removeAttribute("mobile-open");
-  button.addEventListener("click", () => {
+      el.classList.add('sm-hidden');
-    if (button.classList.contains('icon-close')) {
+      Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
-      button.classList.remove('icon-close');
+        ac.classList.remove('icon-close');
-      button.classList.add('icon-options-vertical');
+        ac.classList.add('icon-options-vertical');
-      rightMenu.classList.add('sm-hidden');
+      });
-    }
+    });
-    else {
-      button.classList.remove('icon-options-vertical');
-      button.classList.add('icon-close');
-      rightMenu.classList.remove('sm-hidden');
-    };
-  })
-)
-
-const contentControls = Array.from(document.querySelectorAll('.jsMobileContentSidebarControl'));
-
-contentControls.forEach(
-  contentControl => {
-    const contentSidebar = contentControl.querySelector('.jsRightMenu');
-    const contentButtons = contentControl.querySelectorAll('.jsMobileRightMenuButton');
-    
-    Array.from(contentButtons).forEach(contentButton =>
-      contentButton.addEventListener('click', () => {
-        if (contentButton.classList.contains('icon-close')) {
-          contentButton.classList.remove('icon-close');
-          contentButton.classList.add('icon-options-vertical');
-          contentSidebar.classList.add('sm-hidden');
-        }
-        else {
-          contentButton.classList.remove('icon-options-vertical');
-          contentButton.classList.add('icon-close');
-          contentSidebar.classList.remove('sm-hidden');
-        };
-      })  
-    )
   }
-);
+}
+
+function openRightMobileMenu() {
+  let rightMenu = document.querySelectorAll(".jsRightMenu");
+  Array.from(rightMenu).forEach(el => {
+    el.setAttribute("mobile-open", "");
+    el.classList.remove('sm-hidden');
+    Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
+      ac.classList.remove('icon-options-vertical');
+      ac.classList.add('icon-close');
+    });
+  });
+}
 
 document.addEventListener("DOMContentLoaded", function () {
   const componentSet = new Set(window.hubl.components.map(c => c.type));
@@ -155,9 +152,11 @@ document.addEventListener("DOMContentLoaded", function () {
       closeLeftMenu();
     }
     if (
-      !event.target.closest(".jsOffsiteToggle")
+      !event.target.closest(".jsOffsiteToggle") &&
+      !event.target.classList.contains('jsMobileRightMenuButton')
     ) {
       closeRightMenu();
+      closeRightMobileMenu();
     }
   });
 
@@ -168,6 +167,7 @@ document.addEventListener("DOMContentLoaded", function () {
       closeUserControls();
       closeLeftMenu();
       closeRightMenu();
+      closeRightMobileMenu();
     }
   };
 
@@ -195,10 +195,15 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   });
 
-  Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
+
+  Array.from(document.querySelectorAll(".jsMobileRightMenuButton")).forEach(
     el => {
       el.addEventListener("click", () => {
-        openRightMenu();
+        if (el.closest('.jsMobileContentSidebarControl').querySelector('nav.jsRightMenu').hasAttribute("mobile-open")) {
+          closeRightMobileMenu();
+        } else {
+          openRightMobileMenu();
+        }
       });
     }
   );

src/styles/content/_index.scss

@@ -108,6 +108,10 @@ main {
       right: 0;
     }
   }
+
+  .jsMobileRightMenuButton {
+    float: right;
+  }
 }
 
 /* Add scrollbar to the left menu and to the content */

src/views/page-admin.pug

@@ -1,4 +1,4 @@
-.with-sidebar.jsMobileSidebarAdminControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
+.with-sidebar.jsMobileContentSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
   .scrollbar-content.views-container.sidebar-is-closed
     for component of components
       if component.route

src/views/partials/admin/page-admin-chat-create.pug

@@ -13,12 +13,6 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
     div
     div
 
-  div#loader-users-create.loader.loader-top
-    div
-    div
-    div
-    div
-
   div.segment.margin-bottom-medium
     div.segment
       solid-display.text-color-heading.text-semibold.text-xlarge.text-letter-spacing-large(
@@ -29,6 +23,12 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
         loader-id='loader-users-title'
       )
 
+  div#loader-users-create.loader.loader-top
+    div
+    div
+    div
+    div
+
   solid-form.form#selected-community(
     bind-resources
     nested-field='members'