Mobile ready the index page

src/App.vue

@@ -423,6 +423,8 @@
 			top: 1rem;
 			display: none;
 		}
+
+		@at-root #{&}__overlay { display: none; }
 	}
 
 	.logo {
@@ -437,6 +439,12 @@
 	}
 
 	@media (max-width: 420px) {
+		.route_container {
+			width: calc(100% - 2rem);
+			margin: 0 1rem;
+			margin-top: 0rem;
+		}
+
 		.logo {
 			position: relative;
 			z-index: 2;
@@ -450,14 +458,14 @@
 		.header__overlay {
 			width: 100%;
 			height: 100%;
-			pointer-events: none;
+			display: none;
 			position: fixed;
 			top: 0;
 			left: 0;
 			z-index: 1;
 
 			@at-root #{&}--show {
-				pointer-events: all;
+				display: block;
 			}
 		}
 

src/assets/scss/elementStyles.scss

@@ -223,6 +223,14 @@ b, strong {
 		margin-bottom: 0.5rem;
 	}
 }
+@media (max-width: 420px) {
+	div.overlay_message {
+		width: 100%;
+		text-align: center;
+		padding: 0;
+		margin-top: 5rem;
+	}
+}
 
 //Vue transition class
 .fade-enter-active, .fade-leave-active {

src/components/routes/Index.vue

@@ -6,10 +6,13 @@
 				v-model='selectedFilterOption'
 				class='thread_sorting__filter'
 			></select-options>
-			<router-link
-				class='button button--blue'
-				v-if='$store.state.username' to='/thread/new'
-			>Post new thread</router-link>
+			<div class='thread_sorting__add_and_categories'>
+				<select-button v-model='selectedCategory':options='categories'></select-button>
+				<router-link
+					class='button button--blue'
+					v-if='$store.state.username' to='/thread/new'
+				>Post new thread</router-link>
+			</div>
 		</div>
 		<div class='threads_main'>
 			<div class='threads_main__side_bar'>
@@ -75,6 +78,7 @@
 	import ThreadDisplay from '../ThreadDisplay'
 	import ThreadDisplayPlaceholder from '../ThreadDisplayPlaceholder'
 	import SelectOptions from '../SelectOptions'
+	import SelectButton from '../SelectButton'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 	import logger from '../../assets/js/logger'
@@ -86,7 +90,8 @@
 			ScrollLoad,
 			ThreadDisplay,
 			ThreadDisplayPlaceholder,
-			SelectOptions
+			SelectOptions,
+			SelectButton
 		},
 		data () {
 			return {
@@ -269,6 +274,12 @@
 			margin-right: 1.25rem;
 			width: 10rem;
 		}
+
+		@at-root #{&}__add_and_categories {
+			.select_button {
+				display: none;
+			}
+		}
 	}
 
 	.threads_main__side_bar {
@@ -391,4 +402,30 @@
 			display: inline-block;
 		}
 	}
+
+	@media (max-width: 420px) {
+		.thread_sorting {
+			flex-direction: column-reverse;
+			align-items: left;
+
+			@at-root #{&}__add_and_categories {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 0.5rem;
+
+				.select_button {
+					display: inline-block;
+				}
+			}
+		}
+
+		.threads_main__side_bar {
+			display: none;
+		}
+		.threads_main__threads {
+			width: 100%;
+			margin-left: 0;
+		}
+	}
 </style>