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

assets/components/container/container.vue

@@ -96,11 +96,11 @@ export default {
 .slide-enter-active,
 .slide-leave-active {
 	&.sidebar-container {
-		transition: background .2s ease-in-out;
+		transition: background .15s ease-in-out;
 	}
 
 	.sidebar {
-		transition: transform .2s ease-in-out;
+		transition: transform .15s ease-in-out;
 	}
 }
 
@@ -111,7 +111,7 @@ export default {
 	}
 
 	.sidebar {
-		transform: translate(-100%, 0);
+		transform: translate(100%, 0);
 	}
 }
 

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) {

assets/components/sidebar/sidebar.vue

@@ -9,12 +9,6 @@
 		>
 			<div class="sidebar-section">
 				<div class="sidebar-header">
-					<Icon
-						icon="cross2"
-						class="sidebar-close noselect"
-						@click.native="$emit('toggle', false)"
-					/>
-
 					<router-link
 						to="/updates"
 						class="logo-link"
@@ -27,8 +21,16 @@
 							/>
 						</h1>
 					</router-link>
+
+					<Icon
+						icon="cross2"
+						class="sidebar-close noselect"
+						@click.native="$emit('toggle', false)"
+					/>
 				</div>
 
+				<Search class="search-full" />
+
 				<nav class="nav">
 					<ul class="nolist">
 						<li class="nav-item">
@@ -141,6 +143,8 @@
 <script>
 import { mapState } from 'vuex';
 
+import Search from '../header/search.vue';
+
 import logo from '../../img/logo.svg';
 
 function sfw(state) {
@@ -160,6 +164,9 @@ function setSfw(enabled) {
 }
 
 export default {
+	components: {
+		Search,
+	},
 	data() {
 		return {
 			logo,
@@ -184,7 +191,7 @@ export default {
 	width: 100%;
     position: absolute;
     z-index: 10;
-	background: var(--darken-weak);
+	background: var(--darken);
 }
 
 .sidebar {
@@ -193,6 +200,7 @@ export default {
 	justify-content: space-between;
     width: 15rem;
     height: 100%;
+	margin: 0 0 0 auto;
     color: var(--text);
     background: var(--background);
     box-shadow: 0 0 3px var(--darken-weak);

assets/css/_breakpoints.scss

@@ -1,5 +1,6 @@
 $breakpoint-nano: 320px;
 $breakpoint-micro: 540px;
+$breakpoint-small: 620px;
 $breakpoint: 720px;
 $breakpoint-kilo: 900px;
 $breakpoint-mega: 1200px;