traxxx/assets/components/header/menu.vue

<template>
	<div class="menu">
		<ul class="menu-items noselect">
			<router-link
				v-if="auth && me"
				:to="{ name: 'user', params: { username: me.username } }"
				class="menu-username"
			>{{ me.username }}</router-link>

			<router-link
				v-else-if="auth"
				:to="{ name: 'login', query: { ref: $route.path } }"
				class="menu-item"
				@click.stop
			>
				<Icon icon="enter2" />Log in
			</router-link>

			<li
				v-if="auth && me"
				class="menu-item"
				@click.stop="$store.dispatch('logout')"
			>
				<Icon icon="enter2" />Log out
			</li>

			<li
				v-show="!sfw"
				class="menu-item"
				@click.stop="setSfw(true)"
			>
				<Icon
					icon="flower"
					class="toggle noselect"
				/>Safe mode
			</li>

			<li
				v-show="sfw"
				class="menu-item"
				@click.stop="setSfw(false)"
			>
				<Icon
					icon="fire"
					class="toggle noselect"
				/>Filth mode
			</li>

			<li
				v-show="theme === 'light'"
				class="menu-item"
				@click.stop="setTheme('dark')"
			>
				<Icon
					icon="moon"
					class="toggle noselect"
				/>Dark theme
			</li>

			<li
				v-show="theme === 'dark'"
				class="menu-item"
				@click.stop="setTheme('light')"
			>
				<Icon
					icon="sun"
					class="toggle noselect"
				/>Light theme
			</li>

			<li
				class="menu-item"
				@click="$emit('showFilters', true)"
			>
				<Icon icon="filter" />Filters
			</li>
		</ul>
	</div>
</template>

<script>
import { mapState } from 'vuex';

function sfw(state) {
	return state.ui.sfw;
}

function theme(state) {
	return state.ui.theme;
}

function auth(state) {
	return state.auth.enabled;
}

function me(state) {
	return state.auth.user;
}

function setTheme(newTheme) {
	this.$store.dispatch('setTheme', newTheme);
}

function setSfw(enabled) {
	this.$store.dispatch('setSfw', enabled);
}

export default {
	computed: {
		...mapState({
			auth,
			sfw,
			theme,
			me,
		}),
	},
	methods: {
		setSfw,
		setTheme,
	},
};
</script>

<style lang="scss" scoped>
@import 'breakpoints';

.menu-items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-item {
	display: flex;
	padding: .75rem 1rem .75rem .75rem;
	color: inherit;
	text-decoration: none;

	.icon {
		fill: var(--darken);
		margin: 0 1rem 0 0;
	}

	&.disabled {
		color: var(--darken-weak);
		cursor: default;

		.icon {
			fill: var(--darken-weak);
		}
	}

	&:hover:not(.disabled) {
		cursor: pointer;
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}
}

.menu-username {
	display: block;
	font-weight: bold;
	color: var(--shadow-strong);
	font-size: .9rem;
	padding: .75rem 1rem;
	border-bottom: solid 1px var(--shadow-hint);
	text-align: center;
	text-decoration: none;
}
</style>