traxxx/assets/components/sidebar/sidebar.vue

<template>
	<div
		class="sidebar"
		@click.stop
	>
		<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>
</template>

<script>
import logo from '../../img/logo.svg';

export default {
	props: {
		toggleSidebar: {
			type: Function,
			default: null,
		},
	},
	data() {
		return {
			logo,
		};
	},
};
</script>

<style lang="scss" scoped>
.sidebar {
    display: flex;
    flex-direction: column;
    width: 15rem;
    height: 100%;
    position: absolute;
    z-index: 10;
    color: var(--text);
    background: var(--background);
    box-shadow: 0 0 3px var(--darken);
}

.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.5rem;
    height: 100%;
    padding: 0 1rem;
    fill: var(--darken);

    &:hover {
        fill: var(--text);
        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-strong);
    display: block;
    padding: 1rem;
    text-decoration: none;
    font-weight: bold;

	&:hover {
        color: var(--primary);
    }

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

.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>