add small menu

resources/sass/components/nav.scss

@@ -4,7 +4,14 @@ nav {
     height: 100vh;
     width: 15rem;
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
     box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
+    transition: width $transition-delay;
+
+    &.small {
+        width: 5.5rem;
+    }
 
     hr {
         width: 90%;
@@ -20,6 +27,10 @@ nav {
         padding-top: 1rem;
         padding-bottom: 1rem;
 
+        span {
+            overflow: hidden;
+        }
+
         svg {
             margin: 0 1rem;
             width: 3rem;
@@ -55,15 +66,38 @@ nav {
     }
 }
 
+.navhidden {
+    width: 0;
+}
+
 
 .site-logo-main {
     @extend .site-logo;
     display: block;
-    padding: 1rem 2rem;
-    width: 100%;
+    margin: 1rem;
+    width: 13rem;
+    transition: width $transition-delay;
 
     svg {
 
         width: 100%;
     }
+
+    &.small {
+        //padding-bottom: 10rem;
+        width: 3.5rem;
+    }
+}
+
+.nav-toggle {
+    @extend .site-logo;
+    align-self: center;
+
+    svg {
+        transition: transform $transition-delay;
+    }
+
+    svg.small {
+            transform: rotate(-180deg);
+    }
 }