feat: add new sidebar with mdi icons and active reactivity

7 files changed, 102 insertions, 51 deletions

diff --git a/nuxt.config.js b/nuxt.config.js
index 9720e71..b21d90b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -72,6 +72,10 @@ export default {
 	],
 	css: [],
 	modules: ['@nuxtjs/axios', 'cookie-universal-nuxt'],
+	router: {
+		linkActiveClass: 'is-active',
+		linkExactActiveClass: 'is-active',
+	},
 	axios: {
 		baseURL: `${process.env.DOMAIN}${process.env.ROUTE_PREFIX}`,
 	},
diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 6693d8a..0bc7c5e 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -55,6 +55,17 @@ $loading-background: rgba(0, 0, 0, 0.8);
 $loading-background: rgba(40, 40, 40, 0.66);
 
 // dialogs
+$modal-card-title-color: $textColor;
 $modal-card-body-background-color: $background;
 $modal-card-head-background-color: $backgroundAccent;
+$modal-card-head-border-bottom: 1px solid rgba(255, 255, 255, 0.1098);
 $modal-card-foot-border-top: 1px solid rgba(255, 255, 255, 0.1098);
+
+// sidebar
+$sidebar-background: $base-1;
+$sidebar-box-shadow: none;
+
+//
+$menu-item-color: $textColor;
+$menu-item-hover-color: $textColorHighlight;
+$menu-item-active-background-color: $backgroundAccent;
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index 6c939b5..0ebba4c 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -12,6 +12,8 @@ $size-normal: 1rem;
 @import '../../../node_modules/bulma/bulma.sass';
 @import '../../../node_modules/buefy/src/scss/buefy.scss';
 
+@import '@mdi/font/css/materialdesignicons.css';
+
 html {
 	// font-size: 100%;
 	font-size: 14px;
@@ -336,3 +338,9 @@ table.table {
 .pagination a:hover {
 	text-decoration: none;
 }
+
+// fix control icons
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+	height: 3rem;
+	padding-right: 1rem;
+}
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 7fb2f22..fb78631 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,6 @@
 <template>
-	<b-navbar :class="{ isWhite }"
+	<b-navbar
+		:class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -71,24 +72,25 @@ export default {
 	props: {
 		isWhite: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return { hamburger: false };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config'])
+		...mapState(['config']),
 	},
 	methods: {
 		async logOut() {
 			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
-		}
-	}
+		},
+	},
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	nav.navbar {
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 3cb8b43..5394fc6 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,63 +1,80 @@
 <template>
-	<div class="dashboard-menu">
-		<router-link to="/dashboard">
-			<i class="icon-com-pictures" />Files
-		</router-link>
-		<router-link to="/dashboard/albums">
-			<i class="icon-interface-window" />Albums
-		</router-link>
-		<router-link to="/dashboard/tags">
-			<i class="icon-ecommerce-tag-c" />Tags
-		</router-link>
-		<router-link to="/dashboard/account">
-			<i class="icon-user-alt" />Account
-		</router-link>
-		<template v-if="user && user.isAdmin">
-			<router-link to="/dashboard/admin/users">
-				<i class="icon-setting-gear-a" />Users
-			</router-link>
-			<!--
-			TODO: Dont wanna deal with this now
-			<router-link to="/dashboard/admin/settings">
-				<i class="icon-setting-gear-a" />Settings
-			</router-link>
-			-->
-		</template>
-	</div>
+	<b-menu class="dashboard-menu">
+		<b-menu-list label="Menu">
+			<b-menu-item
+				class="item"
+				icon="information-outline"
+				label="Dashboard"
+				tag="nuxt-link"
+				to="/dashboard"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="image-multiple-outline"
+				label="Albums"
+				tag="nuxt-link"
+				to="/dashboard/albums"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="tag-outline"
+				label="Tags"
+				tag="nuxt-link"
+				to="/dashboard/tags"
+				exact />
+			<b-menu-item icon="settings" expanded>
+				<template slot="label" slot-scope="props">
+					Administration
+					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
+				</template>
+				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
+				<b-menu-item icon="cog-outline" label="Settings" disabled />
+			</b-menu-item>
+			<b-menu-item
+				class="item"
+				icon="account-cog-outline"
+				label="My account"
+				tag="nuxt-link"
+				to="/dashboard/account"
+				exact />
+		</b-menu-list>
+		<b-menu-list label="Actions">
+			<b-menu-item icon="exit-to-app" label="Logout" tag="nuxt-link" to="/logout" exact />
+		</b-menu-list>
+	</b-menu>
 </template>
 <script>
 import { mapState } from 'vuex';
 
 export default {
 	computed: mapState({
-		user: state => state.auth.user
-	})
+		user: (state) => state.auth.user,
+	}),
+	methods: {
+		isRouteActive(id) {
+			if (this.$route.path.includes(id)) {
+				return true;
+			}
+			return false;
+		},
+	},
 };
 
 </script>
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.dashboard-menu {
-		padding: 2rem;
-		border-radius: 8px;
+		::v-deep a:hover {
+			cursor: pointer;
+			text-decoration: none;
+		}
 
-		a {
-			display: block;
-			font-weight: 700;
-			color: $textColor;
-			position: relative;
-			padding-left: 40px;
-			height: 35px;
-			&:hover{
-				color: white;
-			}
+		::v-deep .icon {
+			margin-right: 0.5rem;
+		}
 
-			i {
-				position: absolute;
-				font-size: 1.5em;
-				top: -4px;
-				left: 5px;
-			}
+		::v-deep .icon.is-pulled-right {
+			margin-right: 0;
 		}
 
 		hr { margin-top: 0.6em; }
diff --git a/src/site/pages/logout.vue b/src/site/pages/logout.vue
new file mode 100644
index 0000000..7124ea5
--- /dev/null
+++ b/src/site/pages/logout.vue
@@ -0,0 +1,8 @@
+<script>
+export default {
+	async created() {
+		await this.$store.dispatch('auth/logout');
+		this.$router.replace('/login');
+	},
+};
+</script>
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index 69de9ec..286d321 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -9,6 +9,7 @@ export const state = getDefaultState;
 export const getters = {
 	isLoggedIn: (state) => state.loggedIn,
 	getApiKey: (state) => state.user?.apiKey,
+	getToken: (state) => state.token,
 };
 
 export const actions = {