pre deploy'

resources/sass/app.scss

@@ -8,9 +8,10 @@
 @import "components/elements";
 @import "components/main";
 @import "components/nav";
-@import "components/sidebar";
+@import "components/topbar";
 @import "components/avatar";
 @import "components/alert_box";
+@import "components/search_box";
 
 @import "pages/auth";
 @import "pages/memos";

resources/sass/components/avatar.scss

@@ -6,7 +6,7 @@
     border-radius: 50%;
     color: $light;
     font-weight: bold;
-    text-underline: none;
+    text-decoration: none;
 
     &-small {
         $size: 3rem;
@@ -29,3 +29,7 @@
         font-size: $size *2/3;
     }
 }
+
+.avatar-box {
+    text-decoration: none;
+}

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%;
     }
 }

resources/sass/components/search_box.scss

@@ -0,0 +1,14 @@
+.search-box {
+    display: flex;
+    align-items: center;
+
+    button {
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+
+    svg {
+        width: 2.4rem;
+    }
+}

resources/sass/components/sidebar.scss

@@ -1,6 +0,0 @@
-aside {
-    background-color: $mediumLight;
-    height: calc(100vh - 4.5rem);
-    width: 15rem;
-    flex-shrink: 0;
-}

resources/sass/components/topbar.scss

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