From 6700d88288781e2cc1ef3d90522d402157c27874 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 26 Nov 2020 11:25:58 +0100
Subject: [PATCH] feature: admin right hand sidebar

---
 src/page-admin.pug                 | 16 +++++---
 src/styles/base/main.scss          | 61 +++++++++++++++++++++++++++++-
 src/styles/components/sidebar.scss | 59 +++++++++++++++++------------
 3 files changed, 104 insertions(+), 32 deletions(-)

diff --git a/src/page-admin.pug b/src/page-admin.pug
index 32af5c6..2d29776 100644
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@@ -9,19 +9,23 @@
     #admin-communities(hidden, data-view="admin-communities")
       include views/admin/page-admin-communities.pug
 nav.jsRightMenu(role='navigation')
-  solid-router(default-route='admin-circles')
+  solid-router.text-color-heading.reverse.text-bold(default-route='admin-circles')
     ul
-      li.jsOffsiteToggle
-        a(data-trans='admin.menuRight.fold')
+      li.segment.padding-small.text-right.jsOffsiteToggle
+        span.icon.icon-arrow-right.xxsmall.icon-margin-right-xxsmall
+        a.text-normal.text-xsmall(data-trans='admin.menuRight.fold')
       if (endpoints.users || (endpoints.get && endpoints.get.users))
         solid-route(name='admin-communities')
-          li
+          li.segment.padding-large
+            span.icon.ci-networking.large.icon-margin-right
             a(data-trans='admin.menuRight.community')
       if endpoints.circles || (endpoints.get && endpoints.get.circles)
         solid-route(name='admin-circles')
-          li
+          li.segment.padding-large
+            span.icon.ci-bubble-add.large.icon-margin-right
             a(data-trans='admin.menuRight.circles')
       if endpoints.projects || (endpoints.get && endpoints.get.projects)
         solid-route(name='admin-projects')
-          li
+          li.segment.padding-large
+            span.icon.ci-add.large.icon-margin-right
             a(data-trans='admin.menuRight.projects')
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c732836..db4b4be 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -11,7 +11,7 @@
     background-color: var(--color-main-background);
     box-sizing: border-box;
     color: var(--color-grey) !important;
-    font-size: 1.6rem;
+    font-size: 14px;
     /* Fix for viewport height bug in webkit for mobile */
     height: -webkit-fill-available;
     min-height: -webkit-fill-available;
@@ -81,6 +81,9 @@
   &.margin-left {
     margin-left: 20px;
   }
+  &.margin-right-xsmall {
+    margin-right: 15px;
+  }
   &.margin-bottom {
     margin-bottom: 20px;
   }
@@ -108,6 +111,9 @@
   &.margin-bottom {
     margin-bottom: 20px;
   }
+  &.padding-small {
+    padding: 10px;
+  }
   &.padding-y-small {
     padding-top: 10px;
     padding-bottom: 10px;
@@ -173,6 +179,59 @@
   background: white;
 }
 
+.icon {
+
+  &::before {
+    font-size: 20px;
+  }
+
+  &.icon-magnify {
+    background-image: url();
+  }
+  &.icon-arrow-down {
+    background-image: url();
+  }
+  &.rounded{
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &-small {
+      height: 35px;
+      width: 35px;
+    }
+    &-large {
+      height: 70px;
+      width: 70px;
+    }
+  }
+  &.xxsmall::before {
+    font-size: 12px;
+  }
+  &.xsmall::before {
+    font-size: 15px;
+  }
+  &.small::before {
+    font-size: 18px;
+  }
+  &.large::before {
+    font-size: 30px;
+  }
+  &.xlarge::before {
+    font-size: 40px;
+  }
+  &.centered {
+    margin: 0 auto;
+  }
+  &.icon-margin-right::before {
+    margin-right: 15px;
+  }
+  &.icon-margin-right-xxsmall::before {
+    margin-right: 5px;
+  }
+}
+
 .icon-color-primary::before {
   color: var(--color-primary);
 }
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index 1e567ce..3fb5421 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -34,8 +34,8 @@
     &.sidebar-is-closed {
       
       @include breakpoint(lg) {
-        margin-left: -15.5rem;
-        transform: translate(15.5rem);
+        margin-left: -18.5rem;
+        transform: translate(18.5rem);
       }
     }
   }
@@ -45,14 +45,12 @@
   }
 
   nav {
-    background: var(--color-right-menu-background);
+    background: #F1F1F1;
     transition: all 0.5s;
     width: 25rem;
 
     >solid-router {
-      color: var(--color-right-menu-text);
       flex: 0 0 auto;
-      font-weight: 600;
 
       >ul {
         cursor: pointer;
@@ -62,26 +60,33 @@
         margin: 0;
         padding-left: 0;
 
+        &>li>a {
+          vertical-align: middle;
+        }
+
         li {
-          align-items: center;
-          border-bottom: 1px solid var(--color-right-menu-link-border);
-          display: flex;
-          margin: 0;
-          padding: 2.15rem 2.55rem;
-          position: relative;
+          border-bottom: 1px solid #D6CECE;
+          /*align-items: center;
+          display: flex;*/
+          /*margin: 0;*/
+          /*padding: 2.15rem 2.55rem;*/
+          /*position: relative;*/
           /*width: 12em;*/
           
-          &::before {
+          /*&::before {
             float: left;
             font-size: 4rem;
             margin-left: 0;
             margin-right: 2.85rem;
+          }*/
+          &>a {
+            vertical-align: super;
           }
         }
 
-        >li {
-          @include icon('arrow-right-circle');
-        }
+        /*>li {
+          @include icon('arrow-right');
+        }*/
 
         >solid-route {
 
@@ -121,29 +126,33 @@
             @include ci('file');
           }
 
-          &[name='admin-communities']>li {
+          /*&[name='admin-communities']>li {
             @include ci('networking');
-          }
+          }*/
 
-          &[name='admin-circles']>li {
+          /*&[name='admin-circles']>li {
             @include ci('bubble-add');
-          }
+          }*/
 
-          &[name='admin-projects']>li {
+          /*&[name='admin-projects']>li {
             @include ci('add');
-          }
+          }*/
 
           &[active] {
-            background-color: var(--color-right-menu-active-background);
-            color: var(--color-right-menu-active-text);
+            background-color: var(--color-heading);
+            color: white;
             display: inline-block;
           }
 
           &.active-color[active] {
             >li::before {
-              background-color: var(--color-right-menu-active-icon);
+              background-color: white;
             }
           }
+
+          &:hover:not([active]) {
+            background: #E4E4E4;
+          }
         }
       }
     }
@@ -157,7 +166,7 @@
     }
 
     &.jsRightMenu:not([open]) {
-      transform: translate(15.5rem);
+      transform: translate(18.5rem);
 
       & .jsOffsiteToggle::before {
         transform: rotate(180deg);