add small menu

resources/sass/components/_elements.scss

@@ -12,7 +12,7 @@ input {
     font-size: 1.6rem;
     font-family: $fontMain;
     padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
+    border-radius: 0.2rem;
 
     &:focus {
         background-color: $white;

resources/sass/components/boxes.scss

@@ -1,6 +0,0 @@
-.card {
-    display: inline-block;
-    padding: 1rem;
-    box-shadow: 1px 1px 2px $grey;
-    border-radius: 2px;
-}

resources/sass/components/main.scss

@@ -8,7 +8,3 @@ main {
     width: 100%;
     height: calc(100vh - 4.5rem);
 }
-
-.main-top {
-
-}

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);
+    }
 }

resources/sass/components/topbar.scss

@@ -1,6 +1,6 @@
 .topbar {
     background-color: $medium;
-    width: calc(100vw - 15rem);
+    width: initial;
     box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
 
     svg {