Showing overflowing menu items in header on mobile. Added search to sidebar (WIP). Added breakpoint.

assets/components/header/header.vue

@@ -1,11 +1,6 @@
 <template>
 	<header class="header">
 		<div class="header-nav">
-			<div
-				class="sidebar-toggle noselect"
-				@click.stop="toggleSidebar"
-			><Icon icon="menu" /></div>
-
 			<router-link
 				to="/"
 				class="logo-link"
@@ -46,20 +41,6 @@
 						</router-link>
 					</li>
 
-					<li class="nav-item">
-						<router-link
-							v-slot="{ href, isActive, navigate }"
-							to="/movies"
-						>
-							<a
-								class="nav-link"
-								:href="href"
-								:class="{ active: isActive }"
-								@click="navigate"
-							>Movies</a>
-						</router-link>
-					</li>
-
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
@@ -73,11 +54,30 @@
 							>Tags</a>
 						</router-link>
 					</li>
+
+					<li class="nav-item">
+						<router-link
+							v-slot="{ href, isActive, navigate }"
+							to="/movies"
+						>
+							<a
+								class="nav-link"
+								:href="href"
+								:class="{ active: isActive }"
+								@click="navigate"
+							>Movies</a>
+						</router-link>
+					</li>
 				</ul>
 			</nav>
 		</div>
 
 		<div class="header-section">
+			<div
+				class="sidebar-toggle noselect"
+				@click.stop="toggleSidebar"
+			><Icon icon="menu" /></div>
+
 			<div class="header-toggles">
 				<Icon
 					v-show="!sfw"
@@ -209,6 +209,7 @@ export default {
     display: flex;
     align-items: center;
     height: 100%;
+	overflow: hidden;
 }
 
 .header-section {
@@ -244,7 +245,7 @@ export default {
     height: 100%;
     display: inline-block;
     text-decoration: none;
-    margin: 0 1rem 0 0;
+    margin: -.25rem 1rem 0 0;
 }
 
 .header-logo {
@@ -356,18 +357,29 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint) {
-	.nav {
-        display: none;
-    }
-
+@media(max-width: $breakpoint-small) {
     .sidebar-toggle {
         display: flex;
     }
 
-	.header-logo {
-		padding: 0 0 0 .5rem;
+	.logo-link {
+		margin: -.25rem .75rem 0 0;
 	}
+
+	.nav-link {
+		padding: 0 .75rem;
+	}
+
+    .search-compact {
+        display: none;
+    }
+
+	.header-toggles {
+		display: none;
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
 }
 
 @media(max-width: $breakpoint-nano) {