Merge branch 'dev'

1 files changed, 137 insertions, 0 deletions

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
new file mode 100644
index 0000000..65db69f
--- /dev/null
+++ b/src/site/components/navbar/Navbar.vue
@@ -0,0 +1,137 @@
+<template>
+	<b-navbar
+		:class="{ isWhite }"
+		transparent>
+		<template slot="end">
+			<b-navbar-item tag="div">
+				<router-link
+					to="/"
+					class="navbar-item no-active"
+					exact>
+					Home
+				</router-link>
+			</b-navbar-item>
+			<template v-if="loggedIn">
+				<b-navbar-item tag="div">
+					<router-link
+						to="/dashboard"
+						class="navbar-item no-active"
+						exact>
+						Uploads
+					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
+					<router-link
+						to="/dashboard/albums"
+						class="navbar-item no-active"
+						exact>
+						Albums
+					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
+					<router-link
+						to="/dashboard/account"
+						class="navbar-item no-active"
+						exact>
+						Account
+					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
+					<router-link
+						to="/"
+						class="navbar-item no-active"
+						@click.native="logOut">
+						Logout
+					</router-link>
+				</b-navbar-item>
+			</template>
+			<template v-else>
+				<b-navbar-item tag="div">
+					<router-link
+						class="navbar-item"
+						to="/login">
+						Login
+					</router-link>
+				</b-navbar-item>
+			</template>
+		</template>
+	</b-navbar>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+	props: {
+		isWhite: {
+			'type': Boolean,
+			'default': false
+		}
+	},
+	data() {
+		return { hamburger: false };
+	},
+	computed: {
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...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 {
+		background: transparent;
+		box-shadow: none;
+		padding-right: 2rem;
+		.navbar-brand {
+			a.burger {
+				color: $defaultTextColor;
+			}
+		}
+		.navbar-menu {
+			height: 5rem;
+
+			.navbar-end {
+				padding-right: 2rem;
+			}
+			a.navbar-item {
+				color: $defaultTextColor;
+				font-size: 16px;
+				font-weight: 700;
+				text-decoration-style: solid;
+			}
+			a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
+				text-decoration: underline;
+				background: transparent;
+			}
+
+			i {
+				font-size: 2em;
+				&.hidden {
+					width: 0px;
+					height: 1.5em;
+					pointer-events: none;
+				}
+			}
+		}
+
+		&.isWhite {
+			.navbar-brand {
+				a.navbar-item {
+					color: white;
+				}
+			}
+		}
+	}
+
+	.no-active {
+		text-decoration: none !important;
+	}
+</style>