<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(--glass-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(--glass); } &:hover { cursor: pointer; .icon { fill: var(--primary); } } } </style>