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

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);
@@ -201,7 +209,7 @@ export default {
 .sidebar-header {
     display: flex;
     justify-content: space-between;
-    height:  3rem;
+    height: 3rem;
     border-bottom: solid 1px var(--shadow-hint);
     margin: 0 0 .5rem 0;
 }