From 18bb5a53ee4aa40f928431768e9eaa0f205d4f16 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 15 Sep 2020 10:32:36 +0200
Subject: [PATCH] update: toggle the user list on chevron

---
 src/scripts/menu-toggle.js     | 11 +++++++++++
 src/styles/base/main.scss      |  2 +-
 src/styles/base/menu-left.scss | 18 +++++++++++++-----
 3 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 src/scripts/menu-toggle.js

diff --git a/src/scripts/menu-toggle.js b/src/scripts/menu-toggle.js
new file mode 100644
index 0000000..8f96670
--- /dev/null
+++ b/src/scripts/menu-toggle.js
@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
+  
+    //- Toggle sub-menus
+    menuWrappers.forEach(menuWrapper => {
+      const menu = menuWrapper.querySelector(".menu");
+      menu.addEventListener("click", e => {
+        menuWrapper.classList.toggle("is-closed");
+      });
+    });
+});  
\ No newline at end of file
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 950b85a..835e8db 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -61,7 +61,7 @@ solid-dashboard section {
     position: sticky;
     top: 0;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: scroll;
   }
 
   &.jsLeftMenu {
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index a018b5d..6996fb6 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -13,13 +13,21 @@
 
   solid-router {
     .menu-wrapper {
-      &.is-closed {
-        .sub-menu {
-          display: none;
+      .menu-icon.icon-arrow-up {
+        visibility: hidden;
+      }
+      @include breakpoint(lg) {
+        .menu-icon.icon-arrow-up {
+          visibility: visible;
         }
+        &.is-closed {
+          .sub-menu {
+            display: none;
+          }
 
-        .menu-chevron {
-          transform: rotate(180deg);
+          .menu-chevron {
+            transform: rotate(180deg);
+          }
         }
       }
     }