traxxx/assets/components/sidebar/sidebar.vue

<template>
	<div class="sidebar-container">
		<div
			class="sidebar"
			@click.stop
		>
			<div class="sidebar-section">
				<div class="sidebar-header">
					<Icon
						icon="cross2"
						class="sidebar-close"
						@click.native="toggleSidebar(false)"
					/>

					<router-link
						to="/updates"
						class="logo-link"
						@click.native="toggleSidebar(false)"
					>
						<h1 class="sidebar-logo">
							<div
								class="logo"
								v-html="logo"
							/>
						</h1>
					</router-link>
				</div>

				<nav class="nav">
					<ul class="nolist">
						<li class="nav-item">
							<router-link
								v-slot="{ href, isActive, navigate }"
								to="/updates"
								@click.native="toggleSidebar(false)"
							>
								<a
									class="nav-link"
									:href="href"
									:class="{ active: isActive }"
									@click="navigate"
								>Home</a>
							</router-link>
						</li>

						<li class="nav-item">
							<router-link
								v-slot="{ href, isActive, navigate }"
								to="/actors"
								@click.native="toggleSidebar(false)"
							>
								<a
									class="nav-link"
									:href="href"
									:class="{ active: isActive }"
									@click="navigate"
								>Actors</a>
							</router-link>
						</li>

						<li class="nav-item">
							<router-link
								v-slot="{ href, isActive, navigate }"
								to="/networks"
								@click.native="toggleSidebar(false)"
							>
								<a
									class="nav-link"
									:href="href"
									:class="{ active: isActive }"
									@click="navigate"
								>Channels</a>
							</router-link>
						</li>

						<li class="nav-item">
							<router-link
								v-slot="{ href, isActive, navigate }"
								to="/tags"
								@click.native="toggleSidebar(false)"
							>
								<a
									class="nav-link"
									:href="href"
									:class="{ active: isActive }"
									@click="navigate"
								>Tags</a>
							</router-link>
						</li>
					</ul>
				</nav>
			</div>

			<div class="sidebar-section toggles noselect">
				<label
					v-show="sfw"
					class="toggle"
					@click="setSfw(false)"
				><Icon icon="fire" />Disable safe mode</label>

				<label
					v-show="!sfw"
					class="toggle"
					@click="setSfw(true)"
				><Icon icon="flower" />Enable safe mode</label>

				<label
					v-show="theme === 'dark'"
					class="toggle"
					@click="setTheme('light')"
				><Icon icon="sun" />Use light theme</label>

				<label
					v-show="theme === 'light'"
					class="toggle"
					@click="setTheme('dark')"
				><Icon icon="moon" />Use dark theme</label>
			</div>
		</div>
	</div>
</template>

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

import logo from '../../img/logo.svg';

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

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

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

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

export default {
	props: {
		toggleSidebar: {
			type: Function,
			default: null,
		},
	},
	data() {
		return {
			logo,
		};
	},
	computed: {
		...mapState({
			sfw,
			theme,
		}),
	},
	methods: {
		setTheme,
		setSfw,
	},
};
</script>

<style lang="scss" scoped>
.sidebar-container {
    height: 100%;
	width: 100%;
    position: absolute;
    z-index: 10;
	background: var(--darken-hint);
}

.sidebar {
    display: flex;
    flex-direction: column;
	justify-content: space-between;
    width: 15rem;
    height: 100%;
    color: var(--text);
    background: var(--background);
    box-shadow: 0 0 3px var(--darken-weak);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    height:  3rem;
    border-bottom: solid 1px var(--shadow-hint);
    margin: 0 0 .5rem 0;
}

.sidebar-close {
    width: 1.25rem;
    height: 100%;
    padding: 0 1.125rem;
	fill: var(--shadow-modest);

    &:hover {
        fill: var(--primary);
        cursor: pointer;
    }
}

.sidebar-logo {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
}

.logo-link {
    display: block;
    height: 100%;
    padding: 0 1rem;
}

.logo {
    width: 6rem;
    display: flex;
    align-items: center;
    margin: 0;
	fill: var(--primary);
}

.nav-item {
    display: block;
}

.nav-link {
    color: var(--shadow);
    display: block;
    padding: 1rem;
    text-decoration: none;
    font-weight: bold;

	&:hover {
        color: var(--shadow-strong);
    }

    &.active {
		color: var(--primary);
    }
}

.toggles {
	border-top: solid 1px var(--shadow-hint);
	margin: .5rem 0 0 0;
}

.toggle {
	display: flex;
	align-self: flex-end;
	padding: 1rem;
	color: var(--shadow);
	font-weight: bold;

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

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

	&:hover {
		cursor: pointer;
		color: var(--shadow-strong);

		&:not(.active) .icon {
			fill: var(--shadow-strong);
		}
	}
}

.dark .sidebar {
    background: var(--profile);

	.nav-link {
		color: var(--shadow);

		&.active {
			color: var(--text-light);
		}
	}

	.sidebar-close {
		fill: var(--lighten);

		&:hover {
			fill: var(--text-light);
		}
	}
}
</style>