open nav animation

app/partials/layout.jade

@@ -9,6 +9,8 @@ html(lang="en")
       link(rel="stylesheet", href="/styles/main.css")
       block head
   body
+      include views/modules/project-nav
       include views/modules/nav
+
       div.master
           block content

app/partials/search-issues.jade

@@ -12,3 +12,12 @@ block content
             include views/components/mainTitle
             include views/modules/search-filter
             include views/modules/search-result-issues-table
+
+    script.
+        setTimeout(function () {
+            document.body.className = 'open-project-nav';
+        }, 2000);
+
+        setTimeout(function () {
+            document.body.className = 'closed-project-nav';
+        }, 6000);

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

@@ -0,0 +1,6 @@
+nav.project-nav
+    h1 Your projects
+    form
+        fieldset
+            input(type="text" placeholder="Search in...")
+            a.icon.icon-search

app/styles/layout/base.scss

@@ -11,14 +11,44 @@ body {
     -webkit-font-smoothing: antialiased; // Fix for webkit renderin
     height: 100%;
     min-height: 100%;
+    overflow-x: hidden; // open-project-nav
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     width: 100%;
+    &.open-project-nav {
+        .project-nav {
+            @include transform(translate3d(0, 0, 0));
+            @include transition (transform 1s ease);
+        }
+        .master {
+            @include transform(translate3d(300px, 0, 0));
+            @include transition (transform 1s ease);
+        }
+        .menu {
+            @include transform(translate3d(300px, 0, 0));
+            @include transition (transform 1s ease);
+        }
+    }
+    &.closed-project-nav {
+        .project-nav {
+            @include transform(translate3d(-300px, 0, 0));
+            @include transition (transform 1s ease);
+        }
+        .master {
+            @include transform(translate3d(0, 0, 0));
+            @include transition (transform 1s ease);
+        }
+        .menu {
+            @include transform(translate3d(0, 0, 0));
+            @include transition (transform 1s ease);
+        }
+    }
 }
 
 .master {
     height: 100%;
     min-height: 100%;
+    position: relative;
 }
 
 .wrapper {

app/styles/main.scss

@@ -28,6 +28,7 @@ $prefix-for-spec:      true;
 
 //Modules
 @import 'modules/nav';
+@import 'modules/project-nav';
 @import 'modules/sprints';
 @import 'modules/burndown';
 @import 'modules/backlog-table';

app/styles/modules/project-nav.scss

@@ -0,0 +1,14 @@
+.project-nav {
+    @include transform(translate3d(-300px, 0, 0));
+    background-color: $blackish;
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    width: 300px;
+    z-index: 99;
+    h1 {
+        color: $white;
+    }
+}