Add sub-routes and allow click to select routes on menu

src/components/routes/Admin.vue

@@ -1,7 +1,12 @@
 <template>
 	<div class='admin'>
 		<div class='admin__menu'>
-			<div class='admin__menu__item' v-for='route in routes' :class='{ "admin__menu__item--selected" : false }'>
+			<div 
+				class='admin__menu__item'
+				v-for='route in routes'
+				:class='{ "admin__menu__item--selected" : route.route === selected }'
+				@click='$router.push("/admin/" + route.route)'
+			>
 				<div>
 					<span class='fa admin__menu__item__icon' :class='route.icon'></span>
 				</div>
@@ -15,6 +20,7 @@
 				</div>
 			</div>
 		</div>
+		<router-view class='admin__router_view'></router-view>
 	</div>
 </template>
 
@@ -23,13 +29,22 @@
 		name: 'Admin',
 		data () {
 			return {
+				selected: null,
 				routes: [
-					{ title: 'Dashboard', description: 'Quick links and stats about your forum', icon: 'fa-home' },
-					{ title: 'Moderation', description: 'View and respond to user reports', icon: 'fa-exclamation-circle' },
-					{ title: 'Categories', description: 'Add and remove thread categories', icon: 'fa-th' },
-					{ title: 'Back-up', description: 'Download and restore forum data', icon: 'fa-cloud-download' }
+					{ title: 'Dashboard', route: 'dashboard', description: 'Quick links and stats about your forum', icon: 'fa-home' },
+					{ title: 'Moderation', route: 'moderation', description: 'View and respond to user reports', icon: 'fa-exclamation-circle' },
+					{ title: 'Categories', route: 'categories', description: 'Add and remove thread categories', icon: 'fa-th' },
+					{ title: 'Back-up', route: 'backup', description: 'Download and restore forum data', icon: 'fa-cloud-download' }
 				]
 			}
+		},
+		watch: {
+			$route (to, from) {
+				this.selected = to.path.split('/')[2]
+			}
+		},
+		created () {
+			this.selected = this.$route.path.split('/')[2]
 		}
 	}
 </script>
@@ -40,6 +55,8 @@
 	.admin {
 		height: calc(100% + 1rem);
 		margin-top: -1rem;
+		display: flex;
+		flex-direction: row;
 
 		@at-root #{&}__menu {
 			width: 15rem;
@@ -69,7 +86,7 @@
 					width: 0.25rem;
 					height: 100%;
 					background-color: $color__gray--darkest;
-					transition: right 0.2s;
+					transition: left 0.2s;
 				}
 
 				@at-root #{&}--selected {
@@ -95,5 +112,11 @@
 				}
 			}
 		}
+
+		@at-root #{&}__router_view {
+			width: 100%;
+			height: 100%;
+			overflow-y: auto;
+		}
 	}
 </style>

src/components/routes/AdminDashboard.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		Dashboard
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'AdminDashboard'
+	}
+</script>
+
+<style lang='scss' scoped>
+	
+</style>

src/components/routes/AdminModeration.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		Moderation
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'AdminDashboard'
+	}
+</script>
+
+<style lang='scss' scoped>
+	
+</style>

src/main.js

@@ -26,6 +26,8 @@ import SettingsGeneral from './components/routes/SettingsGeneral'
 import SettingsAccount from './components/routes/SettingsAccount'
 
 import Admin from './components/routes/Admin'
+import AdminDashboard from './components/routes/AdminDashboard'
+import AdminModeration from './components/routes/AdminModeration'
 
 let { onResize } = require('./assets/js/flexBoxGridCorrect.js')
 
@@ -52,7 +54,10 @@ const router = new VueRouter({
 			{ path: 'general', component: SettingsGeneral },
 			{ path: 'account', component: SettingsAccount }
 		] },
-		{ path: '/admin', component: Admin }
+		{ path: '/admin', redirect: '/admin/dashboard', component: Admin, children: [
+			{ path: 'dashboard', component: AdminDashboard },
+			{ path: 'moderation', component: AdminModeration },
+		] }
 	],
 	mode: 'history'
 })