Rename admin routes to settings routes (and internal references to these components

src/components/routes/AdminUsers.vue

@@ -1,18 +0,0 @@
-<template>
-	<div class='route_container'>
-		<div class='h1'>Users</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		name: 'adminUsers',
-		components: {},
-		computed: {},
-		methods: {}
-	}
-</script>
-
-<style lang='scss' scoped>
-	@import '../../assets/scss/variables.scss';
-</style>

src/components/routes/Admin.vue

@@ -1,16 +1,16 @@
 <template>
-	<div class='route_container route_container--admin'>
-		<div class='admin_menu'>
+	<div class='route_container route_container--settings'>
+		<div class='settings_menu'>
 			<div
-				class='admin_menu__item'
+				class='settings_menu__item'
 				v-for='(item, index) in menuItems'
-				:class="{'admin_menu__item--selected': index === selected}"
-				@click='$router.push("/admin/" + item.route)'
+				:class="{'settings_menu__item--selected': index === selected}"
+				@click='$router.push("/settings/" + item.route)'
 			>
 				{{item.name}}
 			</div>
 		</div>
-		<div class='admin_page'>
+		<div class='settings_page'>
 			<router-view></router-view>
 		</div>
 	</div>
@@ -18,13 +18,12 @@
 
 <script>
 	export default {
-		name: 'index',
+		name: 'settings',
 		data () {
 			return {
 				menuItems: [
-					{ name: 'Dashboard', route: 'dashboard' }, 
-					{ name: 'Settings', route: 'settings' },
-					{ name: 'Users', route: 'users' }
+					{ name: 'General', route: 'general' }, 
+					{ name: 'Account', route: 'account' },
 				],
 				selected: 0
 			}
@@ -57,19 +56,21 @@
 <style lang='scss' scoped>
 	@import '../../assets/scss/variables.scss';
 
-	.route_container--admin {
+	.route_container--settings {
 		display: flex;
 		flex-direction: row;
 		width: 100%;
-		height: 100%;
+		height: calc(100% + 1rem);
 		padding: 0;
 		margin: 0;
+		margin-top: -1rem;
 	}
 
-	.admin_menu {
+	.settings_menu {
 		width: 15rem;
 		height: 100%;
 		border-right: 0.125rem solid $color__gray--primary;
+		padding-top: 1rem;
 
 		@at-root #{&}__item {
 			padding: 0.5rem 1.5rem;
@@ -102,7 +103,7 @@
 			}
 		}
 	}
-	.admin_page {
+	.settings_page {
 		width: calc(100% - 15rem);
 	}
 </style>

src/components/routes/AdminDashboard.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class='route_container'>
-		<div class='h1'>Dashboard</div>
+		<div class='h1'>Account settings</div>
 	</div>
 </template>
 
 <script>
 	export default {
-		name: 'adminDashboard',
+		name: 'settingsAccount',
 		components: {},
 		computed: {},
 		methods: {}

src/components/routes/AdminSettings.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class='route_container'>
-		<div class='h1'>Settings</div>
+		<div class='h1'>General settings</div>
 	</div>
 </template>
 
 <script>
 	export default {
-		name: 'adminSettings',
+		name: 'settingsGeneral',
 		components: {},
 		computed: {},
 		methods: {}

src/main.js

@@ -17,10 +17,9 @@ import User from './components/routes/User'
 import UserPosts from './components/routes/UserPosts'
 import UserThreads from './components/routes/UserThreads'
 
-import Admin from './components/routes/Admin'
-import AdminDashboard from './components/routes/AdminDashboard'
-import AdminUsers from './components/routes/AdminUsers'
-import AdminSettings from './components/routes/AdminSettings'
+import Settings from './components/routes/Settings'
+import SettingsGeneral from './components/routes/SettingsGeneral'
+import SettingsAccount from './components/routes/SettingsAccount'
 
 let { onResize } = require('./assets/js/flexBoxGridCorrect.js')
 
@@ -42,10 +41,9 @@ const router = new VueRouter({
 			{ path: 'posts', component: UserPosts },
 			{ path: 'threads', component: UserThreads }
 		] },
-		{ path: '/admin', redirect: '/admin/dashboard', component: Admin, children: [
-			{ path: 'dashboard', component: AdminDashboard },
-			{ path: 'settings', component: AdminSettings },
-			{ path: 'users', component: AdminUsers }
+		{ path: '/settings', redirect: '/settings/general', component: Settings, children: [
+			{ path: 'general', component: SettingsGeneral },
+			{ path: 'account', component: SettingsAccount }
 		] }
 	],
 	mode: 'history'