Added mobile navigation.
This commit is contained in:
110
components/footer/navigation.vue
Normal file
110
components/footer/navigation.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<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>
|
||||
@@ -159,7 +159,8 @@ async function logout() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 1000; /* make sure shadow shows up above content */
|
||||
position: relative;
|
||||
z-index: 100; /* make sure shadow shows up above content */
|
||||
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||||
}
|
||||
|
||||
@@ -192,6 +193,7 @@ async function logout() {
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -223,6 +225,10 @@ async function logout() {
|
||||
border: none;
|
||||
margin: 0;
|
||||
background: none;
|
||||
|
||||
&:placeholder-shown {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.search-button {
|
||||
@@ -321,7 +327,7 @@ async function logout() {
|
||||
|
||||
@media(--small) {
|
||||
.search .input {
|
||||
width: 10rem;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -329,5 +335,18 @@ async function logout() {
|
||||
.nav-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.search .input {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -299,19 +299,23 @@ function updateFilter(prop, value, reload = true) {
|
||||
}
|
||||
|
||||
.scopes {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
margin: .75rem 0 .25rem 1rem;
|
||||
}
|
||||
|
||||
.scope {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
background: var(--background-dark-20);
|
||||
border-radius: 1rem;
|
||||
color: var(--shadow);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
|
||||
&.active {
|
||||
color: var(--primary);
|
||||
font-weight: bold;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
137
components/sidebar/sidebar.vue
Normal file
137
components/sidebar/sidebar.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<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 === '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>
|
||||
</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>
|
||||
Reference in New Issue
Block a user