traxxx-web/components/sidebar/sidebar.vue

138 lines
2.2 KiB
Vue

<template>
<div
class="sidebar-container"
@click="emit('sidebar')"
>
<div
class="sidebar"
@click.stop
>
<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 === 'cats' }"
>
<a
href="/cats"
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>
</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 {
width: 15rem;
max-width: 100%;
height: 100%;
margin-left: 2rem;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-strong-30);
}
.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);
}
}
</style>