Improved sidebar design, added sfw and theme toggles.
This commit is contained in:
DebaucheryLibrarian
@@ -1,98 +1,146 @@
|
||||
<template>
|
||||
<div
|
||||
class="sidebar"
|
||||
@click.stop
|
||||
>
|
||||
<div class="sidebar-header">
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="sidebar-close"
|
||||
@click.native="toggleSidebar(false)"
|
||||
/>
|
||||
|
||||
<router-link
|
||||
to="/updates"
|
||||
class="logo-link"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<h1 class="sidebar-logo">
|
||||
<div
|
||||
class="logo"
|
||||
v-html="logo"
|
||||
<div class="sidebar-container">
|
||||
<div
|
||||
class="sidebar"
|
||||
@click.stop
|
||||
>
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-header">
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="sidebar-close"
|
||||
@click.native="toggleSidebar(false)"
|
||||
/>
|
||||
</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<ul class="nolist">
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/updates"
|
||||
class="logo-link"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Home</a>
|
||||
<h1 class="sidebar-logo">
|
||||
<div
|
||||
class="logo"
|
||||
v-html="logo"
|
||||
/>
|
||||
</h1>
|
||||
</router-link>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/actors"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Actors</a>
|
||||
</router-link>
|
||||
</li>
|
||||
<nav class="nav">
|
||||
<ul class="nolist">
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/updates"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Home</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/networks"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Channels</a>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/actors"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Actors</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/tags"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Tags</a>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/networks"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Channels</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/tags"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Tags</a>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section toggles noselect">
|
||||
<label
|
||||
v-show="sfw"
|
||||
class="toggle"
|
||||
@click="setSfw(false)"
|
||||
><Icon icon="evil2" />Disable safe mode</label>
|
||||
|
||||
<label
|
||||
v-show="!sfw"
|
||||
class="toggle"
|
||||
@click="setSfw(true)"
|
||||
><Icon icon="flower" />Enable safe mode</label>
|
||||
|
||||
<label
|
||||
v-show="theme === 'dark'"
|
||||
class="toggle"
|
||||
@click="setTheme('light')"
|
||||
><Icon icon="sun" />Use light theme</label>
|
||||
|
||||
<label
|
||||
v-show="theme === 'light'"
|
||||
class="toggle"
|
||||
@click="setTheme('dark')"
|
||||
><Icon icon="moon" />Use dark theme</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
import logo from '../../img/logo.svg';
|
||||
|
||||
function sfw(state) {
|
||||
return state.ui.sfw;
|
||||
}
|
||||
|
||||
function theme(state) {
|
||||
return state.ui.theme;
|
||||
}
|
||||
|
||||
function setTheme(newTheme) {
|
||||
this.$store.dispatch('setTheme', newTheme);
|
||||
}
|
||||
|
||||
function setSfw(enabled) {
|
||||
this.$store.dispatch('setSfw', enabled);
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
toggleSidebar: {
|
||||
@@ -105,17 +153,34 @@ export default {
|
||||
logo,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
sfw,
|
||||
theme,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
setTheme,
|
||||
setSfw,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: var(--darken-hint);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 15rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: var(--text);
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--darken);
|
||||
@@ -130,13 +195,13 @@ export default {
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
width: 1.5rem;
|
||||
width: 1.25rem;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
fill: var(--darken);
|
||||
padding: 0 1.125rem;
|
||||
fill: var(--shadow-modest);
|
||||
|
||||
&:hover {
|
||||
fill: var(--text);
|
||||
fill: var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -167,22 +232,52 @@ export default {
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--shadow-strong);
|
||||
color: var(--shadow);
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
color: var(--shadow-strong);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.toggles {
|
||||
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;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
&.active .icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--shadow-strong);
|
||||
|
||||
&:not(.active) .icon {
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark .sidebar {
|
||||
background: var(--profile);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user