pre deploy'

resources/sass/components/nav.scss

@@ -1,16 +1,67 @@
 
 nav {
-    background-color: $medium;
-    height: 4.5rem;
+    background-color: $mediumDark;
+    height: 100vh;
+    width: 15rem;
+    flex-shrink: 0;
+    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
 
-    .site-logo {
-        width: 3rem;
-        fill: $dark;
-        transition: fill 0.2s;
+    hr {
+        width: 90%;
+        border-radius: 1px;
+        border: 1px solid $dark;
+    }
 
-        &:hover {
-            fill: $mediumDark;
+    .nav-item {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: $light;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+
+        svg {
+            margin: 0 1rem;
             transition: fill 0.2s;
         }
+
+        &:hover {
+            color: $dark;
+            background-color: $light;
+            transition: color 0.2s, background-color 0.2s;
+
+            svg {
+                fill: $dark;
+                transition: fill 0.2s;
+            }
+        }
+
+        //&:visited {
+        //    color: $dark;
+        //}
+    }
+}
+
+.site-logo {
+    width: 3rem;
+    fill: $light;
+    transition: fill 0.2s;
+
+    &:hover {
+        fill: $dark;
+        transition: fill 0.2s;
+    }
+}
+
+
+.site-logo-main {
+    @extend .site-logo;
+    display: block;
+    padding: 1rem 2rem;
+    width: 100%;
+
+    svg {
+
+        width: 100%;
     }
 }