From f4497f1bda59252b37dd9f033b9e7672ed41d9b8 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.alcantara@kaleidos.net>
Date: Tue, 24 Jun 2014 13:48:48 +0200
Subject: [PATCH] open nav animation

---
 app/partials/layout.jade                    |  2 ++
 app/partials/search-issues.jade             |  9 +++++++
 app/partials/views/modules/project-nav.jade |  6 +++++
 app/styles/layout/base.scss                 | 30 +++++++++++++++++++++
 app/styles/main.scss                        |  1 +
 app/styles/modules/project-nav.scss         | 14 ++++++++++
 6 files changed, 62 insertions(+)
 create mode 100644 app/partials/views/modules/project-nav.jade
 create mode 100644 app/styles/modules/project-nav.scss

diff --git a/app/partials/layout.jade b/app/partials/layout.jade
index 21558079..e02a7b28 100644
--- a/app/partials/layout.jade
+++ b/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
diff --git a/app/partials/search-issues.jade b/app/partials/search-issues.jade
index 497ca0ae..79c84c90 100644
--- a/app/partials/search-issues.jade
+++ b/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);
diff --git a/app/partials/views/modules/project-nav.jade b/app/partials/views/modules/project-nav.jade
new file mode 100644
index 00000000..d714e4e8
--- /dev/null
+++ b/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
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index b51cf262..7086484c 100644
--- a/app/styles/layout/base.scss
+++ b/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 {
diff --git a/app/styles/main.scss b/app/styles/main.scss
index c11421a6..3a4ed08b 100755
--- a/app/styles/main.scss
+++ b/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';
diff --git a/app/styles/modules/project-nav.scss b/app/styles/modules/project-nav.scss
new file mode 100644
index 00000000..adc81df7
--- /dev/null
+++ b/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;
+    }
+}