Implement mobile usertools

jet/static/jet/css/_header.scss

@@ -34,10 +34,6 @@
 
   &.initialized {
     display: block;
-
-    @include for-mobile {
-      display: none;
-    }
   }
 }
 
@@ -58,18 +54,40 @@
     width: 175px;
     z-index: 1;
 
+    @include for-mobile {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 4;
+      width: auto;
+      color: $sidebar-link-color;
+      border: 0;
+      border-left: 1px solid $sidebar-contrast-background-color;
+      border-radius: 0;
+      transform: none;
+      transition: transform $transitions-duration;
+
+      body.scroll-to-bottom & {
+        transform: translate3d(0, -100%, 0);
+      }
+    }
+
     &.opened {
       background-color: $top-dropdown-background-color;
       border-color: transparent;
       color: $top-dropdown-text-color;
+
+      @include for-mobile {
+        border-radius: 0 0 0 4px;
+        border: 0;
+      }
     }
 
     li {
       display: block;
       list-style-type: none;
       margin: 0;
-      line-height: 30px;
-      padding: 0 10px 0 14px;
+      padding: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -77,6 +95,13 @@
 
     li.user-tools-welcome-msg {
       font-weight: bold;
+      padding: 0 10px 0 14px;
+      line-height: 30px;
+
+      @include for-mobile {
+        padding-left: 18px;
+        line-height: $sidebar-header-height;
+      }
 
       &:after {
         @include font-icon;
@@ -88,6 +113,13 @@
         vertical-align: middle;
         line-height: 30px;
         transition: color $transitions-duration;
+        margin-left: 5px;
+
+        @include for-mobile {
+          line-height: $sidebar-header-height;
+          font-size: 20px;
+          font-weight: bold;
+        }
       }
     }
 
@@ -104,8 +136,15 @@
       display: none;
 
       a, a:visited, a:hover {
+        display: block;
+        line-height: 30px;
+        padding: 0 14px;
         color: $top-dropdown-link-color;
         text-decoration: none;
+
+        @include for-mobile {
+          line-height: $sidebar-header-height;
+        }
       }
 
       a:hover {

jet/static/jet/css/_sidebar.scss

@@ -6,7 +6,7 @@
   top: 0;
   left: 0;
   bottom: 0;
-  z-index: 3;
+  z-index: 4;
   background-color: $sidebar-background-color;
   color: $sidebar-text-color;
   transition: background-color $transitions-duration;
@@ -34,7 +34,6 @@
     color: $sidebar-text-color;
     height: $sidebar-header-height;
     line-height: $sidebar-header-height;
-    padding: 0 20px;
     position: fixed;
     top: 0;
     right: 0;
@@ -46,26 +45,24 @@
       display: block;
 
       body.scroll-to-bottom & {
-        transform: translate3d(0, -$sidebar-header-height, 0);
+        transform: translate3d(0, -100%, 0);
       }
     }
 
-    &.sidebar-opened {
-      background-color: $sidebar-contrast-background-color;
-      color: $sidebar-contrast-text-color;
-    }
-
     &-menu {
       &, &:visited, &:hover {
+        display: inline-block;
         font-size: 14px;
         text-transform: uppercase;
         color: $sidebar-link-color;
+        line-height: $sidebar-header-height;
+        padding: 0 16px;
+        border-right: 1px solid $sidebar-contrast-background-color;
       }
 
       &-icon {
-        font-size: 20px;
+        font-size: 16px;
         vertical-align: middle;
-        margin-right: 10px;
       }
     }
   }
@@ -368,7 +365,7 @@
       left: $sidebar-width;
       bottom: 0;
       right: 0;
-      z-index: 4;
+      z-index: 5;
 
       @include for-mobile {
         left: 0;

jet/static/jet/css/_variables.scss

@@ -29,7 +29,7 @@ $phone-max-width: 480px;
  */
 
 $sidebar-width: 250px !default;
-$sidebar-header-height: 50px !default;
+$sidebar-header-height: 44px !default;
 
 $sidebar-background-color: #354052 !default;
 $sidebar-contrast-background-color: #2b3647 !default;