Merge pull request #3402 from benmanley/toolbar-toggle

feat(toolbar): add button to hide/show toolbar

public/css/header.styl

@@ -2,16 +2,18 @@
 -------------------- */
 .header-wrap
   width: 100% // this is for the sticky
-  padding: 46px 0 0 0 // add padding-top when navbar is fixed
-  @media screen and (max-width:768px)  // remove padding-top when navbar is static
-    padding: 0
   z-index: 100
+  padding: 46px 0 0 0 // add padding-top when toolbar is fixed
   background-color: darken($color-herobox, 8%)
   border-bottom: 1px solid rgba(0,0,0,0.2)
   // margin-top: -1px
   overflow-y: hidden
   overflow-x: auto
   // position relative
+  @media screen and (max-width:768px)  // remove padding-top when toolbar is static
+    padding: 0 
+.toolbar.active ~ .header-wrap
+  padding: 0 // remove padding when toolbar is hidden
  
 /* login/menu buttons
 --------------------- */

public/css/menu.styl

@@ -1,11 +1,64 @@
-// Custom styles for the menu aka toolbar aka navbar
+// Top level navigation bar – toolbar – menu – nav
 .toolbar
-  width:100%;
   top:0
-  left:0
+  right:0
+  width: 100%
   z-index:998
   background-color: $color-toolbar
   border-bottom: 1px solid darken($color-herobox, 12%)
+.toolbar.active
+  width: auto
+@media screen and (min-width:768px)
+  .toolbar
+    position:fixed
+// Button to toggle toolbar visibility
+.toolbar-toggle
+  float:right
+  padding: 0.9em 0.3em
+  overflow: hidden
+  width: 1.6em
+  z-index:4000
+  border:none
+  border-left: 1px solid darken($color-toolbar, 16.18%)
+  background:none
+  background-color: darken($color-toolbar, 3.82%)
+  span
+    display: inline-block
+    color: darken($color-toolbar, 38.2%)
+  .glyphicon
+    animation: toggle-open 0.382s linear both
+  .toggle-text
+    display: none
+    padding-left: 0.382em
+  &:focus, &:active
+    outline:none
+  &:hover, &.active, &:focus
+    width: auto
+    padding-left: 0.618em
+    padding-right: 0.618em
+    .toggle-text
+      display: inline-block
+      padding-left: 0.382em
+    .toggle-open
+      display:none
+  &.active
+    span
+      color: darken($color-toolbar, 70%)
+    .toggle-close
+      display:none
+    .toggle-open
+      display: inline-block
+  &:hover, &:focus
+    background-color: darken($color-toolbar, 3.82%)
+    border-left: 1px solid darken($color-toolbar, 16.18%)
+  &.active, &:focus.active
+    background-color: darken($color-herobox, 8%)
+    .glyphicon
+      animation: toggle-close 0.382s linear both
+  &:focus.active
+    border-left: 1px solid darken($color-toolbar, 38.2%)
+    border-bottom: 1px solid darken($color-toolbar, 38.2%)
+.toolbar-container
   > ul > li
     display: inline-block
 // Mobile menu button
@@ -73,9 +126,6 @@
 .toolbar-sync, .toolbar-settings
   @extend $hrpg-button
   hrpg-button-color-mixin($color-toolbar)
-@media screen and (min-width:768px)
-  .toolbar
-    position:fixed
 // Notifications icon and dropdown
 .toolbar-notifs
   @extend $hrpg-button
@@ -114,6 +164,8 @@
 .toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button
   @extend $hrpg-button-call-to-action
 @media screen and (max-width:768px)
+  .toolbar-toggle
+    display: none
   .toolbar-mobile, .toolbar-settings
     .toolbar-submenu
       padding-left: 1em
@@ -124,3 +176,14 @@
           padding-left: 0em
   .toolbar-subscribe
     display:none
+//Animations
+@keyframes toggle-close
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(45deg)
+@keyframes toggle-open
+  0%
+    transform: rotate(45deg)
+  100%
+    transform: rotate(0deg)

views/shared/header/menu.jade

@@ -1,4 +1,9 @@
-nav.toolbar(ng-controller='AuthCtrl')
+nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}')
+  button.toolbar-toggle(ng-click='isToolbarHidden = !isToolbarHidden', ng-class='{active: isToolbarHidden}')
+    span.glyphicon.glyphicon-remove-circle
+    span.toggle-text.toggle-close=env.t('close')
+    span.toggle-text.toggle-open=env.t('menu')
+  .toolbar-container(ng-if='!isToolbarHidden')
     ul.toolbar-mobile-nav
       li.toolbar-mobile
         a(ng-click='expandMenu("mobile")', ng-class='{active: _expandedMenu=="mobile"}')
@@ -90,9 +95,9 @@ nav.toolbar(ng-controller='AuthCtrl')
               a(ui-sref='options.inventory.mounts')=env.t('mounts')
             li
               a(ui-sref='options.inventory.equipment')=env.t('equipment')
-  ul.toolbar-subscribe  
+    ul.toolbar-subscribe(ng-if='!user.purchased.plan.customerId')  
       li.toolbar-subscribe-button
-      button(ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe')
+        button(ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe')
     ul.toolbar-options  
       li.toolbar-notifs
         a(ng-click='expandMenu("notifs")')