2 files changed, 62 insertions, 1 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 974d51e..8f0bfe6 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -22,4 +22,9 @@ $('.top').flickity({
   x3: 15
 }
 
-});
\ No newline at end of file
+});
+
+$('.index').click( function(){
+    $('body').toggleClass('navopen');
+});
+
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 258b0ae..4a73f15 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -26,6 +26,26 @@
         overflow: hidden;
     }
     
+    .menu {
+        position: fixed;
+        height: 100vh;
+        width: 30vw;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        transform: translateX(-30vw);
+        padding: 30px 5px 5px 5px;
+        transition: 150ms transform cubic-bezier(0, 0, 0, 1);
+    }
+    
+    .navopen .menu {
+        transform: translateX(0vw);
+    }
+    
+    .navopen .item {
+        transform: translateX(30vw);
+    }
+    
     div,
     span {
         display: inline-block;
@@ -38,6 +58,7 @@
         display: flex;
         -webkit-flex-flow: column wrap;
         flex-flow: column wrap;
+        transition: 150ms transform cubic-bezier(0, 0, 0, 1);
     }
     
     nav {
@@ -47,6 +68,10 @@
         width: 100%;
         padding: 5px;
         z-index: 3;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
     }
     
     nav span {
@@ -54,6 +79,13 @@
         width: 100%;
     }
     
+    .index:hover,
+    .navopen .index {
+        color: white;
+        cursor: pointer;
+        background: black;
+    }
+    
     nav span div:first-child {
         float: left;
     }
@@ -254,6 +286,23 @@
     }
     
     @media (max-width:480px) {
+        nav {
+            font-size: 11px;
+            font-family: 'Roboto';
+            font-weight: 400;
+        }
+        nav span div:first-child {
+            font-size: 0;
+        }
+        nav span {
+            border: 0;
+        }
+        nav img {
+            width: 12px;
+        }
+        nav span div:nth-child(2) {
+            display: none;
+        }
         .cell,
         button {
             height: 50vh;
@@ -276,4 +325,11 @@
         .headings {
             display: none;
         }
+        .menu {
+            width: 45vw;
+            transform: translateX(-45vw);
+        }
+        .navopen .item {
+            transform: translateX(45vw);
+        }
     }
\ No newline at end of file