Added slide effect to sidebar.

This commit is contained in:
DebaucheryLibrarian 2020-08-08 22:18:55 +02:00
parent a7d5bef93f
commit dd1ea597d4
3 changed files with 42 additions and 22 deletions

View File

@ -3,10 +3,12 @@
class="container"
:class="theme"
>
<transition name="slide">
<Sidebar
v-if="showSidebar"
:toggle-sidebar="toggleSidebar"
@toggle="(state) => showSidebar = state"
/>
</transition>
<Header :toggle-sidebar="toggleSidebar" />
@ -36,7 +38,6 @@ function toggleSidebar(state) {
function mounted() {
document.addEventListener('click', () => {
EventBus.$emit('blur');
this.showSidebar = false;
});
}
@ -88,4 +89,26 @@ export default {
overflow-y: auto;
overflow-x: hidden;
}
.slide-enter-active,
.slide-leave-active {
&.sidebar-container {
transition: background .2s ease-in-out;
}
.sidebar {
transition: transform .2s ease-in-out;
}
}
.slide-enter,
.slide-leave-to {
&.sidebar-container {
background: transparent;
}
.sidebar {
transform: translate(-100%, 0);
}
}
</style>

View File

@ -2,7 +2,7 @@
<header class="header">
<div class="header-nav">
<div
class="sidebar-toggle"
class="sidebar-toggle noselect"
@click.stop="toggleSidebar"
><Icon icon="menu" /></div>

View File

@ -1,5 +1,8 @@
<template>
<div class="sidebar-container">
<div
class="sidebar-container"
@click="$emit('toggle', false)"
>
<div
class="sidebar"
@click.stop
@ -8,14 +11,14 @@
<div class="sidebar-header">
<Icon
icon="cross2"
class="sidebar-close"
@click.native="toggleSidebar(false)"
class="sidebar-close noselect"
@click.native="$emit('toggle', false)"
/>
<router-link
to="/updates"
class="logo-link"
@click.native="toggleSidebar(false)"
@click.native="$emit('toggle', false)"
>
<h1 class="sidebar-logo">
<div
@ -32,7 +35,7 @@
<router-link
v-slot="{ href, isActive, navigate }"
to="/updates"
@click.native="toggleSidebar(false)"
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@ -47,7 +50,7 @@
<router-link
v-slot="{ href, isActive, navigate }"
to="/actors"
@click.native="toggleSidebar(false)"
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@ -62,7 +65,7 @@
<router-link
v-slot="{ href, isActive, navigate }"
to="/networks"
@click.native="toggleSidebar(false)"
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@ -77,7 +80,7 @@
<router-link
v-slot="{ href, isActive, navigate }"
to="/movies"
@click.native="toggleSidebar(false)"
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@ -92,7 +95,7 @@
<router-link
v-slot="{ href, isActive, navigate }"
to="/tags"
@click.native="toggleSidebar(false)"
@click.native="$emit('toggle', false)"
>
<a
class="nav-link"
@ -157,12 +160,6 @@ function setSfw(enabled) {
}
export default {
props: {
toggleSidebar: {
type: Function,
default: null,
},
},
data() {
return {
logo,
@ -187,7 +184,7 @@ export default {
width: 100%;
position: absolute;
z-index: 10;
background: var(--darken-hint);
background: var(--darken-weak);
}
.sidebar {