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="container"
:class="theme" :class="theme"
> >
<transition name="slide">
<Sidebar <Sidebar
v-if="showSidebar" v-if="showSidebar"
:toggle-sidebar="toggleSidebar" @toggle="(state) => showSidebar = state"
/> />
</transition>
<Header :toggle-sidebar="toggleSidebar" /> <Header :toggle-sidebar="toggleSidebar" />
@ -36,7 +38,6 @@ function toggleSidebar(state) {
function mounted() { function mounted() {
document.addEventListener('click', () => { document.addEventListener('click', () => {
EventBus.$emit('blur'); EventBus.$emit('blur');
this.showSidebar = false;
}); });
} }
@ -88,4 +89,26 @@ export default {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; 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> </style>

View File

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

View File

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