traxxx-web/components/footer/navigation.vue

111 lines
1.9 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 0;
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-60) {
.nav-item.channels {
display: none;
}
}
</style>