From 50f7d49810c72508036c9dabee4fd016b9656ce4 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Tue, 13 Apr 2021 16:11:28 +0200
Subject: [PATCH] patch: New right menu on mobile - JS added

---
 src/scripts/navigate-event.js                 | 37 +++++++++++++++++++
 src/views/page-admin.pug                      |  2 +-
 .../partials/admin/page-admin-projects.pug    |  5 ++-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js
index d2fc2e7..d7b8212 100644
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@@ -35,6 +35,43 @@ function openRightMenu() {
   );
 }
 
+const controls = document.querySelectorAll('.jsMobileSidebarControl');
+Array.from(controls).forEach(control => {
+  const button = control.querySelector('.jsMobileRightMenuButton');
+  const rightMenu = control.querySelector('.jsRightMenu');
+
+  button.addEventListener("click", () => {
+    if (button.classList.contains('icon-close')) {
+      button.classList.remove('icon-close');
+      button.classList.add('icon-options-vertical');
+      console.log(rightMenu);
+      rightMenu.setAttribute('hidden', '');
+    }
+    else {
+      button.classList.remove('icon-options-vertical');
+      button.classList.add('icon-close');
+      rightMenu.removeAttribute('hidden');
+    }
+  });
+});
+
+
+/*const buttons = document.querySelectorAll(".jsMobileToggleRightMenu");
+Array.from(buttons).forEach(el => el.addEventListener("click", () => {
+  if (el.classList.contains('icon-close')) {
+    el.classList.remove('icon-close');
+    el.classList.add('icon-options-vertical');
+    const rightMenu = document.querySelectorAll(".jsRightMenu");
+    rightMenu.classList.add("block");
+  }
+  else {
+    el.classList.remove('icon-options-vertical');
+    el.classList.add('icon-close');
+    const rightMenu = document.querySelectorAll(".jsRightMenu");
+    rightMenu.classList.add("sm-hidden");
+  };
+}));*/
+
 document.addEventListener("DOMContentLoaded", function () {
   const componentSet = new Set(window.hubl.components.map(c => c.type));
 
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index 04198be..8e06f40 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -1,4 +1,4 @@
-.with-sidebar.whitespace-normal.bg-color-white.only-on-admin(hidden)
+.with-sidebar.jsMobileSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
   .scrollbar-content.views-container.sidebar-is-closed
     for component of components
       if component.route
diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug
index e7bdc26..6953b7c 100644
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.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='project.list.title')
+  div.segment.full.sm-three-quarter
+    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.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