patch: New right menu on mobile - JS fixed + extended through admin

src/scripts/navigate-event.js

@@ -35,8 +35,30 @@ function openRightMenu() {
   );
 }
 
-const controls = document.querySelectorAll('.jsMobileSidebarControl');
+const control = document.querySelector('.jsMobileSidebarControl');
-Array.from(controls).forEach(control => {
+const buttons = control.querySelectorAll('.jsMobileRightMenuButton');
+const rightMenu = control.querySelector('.jsRightMenu');
+
+Array.from(buttons).forEach(button => 
+  button.addEventListener("click", () => {
+    if (button.classList.contains('icon-close')) {
+      button.classList.remove('icon-close');
+      button.classList.add('icon-options-vertical');
+      rightMenu.setAttribute('hidden', '');
+    }
+    else {
+      button.classList.remove('icon-options-vertical');
+      button.classList.add('icon-close');
+      rightMenu.removeAttribute('hidden');
+    };
+  })
+)
+
+
+
+
+
+/*Array.from(controls).forEach(control => {
   const button = control.querySelector('.jsMobileRightMenuButton');
   const rightMenu = control.querySelector('.jsRightMenu');
 
@@ -53,7 +75,7 @@ Array.from(controls).forEach(control => {
       rightMenu.removeAttribute('hidden');
     }
   });
-});
+});*/
 
 
 /*const buttons = document.querySelectorAll(".jsMobileToggleRightMenu");

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

@@ -1,8 +1,8 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.padding-large.border-bottom.border-color-grey
-  div.segment.half.sm-full
+  div.segment.full.sm-three-quarter
     h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
-  div.segment.half.sm-hidden.text-right
+  div.segment.lg-hidden.sm-quarter.text-right
-    solid-link(class="backlink", next=`admin-${getRoute('chat', true)}` data-trans='circle.create.backlink')
+    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-users-title.loader.loader

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

@@ -1,5 +1,8 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-  h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
+  div.segment.full.sm-three-quarter
+    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
+  div.segment.lg-hidden.sm-quarter.text-right
+    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 

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

@@ -1,8 +1,8 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
-  div.segment.half.sm-full  
+  div.segment.full.sm-three-quarter
     h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
-  div.segment.half.sm-hidden.text-right
+  div.segment.lg-hidden.sm-quarter.text-right
-    solid-link(class="backlink", next=`admin-${getRoute('circles', true)}` data-trans='circle.create.backlink')
+    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div.loader.loader-top(id=`loader-admin-${getComponent('circles').uniq}`)

src/views/partials/admin/page-admin-circles.pug

@@ -1,5 +1,8 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-  h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
+  div.segment.full.sm-three-quarter
+    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
+  div.segment.lg-hidden.sm-quarter.text-right
+    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal
 

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

@@ -1,8 +1,8 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
-  div.segment.half.sm-full
+  div.segment.full.sm-three-quarter
     h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.create.title')
-  div.segment.half.sm-hidden.text-right
+  div.segment.lg-hidden.sm-quarter.text-right
-    solid-link(class="backlink", next=`admin-${getRoute('projects', true)}` data-trans='project.create.backlink')
+    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div.loader.loader-top(id=`loader-admin-${getComponent('projects').uniq}`)