feat(drawer): Completely new design #10

src/assets/_scss/modules/_vars.scss

@@ -16,7 +16,7 @@ $breakpoint-xx-large: 1444px - 1px;
 // PALLETE
 //----------------------------------*/
 
-$background-color: #fff;
+$background-color: #FFF;
 $text-color: #333;
 $muted-text-color: #B3B3B3;
 $line-breaks-color: #F2F2F2;
@@ -38,7 +38,8 @@ $text-font-family: "Droid Serif", Georgia, Cambria, "Times New Roman",
 //----------------------------------*/
 
 $drawer-background-color: #232323;
-$drawer-text-color: #fff;
+$drawer-text-color: #909090;
+$drawer-hover-color: #DDD;
 
 //----------------------------------*\
 // INPUTS

src/assets/_scss/partials/_drawer.scss

@@ -37,18 +37,18 @@
   text-align: center;
   vertical-align: middle;
   background-color: $drawer-background-color;
-  color: $drawer-text-color;
+  color: $background-color;
   transition: opacity .3s linear;
 
   &:hover,
   &:focus {
     outline: 0;
-    color: $drawer-text-color;
   }
 
   &.drawer-button-hidden,
   .drawer-transition & {
     opacity: 0;
+    pointer-events: none;
   }
 
   .drawer-open & {
@@ -61,8 +61,8 @@
   height: 100%;
   overflow: auto;
   overflow-scrolling: touch;
-  box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.3);
-  padding: 15px 10%;
+  box-shadow: inset -1px 0 3px rgba(0, 0, 0, .3);
+  padding: 15px 0;
 
   &::scrollbar {
     display: none;
@@ -80,27 +80,65 @@
   list-style: none;
 }
 
+.drawer-list-divider {
+  display: block;
+  margin: 10px 20px;
+  border-top: 1px solid #0a0a0a;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
+  height: 8px;
+}
+
 .drawer-list-item {
-  line-height: 1.7;
+  font-family: $title-font-family;
+  font-weight: 700;
+  font-size: 11px;
+  color: $drawer-text-color;
+  line-height: 1;
+
+  &.drawer-list-title {
+    text-transform: uppercase;
+    margin: 0 20px 10px;
+    opacity: .7;
+  }
 
   a {
-    font-family: $title-font-family;
-    font-weight: 700;
-    font-size: 11px;
-    color: $drawer-text-color;
+    position: relative;
+    display: block;
+    padding: 5px 20px;
+    font-family: inherit;
+    color: inherit;
     text-decoration: none;
-    opacity: .7;
-    transition: opacity .3s ease-in-out;
+    transition: color .3s;
+    -webkit-backface-visibility: hidden;
+
+    &:before {
+      content:'';
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background-color: $primary-color;
+      transition: width .3s;
+    }
 
     &:focus,
     &:hover {
-      color: $drawer-text-color;
-      opacity: 1;
+      color: $drawer-hover-color;
+      background-color: rgba(0, 0, 0, .2);
+
+      &:before {
+        width: 4px;
+      }
     }
 
     .fa {
-      margin-right: 7px;
+      color: $drawer-text-color;
+      vertical-align: sub;
+      text-align: left;
       font-size: 22px;
+      width: 1.2857142857142858em; //fixed width icon
     }
   }
 }

src/partials/custom/navigation.hbs

@@ -1,20 +1,46 @@
-{{! Template
+{{! Templates
 
+Link
+==============
 <li class="drawer-list-item">
-  <a href="#" title="My awesome menu link">
-    My menu link
+  <a href="#" title="Follow me on twitter!">
+    <i class="fa fa-twitter"></i> Follow me
   </a>
 </li>
 
+Divider
+==============
+<li class="drawer-list-divider"></li>
+
+Title
+==============
+<li class="drawer-list-item drawer-list-title">
+  Follow me
+</li>
+
 }}
 
 <li class="drawer-list-item">
   <a href="/">
-    <i class="fa fa-home fa-lg fa-fw"></i>Home
+    <i class="fa fa-home"></i>Home
   </a>
 </li>
 <li class="drawer-list-item">
   <a href="{{@blog.url}}/rss/">
-    <i class="fa fa-rss fa-lg fa-fw"></i>Subscribe to Feed
+    <i class="fa fa-rss"></i>Subscribe to Feed
+  </a>
+</li>
+<li class="drawer-list-divider"></li>
+<li class="drawer-list-item drawer-list-title">
+  Follow me
+</li>
+<li class="drawer-list-item">
+  <a href="http://twitter.com" target="_blank">
+    <i class="fa fa-twitter"></i>Twitter
+  </a>
+</li>
+<li class="drawer-list-item">
+  <a href="http://github.com" target="_blank">
+    <i class="fa fa-github"></i>Github
   </a>
 </li>