pre deploy'

public/css/app.css

@@ -531,26 +531,71 @@ main {
 }
 
 nav {
-  background-color: #53900F;
-  height: 4.5rem;
+  background-color: #1F6521;
+  height: 100vh;
+  width: 15rem;
+  flex-shrink: 0;
+  box-shadow: inset -3px -2px 3px rgba(0, 0, 0, 0.2);
 }
 
-nav .site-logo {
-  width: 3rem;
+nav hr {
+  width: 90%;
+  border-radius: 1px;
+  border: 1px solid #1F2605;
+}
+
+nav .nav-item {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #D6CE15;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+nav .nav-item svg {
+  margin: 0 1rem;
+  transition: fill 0.2s;
+}
+
+nav .nav-item:hover {
+  color: #1F2605;
+  background-color: #D6CE15;
+  transition: color 0.2s, background-color 0.2s;
+}
+
+nav .nav-item:hover svg {
   fill: #1F2605;
   transition: fill 0.2s;
 }
 
-nav .site-logo:hover {
-  fill: #1F6521;
+.site-logo,
+.site-logo-main {
+  width: 3rem;
+  fill: #D6CE15;
   transition: fill 0.2s;
 }
 
-aside {
-  background-color: #A4A71E;
-  height: calc(100vh - 4.5rem);
-  width: 15rem;
-  flex-shrink: 0;
+.site-logo:hover,
+.site-logo-main:hover {
+  fill: #1F2605;
+  transition: fill 0.2s;
+}
+
+.site-logo-main {
+  display: block;
+  padding: 1rem 2rem;
+  width: 100%;
+}
+
+.site-logo-main svg {
+  width: 100%;
+}
+
+.topbar {
+  background-color: #53900F;
+  width: calc(100vw - 15rem);
+  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.2);
 }
 
 .avatar {
@@ -561,7 +606,7 @@ aside {
   border-radius: 50%;
   color: #D6CE15;
   font-weight: bold;
-  text-underline: none;
+  text-decoration: none;
 }
 
 .avatar-small {
@@ -582,6 +627,10 @@ aside {
   font-size: 5.3333333333rem;
 }
 
+.avatar-box {
+  text-decoration: none;
+}
+
 .alert-box,
 .alert-error,
 .alert-success {
@@ -603,6 +652,21 @@ aside {
   color: #ffffff;
 }
 
+.search-box {
+  display: flex;
+  align-items: center;
+}
+
+.search-box button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.search-box svg {
+  width: 2.4rem;
+}
+
 .auth {
   max-width: 350px;
   width: 100%;