assets/components/container/container.vue

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

assets/components/filters/filter-bar.vue

@@ -286,10 +286,6 @@ export default {
     }
 }
 
-.filters {
-	flex-shrink: 0;
-}
-
 .sort {
     display: flex;
     align-items: center;

assets/components/header/header.vue

@@ -1,6 +1,11 @@
 <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"
@@ -41,20 +46,6 @@
 						</router-link>
 					</li>
 
-					<li class="nav-item">
-						<router-link
-							v-slot="{ href, isActive, navigate }"
-							to="/tags"
-						>
-							<a
-								class="nav-link"
-								:href="href"
-								:class="{ active: isActive }"
-								@click="navigate"
-							>Tags</a>
-						</router-link>
-					</li>
-
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
@@ -68,16 +59,25 @@
 							>Movies</a>
 						</router-link>
 					</li>
+
+					<li class="nav-item">
+						<router-link
+							v-slot="{ href, isActive, navigate }"
+							to="/tags"
+						>
+							<a
+								class="nav-link"
+								:href="href"
+								:class="{ active: isActive }"
+								@click="navigate"
+							>Tags</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,7 +209,6 @@ export default {
     display: flex;
     align-items: center;
     height: 100%;
-	overflow: hidden;
 }
 
 .header-section {
@@ -245,7 +244,7 @@ export default {
     height: 100%;
     display: inline-block;
     text-decoration: none;
-    margin: -.25rem 1rem 0 0;
+    margin: 0 1rem 0 0;
 }
 
 .header-logo {
@@ -357,29 +356,18 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint-small) {
+@media(max-width: $breakpoint) {
+	.nav {
+        display: none;
+    }
+
     .sidebar-toggle {
         display: flex;
     }
 
-	.logo-link {
+	.header-logo {
-		margin: -.25rem .75rem 0 0;
+		padding: 0 0 0 .5rem;
 	}
-
-	.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/header/search.vue

@@ -93,7 +93,7 @@ export default {
 .search-input {
     height: 100%;
     width: 100%;
-    padding: .5rem 0 .5rem .5rem;
+    padding: .5rem;
     border: none;
     color: var(--text);
     background: var(--background);

assets/components/sidebar/sidebar.vue

@@ -9,6 +9,12 @@
 		>
 			<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"
@@ -21,19 +27,8 @@
 							/>
 						</h1>
 					</router-link>
-
-					<Icon
-						icon="cross2"
-						class="sidebar-close noselect"
-						@click.native="$emit('toggle', false)"
-					/>
 				</div>
 
-				<Search
-					class="search"
-					@search="$emit('toggle', false)"
-				/>
-
 				<nav class="nav">
 					<ul class="nolist">
 						<li class="nav-item">
@@ -146,8 +141,6 @@
 <script>
 import { mapState } from 'vuex';
 
-import Search from '../header/search.vue';
-
 import logo from '../../img/logo.svg';
 
 function sfw(state) {
@@ -167,9 +160,6 @@ function setSfw(enabled) {
 }
 
 export default {
-	components: {
-		Search,
-	},
 	data() {
 		return {
 			logo,
@@ -203,7 +193,6 @@ 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);
@@ -212,8 +201,9 @@ 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;
 }
 
 .sidebar-close {
@@ -249,17 +239,6 @@ export default {
 	fill: var(--primary);
 }
 
-::v-deep .search {
-	height: 3rem;
-	border-bottom: solid 1px var(--shadow-hint);
-	padding: 0;
-	margin: 0 0 .5rem 0;
-
-	.search-input {
-		padding: .5rem 0 .5rem 1rem;
-	}
-}
-
 .nav-item {
     display: block;
 }

assets/css/_breakpoints.scss

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

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.129.0",
+    "version": "1.128.6",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.129.0",
+    "version": "1.128.6",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {