Use table rather than divs for threads, add select component

src/components/routes/Index.vue

@@ -1,63 +1,62 @@
 <template>
 	<div class='index'>
 		<div class='thread_sorting'>
+			<select-button style='margin-right: 1rem' v-model='selected' :options='categories'></select-button>
 			<div class='button button--orange'>New</div>
 			<div class='button'>Most active</div>
 			<div class='button'>No replies</div>
 		</div>
-		<div class='threads'>
-			<div class='thread thread--header'>
-				<div class='thread__section thread__section--header thread__section--width-title'>Title</div>
-				<div class='thread__section thread__section--header thread__section--width-post'>Latest post</div>
-				<div class='thread__section thread__section--header thread__section--width-replies'>Replies</div>
-			</div>
-			<div class='thread thread--hover'>
-				<div class='thread__section thread__section--width-title'>QWERTYUIHGFDSERTYHJNBVCSASDFGHBGFRESDCVBGTRD</div>
-				<div class='thread__section thread__section--width-post'>
-					<div class='thread__user'>Qwert azerty</div>
-					<div class='thread__date'>10/11/2016 15:13</div>
-				</div>
-				<div class='thread__section thread__section--width-replies'>20</div>
-			</div>
-			<div class='thread thread--hover'>
-				<div class='thread__section thread__section--width-title'>QWERTYUIHGFDSERTYHJNBVCSASDFGHBGFRESDCVBGTRD</div>
-				<div class='thread__section thread__section--width-post'>
-					<div class='thread__user'>Qwert azerty</div>
-					<div class='thread__date'>10/11/2016 15:13</div>
-				</div>
-				<div class='thread__section thread__section--width-replies'>20</div>
-			</div>
-			<div class='thread thread--hover'>
-				<div class='thread__section thread__section--width-title'>QWERTYUIHGFDSERTYHJNBVCSASDFGHBGFRESDCVBGTRD</div>
-				<div class='thread__section thread__section--width-post'>
-					<div class='thread__user'>Qwert azerty</div>
-					<div class='thread__date'>10/11/2016 15:13</div>
-				</div>
-				<div class='thread__section thread__section--width-replies'>20</div>
-			</div>
-			<div class='thread thread--hover'>
-				<div class='thread__section thread__section--width-title'>QWERTYUIHGFDSERTYHJNBVCSASDFGHBGFRESDCVBGTRD</div>
-				<div class='thread__section thread__section--width-post'>
-					<div class='thread__user'>Qwert azerty</div>
-					<div class='thread__date'>10/11/2016 15:13</div>
-				</div>
-				<div class='thread__section thread__section--width-replies'>20</div>
-			</div>
-			<div class='thread thread--hover'>
-				<div class='thread__section thread__section--width-title'>QWERTYUIHGFDSERTYHJNBVCSASDFGHBGFRESDCVBGTRD</div>
-				<div class='thread__section thread__section--width-post'>
-					<div class='thread__user'>Qwert azerty</div>
-					<div class='thread__date'>10/11/2016 15:13</div>
-				</div>
-				<div class='thread__section thread__section--width-replies'>20</div>
-			</div>
+		<table class='threads'>
+			<colgroup>
+				<col span="1" style="width: 50%;">
+				<col span="1" style="width: 22.5%;">
+				<col span="1" style="width: 22.5%;">
+				<col span="1" style="width: 5%;">
+			</colgroup>
+			<thead>
+				<tr class='thread thread--header'>
+					<th>Title</th>
+					<th>Latest post</th>
+					<th>Category</th>
+					<th>Replies</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr class='thread'>
+					<td>A thread title here........</td>
+					<td>
+						<div>User</div>
+						<div>0201/2017 10:07</div>
+					</td>
+					<td>A category here</td>
+					<td>29</td>
+				</tr>
+			</tbody>
 		</div>
 	</div>
 </template>
 
 <script>
+	import SelectButton from '../SelectButton'
+
 	export default {
-		name: 'index'
+		name: 'index',
+		components: {
+			SelectButton
+		},
+		data () {
+			var categories = [
+				{ name: 'All categories', value: '1' },
+				{ name: 'Photography', value: '1' },
+				{ name: 'Baking', value: '1' },
+				{ name: 'Maps', value: '1' }
+			];
+
+			return {
+				selected: null,
+				categories
+			}
+		}
 	}
 </script>
 
@@ -74,39 +73,39 @@
 		margin-bottom: 1rem;
 	}
 
+	.threads {
+		border-collapse: collapse;
+	}
+
 	.thread {
-		display: flex;
 		background-color: #fff;
 		padding: 0.5rem 0;
 		cursor: default;
+		text-align: left;
+		transition: background-color 0.2s;
 
-		@at-root #{&}--hover {
-			transition: background-color 0.2s;
-			&:hover {
-				background-color: $color__lightgray--primary;
-			}
+		&:hover {
+			background-color: $color__lightgray--primary;
 		}
 
-		@at-root #{&}--header {
-			border-bottom: thin solid $color__lightgray--darkest;
+		td, th {
+			padding: 0 0.5rem;
 		}
 
-		@at-root #{&}__section {
-			padding: 0 0.5rem;
+		@at-root #{&}--header {
+			&:hover {
+				background-color: #fff;
+			}
 
-			@at-root #{&}--header {
+			th {
 				font-weight: 400;
+				padding-bottom: 0.25rem;
+				border-bottom: thin solid $color__lightgray--darkest;
 			}
+		}
 
-			@at-root #{&}--width-title {
-				width: 60%;
-			}
-			@at-root #{&}--width-post {
-				width: 30%
-			}
-			@at-root #{&}--width-replies {
-				width: 10%;
-			}
+		@at-root #{&}__section {
+			padding: 0 0.5rem;
 		}
 
 		@at-root #{&}__user {