traxxx-web/components/sidebar/sidebar.vue

181 lines
2.8 KiB
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>