From 3e281edc5c260a15d369fce5f9746c86f3356bd3 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sun, 19 Jan 2020 13:19:25 +0100
Subject: [PATCH] Sidebar is responsive

---
 src/header.pug                     |  2 +-
 src/menu-left.pug                  |  2 +-
 src/page-project.pug               |  5 ++++-
 src/styles/base/main.scss          | 34 ++++++++++++++++++++++++++++++
 src/styles/base/menu-left.scss     |  7 ++++--
 src/styles/components/sidebar.scss | 23 +++++++++++++++++++-
 6 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/src/header.pug b/src/header.pug
index 3e47e55..c95b909 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -24,7 +24,7 @@ details#user-controls
   #user-controls__panel
     include page-user-panel.pug
 
-.mobile-menu-icon
+.jsToggleLeftMenu.mobile-menu-icon
   button.icon-menu
 
 button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 52bbfcb..46b0d93 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -7,7 +7,7 @@ sib-widget(name='hd-create')
     p.create You are not part of any ${value} yet. To create a new one, you can go to the 
       sib-link(next='admin') administration panel
 
-nav#main__menu
+nav#main__menu.jsLeftMenu.mobile-closed
   sib-router#navbar-router(default-route='members')
     //- sib-route.menu(name='members')
     //-   div.menu-label Members
diff --git a/src/page-project.pug b/src/page-project.pug
index 00ec69a..9cf8f7d 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -13,6 +13,9 @@
     
           value-const-title1='N°'
         )
+        .mobile-sidebar-button.jsMobileSidebarOpenButton
+          button.icon-arrow-left-circle
+            span MENU
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)
@@ -25,7 +28,7 @@ dialog(id='project-contributions-help').modal
     button.icon-close
   img(src='/images/contributions-help.png')
 
-nav.jsRightMenu(role='navigation')
+nav.jsRightMenu.mobile-closed(role='navigation')
   sib-router(default-route='project-chat')
     ul
       li.jsOffsiteToggle
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index bba7e80..599f4c0 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -199,6 +199,40 @@ h5 {
   border-bottom: 1px solid $color-221-51-90;
   padding: 3rem;
 
+  @include breakpoint(sm) {
+    background: $color-221-51-90;
+  }
+
+  sib-display {
+    @include breakpoint(sm) {
+      float: left;
+    }
+  }
+
+  .mobile-sidebar-button {
+    @include breakpoint(sm) {
+      float: right;
+      
+      button {
+        color: $color-233-18-29;
+
+        &::before {
+          font-size: 2.2rem;
+          margin-right: 1.2rem;
+        }
+      }
+
+      span {
+        font-size: 1.8rem;
+        font-weight: bold;
+      }
+    }
+
+    @include breakpoint($min: 1025px, $max: 0) {
+      display: none;
+    }
+  }
+
   div {
 
     .h1-aside {
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index f889e74..e228084 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -189,9 +189,11 @@
     }
   }
 
-  &.mobile-opened {
+  &.jsLeftMenu.mobile-opened {
+
     @include breakpoint(sm) {
       bottom: 0;
+      box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
       min-width: 80%;
       position: fixed;
       right: 0;
@@ -200,7 +202,8 @@
     }
   }
 
-  &.mobile-closed {
+  &.jsLeftMenu.mobile-closed {
+
     @include breakpoint(sm) {
       display: none;
     }
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index d1d12ef..652b17d 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -111,12 +111,33 @@
       }
     }
 
-    &.offsite-is-closed {
+    &.jsRightMenu.offsite-is-closed {
       transform: translate(15.5rem);
 
       & .jsOffsiteToggle::before {
         transform: rotate(180deg);
       }
     }
+    
+    &.jsRightMenu.mobile-opened {
+
+      @include breakpoint(sm) {
+        background: $color-221-51-90;
+        bottom: 0;
+        box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
+        min-width: 60%;
+        position: fixed;
+        right: 0;
+        top: 83px;
+        z-index: 1;
+      }
+    }
+
+    &.jsRightMenu.mobile-closed {
+
+      @include breakpoint(sm) {
+        display: none;
+      }
+    }
   }
 }
\ No newline at end of file