Add link styling

src/components/routes/User.vue

@@ -9,7 +9,7 @@
 			</div>
 			<div class='user_header__info'>
 				<span class='user_header__username'>{{username}}</span>
-				<span class='user_header__date' v-if='user'>Created: {{user.createdAt | formatDate('date') }}</span>
+				<span class='user_header__date' v-if='user'>Account created {{user.createdAt | formatDate('date') }}</span>
 			</div>
 			<div></div>
 		</div>
@@ -56,7 +56,7 @@
 		methods: {
 			getIndexFromRoute (path) {
 				let selectedIndex
-				let route = path.split('/')[2]
+				let route = path.split('/')[3]
 
 				this.menuItems.forEach((item, index) => {
 					if(item.route === route) {
@@ -116,4 +116,38 @@
 		margin-left: 5rem;
 		width: 75%;
 	}
+	.user__view_holder {
+		display: flex;
+		width: calc(75% + 5rem);
+	}
+	.user__links {
+		width: 10rem;
+
+		@at-root #{&}__menu_item {
+			cursor: pointer;
+			margin-bottom: 0.5rem;
+			position: relative;
+
+			&:hover { color: $color__darkgray--primary; }
+
+			@at-root #{&}--selected {
+				font-weight: 500;
+
+				&::before {
+					content: '';
+					display: inline-block;
+					width: 0.2rem;
+					z-index: 1;
+					height: 100%;
+					position: absolute;
+					left: -0.5rem;
+					top: 0.0625rem;
+					background-color: $color__gray--darkest;
+				}
+			}
+		}
+	}
+	.user__view {
+		flex-grow: 1;
+	}
 </style>

src/components/routes/UserPosts.vue

@@ -1,22 +1,20 @@
 <template>
-	<div>
-		<div class='user_posts' :class='{ "user_posts--no_border_bottom": !posts.length }'>
-			<div class='user_posts__title'>Posts by username</div>
-			<scroll-load
-				:loading='loadingPosts'
-				:show='nextURL !== null'
-				@load='loadNewPosts'
-				v-if='sortedPosts.length'
-			>
-				<thread-post
-					v-for='(post, index) in sortedPosts'
-					:post='post'
-					:show-thread='true'
-					:class='{"post--last": index === posts.length-1}'
-				></thread-post>
-			</scroll-load>
-			<template v-else>This user hasn't posted anything yet</template>
-		</div>
+	<div class='user_posts' :class='{ "user_posts--no_border_bottom": !posts.length }'>
+		<div class='user_posts__title'>Posts by username</div>
+		<scroll-load
+			:loading='loadingPosts'
+			:show='nextURL !== null'
+			@load='loadNewPosts'
+			v-if='sortedPosts.length'
+		>
+			<thread-post
+				v-for='(post, index) in sortedPosts'
+				:post='post'
+				:show-thread='true'
+				:class='{"post--last": index === posts.length-1}'
+			></thread-post>
+		</scroll-load>
+		<template v-else>This user hasn't posted anything yet</template>
 	</div>
 </template>
 
@@ -87,8 +85,6 @@
 	@import '../../assets/scss/variables.scss';
 
 	.user_posts {
-		width: calc(75% + 5rem);
-
 		@at-root #{&}__title {
 			font-size: 1.5rem;
 			margin-bottom: 1rem;