feature: new header and left-menu

src/styles/left-nav/_index.scss

@@ -1,40 +1,101 @@
 nav#main__menu {
-  height: calc(100vh - 72px);
+  height: 100vh;
 
   @media (max-width: 768px) {
     min-height: calc(100vh - 50px);
   }
-
+  
   .unread {
     font-weight: bolder;
   }
 
-  solid-route.menu,
-  solid-link.menu,
-  div.menu {
-  
-    .icon {
-      padding: 8px;
-      border-radius: 50%;
+  .menu-search {
+
+    form {
+      display: flex;
+
+      solid-form-placeholder-text {
+        display: contents;
+      }
     }
-    &:hover .icon,
-    &[active] .icon {
-      color: white;
+
+    input {
       background: var(--color-heading);
+      color: #D0D4DA;
+      margin-top: 0;
+      padding: 12px 13px;
+      height: 50px;
+      background-image: url("/images/calendar.svg");
+      background-position: right 12px top 50%;
+      background-repeat: no-repeat;
+      background-size: 14px;
+
+      /* https://css-tricks.com/almanac/selectors/p/placeholder/ */
+      &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+        color: #D0D4DA;
+      }
+
+      &::-moz-placeholder { /* Firefox 19+ */
+        color: #D0D4DA;
+      }
+
+      &:-moz-placeholder { /* Firefox 18- */
+        color: #D0D4DA;
+      }
+
+      &:focus {
+        background: #202B3C;
+        color: white;
+      }
     }
-    &[active]+.divider {
-      visibility: hidden;
+
+    button {
+      background: transparent;
+    }
+
+    input:focus ~ button {
+      background-color: red !important;
     }
   }
 
-  .sub-menu {
-    padding-bottom: 10px;
+  .menu-header {
+
+    &:not(:hover) .menu-options,
+    &:not(:hover) .menu-admin {
+      display: none;
+    }
+  }
+
+  .transform-up {
+    transform: rotateX(180deg);
+  }
+
+  .badge {
+    padding-top: 2px;
+    margin-right: 5px;
+  }
+
+  .icon {
+    padding: 3px;
+  }
+
+  .menu-admin {
+    position: absolute;
+    z-index: 3016;
+    left: 48px;
+    bottom: 37px;
+
+    @media (max-width: 768px) {
+      width: 100%;
+      left: 0;
+      height: 9vh;
+      top: 0;
+    }
   }
 
   /* Styles for the small icon */
   .sub-menu-icon {
     margin-left: 3px;
-    margin-right: 3px;
     opacity: 0.8;
     width: 12px;
     >div {
@@ -44,12 +105,12 @@ nav#main__menu {
 
   .sub-menu-name {
     margin-right: 15px;
+    margin-left: 3px;
     vertical-align: middle;
   }
 
-  .menu-chevron {
+  .menu-options {
     float: right;
-    margin-top: 8px;
   }
 
 
@@ -86,10 +147,10 @@ nav#main__menu {
     opacity: 0.2;
   }
 
-  .create {
+  .empty {
     display: flex;
     flex-wrap: wrap;
-    padding-left: 20px;
+    padding-left: 13px;
     width: 87%;
   }