boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Added filter dialog toggle to sidebar. Moved filter dialog to container. Using events to toggle sidebar from header.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-01-03 23:32:09 +01:00
parent 7bbb2f3557
commit cb4b5ce640
5 changed files with 69 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
assets/components/sidebar/sidebar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
class="sidebar-container"
@click="$emit('toggle', false)"
@click="$emit('toggleSidebar', false)"
>
<div
class="sidebar"
@@ -12,7 +12,7 @@
<router-link
to="/updates"
class="logo-link"
@click.native="$emit('toggle', false)"
@click="$emit('toggleSidebar', false)"
>
<h1 class="sidebar-logo">
<div
@@ -25,23 +25,25 @@
<Icon
icon="cross2"
class="sidebar-close noselect"
@click.native="$emit('toggle', false)"
@click.native="$emit('toggleSidebar', false)"
/>
</div>
<Search
class="search"
@search="$emit('toggle', false)"
@search="$emit('toggleSidebar', false)"
/>
<nav class="nav">
<ul class="nolist">
<li class="nav-item">
<li
class="nav-item"
@click="$emit('toggleSidebar', false)"
>
<router-link
v-slot="{ href, isActive, navigate }"
to="/updates"
custom
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@@ -52,12 +54,14 @@
</router-link>
</li>
<li class="nav-item">
<li
class="nav-item"
@click="$emit('toggleSidebar', false)"
>
<router-link
v-slot="{ href, isActive, navigate }"
to="/actors"
custom
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@@ -68,12 +72,14 @@
</router-link>
</li>
<li class="nav-item">
<li
class="nav-item"
@click="$emit('toggleSidebar', false)"
>
<router-link
v-slot="{ href, isActive, navigate }"
to="/networks"
to="/channels"
custom
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@@ -84,12 +90,14 @@
</router-link>
</li>
<li class="nav-item">
<li
class="nav-item"
@click="$emit('toggleSidebar', false)"
>
<router-link
v-slot="{ href, isActive, navigate }"
to="/movies"
custom
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@@ -100,12 +108,14 @@
</router-link>
</li>
<li class="nav-item">
<li
class="nav-item"
@click="$emit('toggleSidebar', false)"
>
<router-link
v-slot="{ href, isActive, navigate }"
to="/tags"
custom
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@@ -143,6 +153,11 @@
class="toggle"
@click="setTheme('dark')"
><Icon icon="moon" />Use dark theme</label>
<label
class="toggle"
@click="$emit('showFilters', true)"
><Icon icon="filter" />Filters</label>
</div>
</div>
</div>
@@ -175,6 +190,7 @@ export default {
components: {
Search,
},
emits: ['toggleSidebar', 'showFilters'],
data() {
return {
logo,
@@ -240,6 +256,12 @@ export default {
margin: 0;
}
.sidebar-section {
display: flex;
flex-direction: column;
overflow: hidden;
}
.logo-link {
display: block;
height: 100%;
@@ -265,6 +287,11 @@ export default {
}
}
.nav {
flex-grow: 1;
overflow-x: auto;
}
.nav-item {
display: block;
}
@@ -286,13 +313,13 @@ export default {
}
.toggles {
flex-shrink: 0;
border-top: solid 1px var(--shadow-hint);
margin: .5rem 0 0 0;
}
.toggle {
display: flex;
align-self: flex-end;
padding: 1rem;
color: var(--shadow);
font-weight: bold;