traxxx-web/components/sidebar/sidebar.vue

<template>
	<div
		class="sidebar-container"
		@click="emit('sidebar')"
	>
		<div
			class="sidebar"
			@click.stop
		>
			<div class="nav">
				<Link href="/updates">
					<h1 class="title">
						<div
							class="logo"
							v-html="logo"
						/>
					</h1>
				</Link>

				<ul class="nolist menu">
					<li
						class="menu-item"
						:class="{ active: activePage === 'updates' }"
					>
						<a
							href="/updates"
							class="menu-link nolink"
						>Updates</a>
					</li>

					<li
						class="menu-item"
						:class="{ active: activePage === 'actors' }"
					>
						<a
							href="/actors"
							class="menu-link nolink"
						>Actors</a>
					</li>

					<li
						class="menu-item"
						:class="{ active: activePage === 'channels' }"
					>
						<a
							href="/channels"
							class="menu-link nolink"
						>Channels</a>
					</li>

					<li
						class="menu-item"
						:class="{ active: activePage === 'tags' }"
					>
						<a
							href="/tags"
							class="menu-link nolink"
						>Tags</a>
					</li>

					<li
						class="menu-item"
						:class="{ active: activePage === 'movies' }"
					>
						<a
							href="/movies"
							class="menu-link nolink"
						>Movies</a>
					</li>
				</ul>
			</div>

			<Footer />

			<div
				class="footer"
				@click="emit('sidebar')"
			>
				<Icon
					icon="cross2"
					class="close"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, inject } from 'vue';

import logo from '#/assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved

const emit = defineEmits(['sidebar']);
const pageContext = inject('pageContext');

const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
</script>

<style scoped>
.sidebar-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	display: flex;
	justify-content: flex-end;
	background: var(--shadow-strong-10);
}

.sidebar {
	display: flex;
	flex-direction: column;
	width: 15rem;
	max-width: 100%;
	height: 100%;
	margin-left: 2rem;
	background: var(--background);
	box-shadow: 0 0 3px var(--shadow-strong-30);
}

.nav {
	flex-grow: 1;
}

.title {
	margin: 0;
}

.logo {
	width: 6rem;
	max-width: 100%;
	padding: .5rem 1rem .75rem 1rem;
	fill: var(--primary);
}

.menu-item {
	display: block;

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

.menu-link {
	display: block;
	padding: .75rem 1rem;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--shadow-strong-10);

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

.footer {
	height: 3rem;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	box-shadow: 0 0 3px var(--shadow-weak-30);

	.close {
		width: 1rem;
		padding: 0 1rem;
		height: auto;
		fill: var(--shadow);
	}

	&:hover {
		cursor: pointer;

		.icon {
			fill: var(--primary);
		}
	}
}
</style>