project nav list

app/partials/search-issues.jade

@@ -16,7 +16,7 @@ block content
     script.
         setTimeout(function () {
             document.body.className = 'open-project-nav';
-        }, 2000);
+        }, 1000);
 
         setTimeout(function () {
             document.body.className = 'closed-project-nav';

app/partials/views/modules/project-nav.jade

@@ -4,3 +4,20 @@ nav.project-nav
         fieldset
             input(type="text" placeholder="Search in...")
             a.icon.icon-search
+
+    ul.projects-list
+        li
+            a(href="") Decathlon
+                span.icon.icon-arrow-right
+
+        li
+            a.active(href="") Yump
+                span.icon.icon-arrow-right
+
+        li
+            a(href="") Taiga
+                span.icon.icon-arrow-right
+
+        li
+            a(href="") Wine and people
+                span.icon.icon-arrow-right

app/styles/modules/project-nav.scss

@@ -1,14 +1,58 @@
 .project-nav {
     @include transform(translate3d(-300px, 0, 0));
-    background-color: $blackish;
+    background-color: #232323;
     height: 100%;
     left: 0;
     overflow: hidden;
+    padding: 2rem 1rem;
     position: fixed;
     top: 0;
     width: 300px;
     z-index: 99;
     h1 {
         color: $white;
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+    input {
+        background-color: $gray;
+        color: $whitish;
+    }
+    .icon-search {
+        position: absolute;
+        right: 10px;
+        top: 6px;
+    }
+    ul {
+        margin-top: 1rem;
+    }
+}
+
+.projects-list {
+    a {
+        @extend %large;
+        color: $whitish;
+        display: block;
+        font-family: 'ostrichSans';
+        padding: 1rem;
+        text-transform: uppercase;
+        width: 100%;
+        &.active,
+        &:hover {
+            @include transition (background-color .3s linear);
+            background-color: $gray;
+            .icon {
+                @include transition (opacity .3s linear);
+                opacity: 1;
+            }
+        }
+    }
+    .icon {
+        color: $whitish;
+        float: right;
+        opacity: 0;
+    }
+    li {
+        border-bottom: 2px solid $gray;
     }
 }