wip

src/client/app/desktop/views/pages/admin/admin.dashboard.vue

 <template>
 <div>
-	<header>%i18n:@dashboard%</header>
-
-	<p><b>%i18n:@all-users%</b><span>{{ stats.usersCount | number }}</span></p>
-	<p><b>%i18n:@original-users%</b><span>{{ stats.originalUsersCount | number }}</span></p>
-	<p><b>%i18n:@all-notes%</b><span>{{ stats.notesCount | number }}</span></p>
-	<p><b>%i18n:@original-notes%</b><span>{{ stats.originalNotesCount | number }}</span></p>
+	<h1>%i18n:@dashboard%</h1>
+	<p><b>%i18n:@all-users%</b>: <span>{{ stats.usersCount | number }}</span></p>
+	<p><b>%i18n:@original-users%</b>: <span>{{ stats.originalUsersCount | number }}</span></p>
+	<p><b>%i18n:@all-notes%</b>: <span>{{ stats.notesCount | number }}</span></p>
+	<p><b>%i18n:@original-notes%</b>: <span>{{ stats.originalNotesCount | number }}</span></p>
 </div>
 </template>
 
@@ -25,3 +24,12 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+h1
+	margin 0 0 1em 0
+	padding 0 0 8px 0
+	font-size 1em
+	color #555
+	border-bottom solid 1px #eee
+</style>

src/client/app/desktop/views/pages/admin/admin.vue

 <template>
-<div>
+<div class="mk-admin">
 	<nav>
 		<ul>
-			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%i18n:@dashboard%</li>
-			<li @click="nav('drive')" :class="{ active: page == 'drive' }">%i18n:@drive%</li>
-			<li @click="nav('users')" :class="{ active: page == 'users' }">%i18n:@users%</li>
-			<li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li>
+			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:chalkboard .fw%%i18n:@dashboard%</li>
+			<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
+			<li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:@drive%</li>
+			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
 		</ul>
 	</nav>
 	<main>
 		<div v-if="page == 'dashboard'">
 			<x-dashboard/>
 		</div>
-		<div v-if="page == 'drive'"></div>
 		<div v-if="page == 'users'">
 			<x-suspend-user/>
 		</div>
+		<div v-if="page == 'drive'"></div>
 		<div v-if="page == 'update'"></div>
 	</main>
 </div>
@@ -43,3 +43,48 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-admin
+	display flex
+	height 100%
+	margin 32px
+
+	> nav
+		flex 0 0 250px
+		width 100%
+		height 100%
+		padding 16px 0 0 0
+		overflow auto
+		border-right solid 1px #ddd
+
+		> ul
+			list-style none
+
+			> li
+				display block
+				padding 10px 16px
+				margin 0
+				color #666
+				cursor pointer
+				user-select none
+				transition margin-left 0.2s ease
+
+				> [data-fa]
+					margin-right 4px
+
+
+				&:hover
+					color #555
+
+				&.active
+					margin-left 8px
+					color $theme-color !important
+
+	> main
+		width 100%
+		padding 16px 32px
+
+</style>