DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 36 Pull Requests 1 Releases Wiki Activity

Add sidebar animation #4

Closed
boiii wants to merge 2 commits from (deleted):sidebar-anim into master
pull from: (deleted):sidebar-anim
merge into: DebaucheryLibrarian:master
Conversation 1 Commits 2 Files Changed 3 +170 -140
3 changed files with 170 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/components/container/container.vue
View File

@ -3,10 +3,8 @@
class="container" class="container"
:class="theme" :class="theme"
> >
<Sidebar <Sidebar v-model="showSidebar" />
v-if="showSidebar" <SidebarBackground v-model="showSidebar" />
:toggle-sidebar="toggleSidebar"
/>
<Header :toggle-sidebar="toggleSidebar" /> <Header :toggle-sidebar="toggleSidebar" />
@ -20,10 +18,9 @@
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import EventBus from '../../js/event-bus';
import Header from '../header/header.vue'; import Header from '../header/header.vue';
import Sidebar from '../sidebar/sidebar.vue'; import Sidebar from '../sidebar/sidebar.vue';
import SidebarBackground from '../sidebar/background.vue';
function theme(state) { function theme(state) {
return state.ui.theme; return state.ui.theme;
@ -33,17 +30,11 @@ function toggleSidebar(state) {
this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar; this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
} }
function mounted() {
document.addEventListener('click', () => {
EventBus.$emit('blur');
this.showSidebar = false;
});
}
export default { export default {
components: { components: {
Header, Header,
Sidebar, Sidebar,
SidebarBackground
}, },
data() { data() {
return { return {
@ -55,7 +46,6 @@ export default {
theme, theme,
}), }),
}, },
mounted,
methods: { methods: {
toggleSidebar, toggleSidebar,
}, },

38
assets/components/sidebar/background.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<transition name="fade">
<div v-if="value" @click="toggleSidebar(false)" class="sidebar-container">
</div>
</transition>
</template>
<script>
export default {
props: {
value: {
type: Boolean
}
},
methods: {
toggleSidebar(state) {
this.$emit("input", !!state);
}
},
};
</script>
<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .2s ease-in-out;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.sidebar-container {
height: 100%;
width: 100%;
position: absolute;
z-index: 9;
background: var(--darken-weak);
}
</style>

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

@ -1,123 +1,124 @@
<template> <template>
<div class="sidebar-container"> <transition name="slide">
<div <div
class="sidebar" v-if="value"
@click.stop class="sidebar"
> @click.stop
<div class="sidebar-section"> >
<div class="sidebar-header"> <div class="sidebar-section">
<Icon <div class="sidebar-header">
icon="cross2" <Icon
class="sidebar-close" icon="cross2"
@click.native="toggleSidebar(false)" class="sidebar-close"
/> @click.native="toggleSidebar(false)"
/>
<router-link <router-link
to="/updates" to="/updates"
class="logo-link" class="logo-link"
@click.native="toggleSidebar(false)" @click.native="toggleSidebar(false)"
> >
<h1 class="sidebar-logo"> <h1 class="sidebar-logo">
<div <div
class="logo" class="logo"
v-html="logo" v-html="logo"
/> />
</h1> </h1>
</router-link> </router-link>
</div> </div>
<nav class="nav"> <nav class="nav">
<ul class="nolist"> <ul class="nolist">
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ href, isActive, navigate }" v-slot="{ href, isActive, navigate }"
to="/updates" to="/updates"
@click.native="toggleSidebar(false)" @click.native="toggleSidebar(false)"
> >
<a <a
class="nav-link" class="nav-link"
:href="href" :href="href"
:class="{ active: isActive }" :class="{ active: isActive }"
@click="navigate" @click="navigate"
>Home</a> >Home</a>
</router-link> </router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ href, isActive, navigate }" v-slot="{ href, isActive, navigate }"
to="/actors" to="/actors"
@click.native="toggleSidebar(false)" @click.native="toggleSidebar(false)"
> >
<a <a
class="nav-link" class="nav-link"
:href="href" :href="href"
:class="{ active: isActive }" :class="{ active: isActive }"
@click="navigate" @click="navigate"
>Actors</a> >Actors</a>
</router-link> </router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ href, isActive, navigate }" v-slot="{ href, isActive, navigate }"
to="/networks" to="/networks"
@click.native="toggleSidebar(false)" @click.native="toggleSidebar(false)"
> >
<a <a
class="nav-link" class="nav-link"
:href="href" :href="href"
:class="{ active: isActive }" :class="{ active: isActive }"
@click="navigate" @click="navigate"
>Channels</a> >Channels</a>
</router-link> </router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ href, isActive, navigate }" v-slot="{ href, isActive, navigate }"
to="/tags" to="/tags"
@click.native="toggleSidebar(false)" @click.native="toggleSidebar(false)"
> >
<a <a
class="nav-link" class="nav-link"
:href="href" :href="href"
:class="{ active: isActive }" :class="{ active: isActive }"
@click="navigate" @click="navigate"
>Tags</a> >Tags</a>
</router-link> </router-link>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="sidebar-section toggles noselect"> <div class="sidebar-section toggles noselect">
<label <label
v-show="sfw" v-show="sfw"
class="toggle" class="toggle"
@click="setSfw(false)" @click="setSfw(false)"
><Icon icon="evil2" />Disable safe mode</label> ><Icon icon="evil2" />Disable safe mode</label>
<label <label
v-show="!sfw" v-show="!sfw"
class="toggle" class="toggle"
@click="setSfw(true)" @click="setSfw(true)"
><Icon icon="flower" />Enable safe mode</label> ><Icon icon="flower" />Enable safe mode</label>
<label <label
v-show="theme === 'dark'" v-show="theme === 'dark'"
class="toggle" class="toggle"
@click="setTheme('light')" @click="setTheme('light')"
><Icon icon="sun" />Use light theme</label> ><Icon icon="sun" />Use light theme</label>
<label <label
v-show="theme === 'light'" v-show="theme === 'light'"
class="toggle" class="toggle"
@click="setTheme('dark')" @click="setTheme('dark')"
><Icon icon="moon" />Use dark theme</label> ><Icon icon="moon" />Use dark theme</label>
</div> </div>
</div> </div>
</div> </transition>
</template> </template>
<script> <script>
@ -143,10 +144,9 @@ function setSfw(enabled) {
export default { export default {
props: { props: {
toggleSidebar: { value: {
type: Function, type: Boolean
default: null, }
},
}, },
data() { data() {
return { return {
@ -161,26 +161,28 @@ export default {
}, },
methods: { methods: {
setTheme, setTheme,
setSfw, setSfw,
toggleSidebar(state) {
this.$emit("input", !!state);
}
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sidebar-container { .slide-leave-active,
height: 100%; .slide-enter-active {
width: 100%; transition: 0.2s ease-in-out;
position: absolute; }
z-index: 10; .slide-enter, .slide-leave-to {
background: var(--darken-hint); transform: translate(-100%, 0);
} }
.sidebar { .sidebar {
display: flex; position: fixed;
flex-direction: column; z-index: 10;
justify-content: space-between;
width: 15rem; width: 15rem;
height: 100%; height: 100vh;
color: var(--text); color: var(--text);
background: var(--background); background: var(--background);
box-shadow: 0 0 3px var(--darken-weak); box-shadow: 0 0 3px var(--darken-weak);