Add thread title to post optionally and on click navigate to post

src/components/ThreadPost.vue

@@ -7,7 +7,8 @@
 	>
 		<div class='post__meta_data'>
 			<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>
-			<div class='post__user'>{{post.User.username}}</div>
+			<div class='post__thread' v-if='showThread' @click='goToThread'>{{post.Thread.name}}</div>
+			<div class='post__user' v-else>{{post.User.username}}</div>
 			<replying-to
 				style='margin-right: 0.5rem;'
 				v-if='post.replyingToUsername'
@@ -54,7 +55,7 @@
 
 	export default {
 		name: 'Post',
-		props: ['post', 'highlight', 'showReply'],
+		props: ['post', 'highlight', 'showReply', 'showThread'],
 		components: {
 			PostReply,
 			ReplyingTo,
@@ -68,6 +69,9 @@
 		methods: {
 			setPostFooterState (state) {
 				this.hover = state
+			},
+			goToThread () {
+				this.$router.push(`/thread/${this.post.Thread.slug}/${this.post.Thread.id}`)
 			}
 		}
 	}
@@ -100,6 +104,15 @@
 			@include text($font--role-default, 1rem, 600);
 			margin-right: 0.5rem;
 		}
+		@at-root #{&}__thread {
+			@include text($font--role-default, 1rem, 400);
+			margin-right: 0.5rem;
+			cursor: pointer;
+
+			&:hover {
+				color: $color__darkgray--primary;
+			}
+		}
 		@at-root #{&}__date {
 			color: $color__gray--darkest;
 			margin-right: 0.5rem;

src/components/routes/User.vue

@@ -17,7 +17,7 @@
 		</div>
 		<div class='user_posts' :class='{ "user_posts--no_border_bottom": !posts.length }'>
 			<div class='user_posts__title'>Posts by username</div>
-			<thread-post v-for='post in posts' :post='post'></thread-post>
+			<thread-post v-for='post in posts' :post='post' :show-thread='true'></thread-post>
 			<template v-if='!posts.length'>This user hasn't posted anything yet</template>
 		</div>
 	</div>