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

@@ -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 {