Allow admin sidebar to be collapsible

This will add extra space in smaller devices. We are setting a cookie via JS to remember user preferences throught users navigation. Co-authored-by: Michela Frecchiami <michela.frecchiami@gmail.com> Co-authored-by: Sean <seand7565@gmail.com> Co-authored-by: Thomas von Deyen <thomas@vondeyen.com> Co-authored-by: jacobherrington <jacobherringtondeveloper@gmail.com>
solidusio · Nov 4, 2019 · b8e85fb · b8e85fb
1 parent a0e7066
commit b8e85fb
Show file tree

Hide file tree

Showing 13 changed files with 229 additions and 65 deletions.
diff --git a/backend/app/assets/javascripts/spree/backend.js b/backend/app/assets/javascripts/spree/backend.js
@@ -30,6 +30,7 @@
 //= require spree/backend/components/tooltips
 //= require spree/backend/components/editable_table
 //= require spree/backend/components/sortable_table
+//= require spree/backend/components/admin_nav
 //= require spree/backend/datepicker
 //= require spree/backend/flash
 //= require spree/backend/gateway

diff --git a/backend/app/assets/javascripts/spree/backend/components/admin_nav.js b/backend/app/assets/javascripts/spree/backend/components/admin_nav.js
@@ -0,0 +1,24 @@
+Spree.ready(function() {
+  if (window.screen.width <= 1024 && !document.cookie.includes("admin_nav_hidden")) {
+    // Set default nav to collapse on small screens - but don't override user preference
+    document.body.classList.add("admin-nav-hidden");
+    document.cookie = "admin_nav_hidden=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+
+  var adminNavToggle = document.querySelector("#admin-nav-toggle");
+
+  if (adminNavToggle) {
+    adminNavToggle.addEventListener("click", function(e) {
+      e.preventDefault();
+      document.body.classList.toggle("admin-nav-hidden");
+      $(document.body).trigger("sticky_kit:recalc");
+      adminNavToggle.classList.toggle("fa-chevron-circle-left");
+      adminNavToggle.classList.toggle("fa-chevron-circle-right");
+      document.cookie = "admin_nav_hidden=" + document.body.classList.contains("admin-nav-hidden") + "; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+    });
+  }
+
+  if (document.body.classList.contains('admin-nav-hidden')) {
+    $(adminNavToggle).removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
+  }
+});
diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
@@ -85,6 +85,8 @@ $dropdown-link-hover-bg:         $color-primary !default;
 
 $breadcrumb-bg:                 transparent !default;
 $breadcrumb-active-color:       $color-primary !default;
+$breadcrumb-padding-y:          .75rem !default;
+$breadcrumb-padding-x:          0 !default;
 
 // Popover
 

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
@@ -1,15 +1,15 @@
 .breadcrumb {
   font-size: 16px;
   margin-bottom: 0;
-  
+
   a {
     color: $breadcrumb-color;
-    
+
     &:hover {
       color: $breadcrumb-active-color;
     }
   }
-  
+
   .active {
     font-weight: $font-weight-bold;
   }

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
@@ -30,6 +30,10 @@
   left: $width-sidebar;
   right: 0;
   z-index: 1000;
+
+  .admin-nav-hidden & {
+    left: $width-sidebar-collapsed;
+  }
 }
 
 .flash {

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -2,6 +2,91 @@ $padding-x-navbar: 26px;
 $padding-y-navbar: 13px;
 $padding-y-navbar-submenu: 9px;
 
+#admin-nav-toggle {
+  border-bottom: $border-sidebar;
+  padding: ($padding-y-navbar/ 2) $padding-x-navbar;
+  width: 100%;
+  text-align: left;
+  color: $color-navbar;
+  font-weight: $font-weight-bold;
+  position: relative;
+  overflow: hidden;
+  display: block;
+  height: 39px;
+  z-index: 1;
+
+  span {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-bold;
+  }
+
+  &.btn {
+    background-color: transparent;
+  }
+
+  &.fa {
+    text-indent: 2em;
+
+    &:before {
+      color: $color-icon-navbar;
+      font-weight: $font-weight-normal;
+      position: absolute;
+      left: 1em;
+      top: 0;
+      line-height: 39px;
+      transform: translateX(-50%);
+      transition: transform .5s ease-in-out;
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+.admin-nav-hidden {
+  padding-left: $width-sidebar-collapsed;
+
+  .admin-nav,
+  .admin-nav-footer {
+    width: $width-sidebar-collapsed;
+  }
+
+  .text {
+    transform: translateX(-50px);
+    display: none;
+  }
+
+  .admin-login-nav a {
+    text-overflow: clip;
+  }
+
+  .brand-link {
+    overflow: hidden;
+
+    img {
+      max-width: 125px;
+    }
+  }
+
+  .admin-nav-menu {
+    li {
+      &.selected:not(:hover) > ul  {
+        visibility: hidden;
+      }
+
+      &.selected:not(:hover) .admin-subnav {
+        display: none;
+      }
+    }
+  }
+
+  .admin-nav-menu .selected li {
+    padding-left: 0;
+  }
+}
+
 nav.menu {
   ul {
     list-style: none;
@@ -26,16 +111,27 @@ nav.menu {
 }
 
 .admin-nav {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-sticky;
+  width: $width-sidebar;
   border-right: $border-sidebar;
   background: $color-sidebar-bg;
-  z-index: $zindex-sticky;
+
+  @media print {
+    display: none
+  }
 }
 
 .admin-nav-header {
   background-color: $color-white;
   border-bottom: 1px solid $color-border;
+  border-right: 1px solid $color-border;
   text-align: center;
   padding: 0 1.25em;
+  width: $width-sidebar;
   // Using line height for proper vertical centering.
   // As line height does not take the border width into account we need to subtract it.
   line-height: $main-header-height - 1px;
@@ -73,56 +169,13 @@ nav.menu {
     }
 
     &:not(.selected):not(:hover) > ul {
-      display: none;
-    }
-
-    &:not(.selected) {
-      position: relative;
-
-      // flyout nav
-      > ul {
-        position: absolute;
-        top: 0;
-        left: 100%;
-        width: $width-sidebar-flyout;
-        margin-left: 0;
-        background: $color-white;
-        box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
-        border-radius: 0 4px 4px 4px;
-        border: 1px solid $color-border;
-        @include caret($direction: left, $color-caret: $color-white);
-
-      &:before {
-        z-index: 1;
-        top: 1.5em;
-      }
-
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        border-width: 1em 1em;
-        border-style: solid;
-        border-color: transparent;
-        border-right-color: $color-border;
-        left: -2.1em;
-        top: 1.5em;
-        margin-top: -1em;
-      }
-
-      > li {
-        background: $color-white;
-
-        a {
-          font-weight: $font-weight-bold;
-        }
-      }
-     }
+      visibility: hidden;
     }
   }
 
   a {
     display: block;
+    min-height: 39px;
     padding: $padding-y-navbar $padding-x-navbar;
     color: $color-navbar;
     font-weight: $font-weight-bold;
@@ -177,8 +230,58 @@ nav.menu {
   }
 }
 
+.admin-nav-menu li:not(.selected),
+.admin-nav-hidden .admin-nav-menu li.selected:hover {
+  position: relative;
+
+  // flyout nav
+  > ul {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: $width-sidebar-flyout;
+    margin-left: 0;
+    background: $color-white;
+    box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 0 4px 4px 4px;
+    border: 1px solid $color-border;
+    @include caret($direction: left, $color-caret: $color-white);
+
+  &:before {
+    z-index: 1;
+    top: 1.5em;
+    pointer-events: none;
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    border-width: 1em 1em;
+    border-style: solid;
+    border-color: transparent;
+    border-right-color: $color-border;
+    left: -2.1em;
+    top: 1.5em;
+    margin-top: -1em;
+    pointer-events: none;
+  }
+
+  > li {
+    background: $color-white;
+
+    a {
+      font-weight: $font-weight-bold;
+    }
+  }
+ }
+}
+
 .admin-nav-footer {
+  width: $width-sidebar;
   background-color: $color-navbar-footer-bg;
+  border-top: $border-sidebar;
+  border-right: $border-sidebar;
 
   a {
     color: $color-navbar-footer;
@@ -191,14 +294,40 @@ nav.menu {
 
 .admin-locale-selection {
   margin: 1em;
+  position: relative;
+
+  &::after {
+    content: "\f0ac";
+    font-family: "FontAwesome";
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: .5rem 0 .5rem .25rem;
+    z-index: -1;
+  }
+
+  .admin-nav-hidden & {
+    .js-locale-selection.custom-select {
+      background-color: transparent;
+      background-position: 1.5rem center;
+      background-size: 8px 9px;
+      border: 0;
+      opacity: .6;
+      position: relative;
+      overflow: hidden;
+      text-indent: 1rem;
+      z-index: 1;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
 }
 
 .admin-nav.fits .admin-nav-footer {
   position: fixed;
   bottom: 0;
-  width: $width-sidebar;
-  border-top: $border-sidebar;
-  border-right: $border-sidebar;
 }
 
 .admin-login-nav {
@@ -226,4 +355,8 @@ nav.menu {
 
 .brand-link {
   display: block;
+
+  img {
+    max-width: 125px;
+  }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -169,6 +169,8 @@ $actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-act
 //--------------------------------------------------------------
 $width-sidebar:                  200px !default;
 $width-sidebar-flyout:           225px !default;
+$width-sidebar-collapsed:        52px !default;
+$sidebar-transition:             250ms ease-in !default;
 $border-sidebar:                 1px solid $color-sidebar-border !default;
 
 // Main

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -1,11 +1,15 @@
 .main-header {
   display: flex;
   align-items: center;
-  padding: 15px $grid-gutter-width;
   background-color: $color-header-bg;
+  padding: ($grid-gutter-width / 2) $grid-gutter-width;
   border-bottom: 1px solid $color-border;
   height: $main-header-height;
 
+  .admin-nav-hidden & {
+    margin-left: ($width-sidebar - $width-sidebar-collapsed);
+  }
+
   @media print { display: none }
 }