111 lines
1.8 KiB
Vue
111 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<nav class="nav-list noselect">
|
||
|
|
<a
|
||
|
|
href="/updates"
|
||
|
|
class="nav-item updates nolink"
|
||
|
|
:class="{ active: activePage === 'updates' }"
|
||
|
|
>
|
||
|
|
<div class="nav-pill">Updates</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/actors"
|
||
|
|
class="nav-item actors nolink"
|
||
|
|
:class="{ active: activePage === 'actors' }"
|
||
|
|
>
|
||
|
|
<div class="nav-pill">Actors</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/channels"
|
||
|
|
class="nav-item channels nolink"
|
||
|
|
:class="{ active: activePage === 'channels' }"
|
||
|
|
>
|
||
|
|
<div class="nav-pill">Channels</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<button
|
||
|
|
class="nav-item nav-button"
|
||
|
|
@click="emit('sidebar')"
|
||
|
|
>
|
||
|
|
<div class="nav-pill">
|
||
|
|
<Icon
|
||
|
|
icon="menu"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed, inject } from 'vue';
|
||
|
|
|
||
|
|
const emit = defineEmits(['sidebar']);
|
||
|
|
const pageContext = inject('pageContext');
|
||
|
|
|
||
|
|
const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.nav-list {
|
||
|
|
display: flex;
|
||
|
|
align-items: stretch;
|
||
|
|
flex-shrink: 0;
|
||
|
|
position: relative; /* required for box-shadow to show */
|
||
|
|
background: var(--grey-dark-40);
|
||
|
|
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex-grow: 1;
|
||
|
|
padding: .5rem;
|
||
|
|
border: none;
|
||
|
|
background: none;
|
||
|
|
color: var(--highlight-strong-20);
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: .9rem;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
.nav-pill {
|
||
|
|
color: var(--text-light);
|
||
|
|
background: var(--highlight-weak-30);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
fill: var(--text-light);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: var(--text-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 1.5rem;
|
||
|
|
height: 1.5rem;
|
||
|
|
fill: var(--highlight-strong-10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-pill {
|
||
|
|
width: 100%;
|
||
|
|
height: 1rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: .5rem 1rem;
|
||
|
|
border-radius: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(--small-50) {
|
||
|
|
.nav-item.channels {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|