Added compact sidebar. Added tag sections and posters.

assets/components/header/header.vue

@@ -1,6 +1,12 @@
 <template>
     <header class="header">
         <div class="header-nav">
+            <Icon
+                icon="menu"
+                class="sidebar-toggle"
+                @click.native.stop="toggleSidebar"
+            />
+
             <router-link
                 to="/home"
                 class="logo-link"
@@ -8,11 +14,6 @@
                 <Icon
                     icon="logo"
                 />
-
-                <Icon
-                    icon="logo_t"
-                    class="logo-compact"
-                />
             </h1></router-link>
 
             <nav class="nav">
@@ -148,6 +149,12 @@ export default {
     components: {
         Search,
     },
+    props: {
+        toggleSidebar: {
+            type: Function,
+            default: null,
+        },
+    },
     data() {
         return {
             searching: false,
@@ -170,6 +177,7 @@ export default {
 @import 'theme';
 
 .header {
+    height: 3rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -182,6 +190,7 @@ export default {
 .header-nav {
     display: flex;
     align-items: center;
+    height: 100%;
 }
 
 .header-section {
@@ -191,6 +200,19 @@ export default {
     flex-direction: row;
 }
 
+.sidebar-toggle {
+    display: none;
+    fill: var(--shadow);
+    padding: 0 1rem;
+    width: 1.75rem;
+    height: 100%;
+
+    &:hover {
+        fill: var(--primary);
+        cursor: pointer;
+    }
+}
+
 .logo-link {
     color: inherit;
     display: inline-block;
@@ -198,18 +220,15 @@ export default {
 }
 
 .logo {
+    height: 100%;
     display: inline-block;
-    padding: .75rem 0 .75rem 1rem;
+    padding: 0 0 0 1rem;
     margin: 0 1rem 0 0;
 
     .icon {
         width: 6rem;
         height: 1.5rem;
     }
-
-    .logo-compact {
-        display: none;
-    }
 }
 
 .nav {
@@ -264,21 +283,29 @@ export default {
     }
 }
 
+.search-compact {
+    display: none;
+    height: 100%;
+}
+
 .search-button {
     height: 100%;
-    padding: 0 1rem;
+    padding: .25rem 1rem 0 1rem;
     background: none;
     border: none;
     outline: none;
-    margin: .2rem 0 0 0;
 
     .icon {
         fill: var(--shadow);
     }
-}
 
-.search-compact {
-    display: none;
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: var(--shadow-strong);
+        }
+    }
 }
 
 @media(max-width: $breakpoint2) {
@@ -289,33 +316,19 @@ export default {
     .search-compact {
         display: flex;
     }
+
+    .header-toggles {
+        margin: 0;
+    }
 }
 
 @media(max-width: $breakpoint0) {
-    .nav-label {
+    .nav {
         display: none;
     }
 
-    .nav .nolist {
-        display: flex;
-    }
-
-    .nav,
-    .nav-item {
-        flex-grow: 1;
-    }
-
-    .logo {
-        margin: 0 .5rem 0 0;
-
-        .icon {
-            display: none;
-        }
-
-        .icon.logo-compact {
-            width: 1.5rem;
-            display: inline-block;
-        }
+    .sidebar-toggle {
+        display: inline-block;
     }
 }
 </style>