From 5e345427627142acd11be6275c510adb6f58c579 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Tue, 13 Apr 2021 12:26:35 +0200
Subject: [PATCH] feature: New right menu on mobile - styles added

---
 src/styles/content/_index.scss | 32 ++++++++++++++++++++++----------
 src/views/page-admin.pug       |  2 +-
 src/views/page-circle.pug      |  2 +-
 src/views/page-project.pug     |  2 +-
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss
index 40aed50..0a38228 100644
--- a/src/styles/content/_index.scss
+++ b/src/styles/content/_index.scss
@@ -55,7 +55,7 @@ main {
         vertical-align: middle;
       }
 
-      >solid-route {
+      /*>solid-route {
 
         &[active]>li {
           background-color: var(--color-heading);
@@ -64,16 +64,30 @@ main {
         &:hover:not([active])>li {
           background: #E4E4E4;
         }
-      }
+      }*/
     }
 
     /* Styles use with JS to open/close the sidebar */
     &.jsRightMenu {
       display: block;
+
+      @media (max-width: 768px) {
+        position: fixed;
+        top: 101px;
+        right: 3px;
+        height: auto;
+        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14);
+      }
+
       solid-link[active] {
         color: white;
         background: var(--color-heading);
+
+        >li {
+          border-bottom: 1px solid var(--color-heading);
+        }
       }
+
       solid-link:not([active]):hover {
         background: #e4e4e4;
       }
@@ -85,12 +99,12 @@ main {
       }
 
       /* Quick fix. When you got time, use animation on the span instead */
-      @media (max-width: 768px) {
+      /*@media (max-width: 768px) {
         ul>li:first-child>span,
         ul>li:first-child>a {
           visibility: hidden;
         }
-      }
+      }*/
     }
 
     &.jsRightMenu[open] {
@@ -98,13 +112,13 @@ main {
       bottom: 0;
       right: 0;
 
-      @media(max-width: 768px) {
+      /*@media(max-width: 768px) {
         box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
         min-width: 60%;
         position: fixed;
         top: 50px;
         z-index: 3000;
-      }
+      }*/
     }
   }
 }
@@ -122,7 +136,7 @@ main {
   height: 100vh;
 }
 
-/* Custom scrollbar of the left-menu*/
+/* Custom scrollbar of the right-menu */
 /* Works on Firefox*/
 .scrollbar-nav {
   scrollbar-width: thin;
@@ -146,9 +160,6 @@ main {
   }
 }
 
-
-
-
 /* Custom scrollbar of the content */
 /* Works on Firefox */
 .scrollbar-content {
@@ -172,6 +183,7 @@ main {
     border: 3px solid white;                  /* creates padding around scroll thumb */
   }
 }
+/* End scrollbar*/
 
 
 solid-display-value-markdown {
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index a715eee..04198be 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -60,7 +60,7 @@
   nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
     .segment.whitespace-normal.text-color-heading.text-bold
       ul
-        li.segment.full.padding-small.text-normal.jsOffsiteToggle
+        li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
           span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
           span.segment.full.text-right(hidden)
             span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index f2ecede..a3a0868 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -44,7 +44,7 @@
 nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
     ul
-      li.segment.full.padding-small.text-normal.jsOffsiteToggle
+      li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
         span.segment.full.text-right(hidden)
           span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index b79b4e9..834c13f 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -25,7 +25,7 @@
 nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
     ul
-      li.segment.full.padding-small.text-normal.jsOffsiteToggle
+      li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
         span.segment.full.text-right(hidden)
           span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall