evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: added deemix logo in sidebar

Browse Source
This commit is contained in:
Roberto Tonino
2021-01-31 20:44:55 +01:00
parent 7af966e706
commit e8ee55a1db
3 changed files with 517 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/TheSidebar.vue
View File

@@ -1,31 +1,32 @@
<template>
<aside
id="sidebar"
class="top-0 left-0 flex flex-col h-screen bg-panels-bg text-foreground"
:class="{ 'w-12': isSlim }"
:style="{ minWidth: isSlim ? null : '14rem' }"
role="navigation"
aria-label="sidebar"
class="top-0 left-0 flex flex-col h-screen bg-panels-bg text-foreground"
role="navigation"
>
<div class="deemix-icon-container" v-html="deemixIcon" />
<router-link
tag="a"
v-for="link in links"
:key="link.name"
class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
:class="{ 'bg-background-main': activeTablink === link.name }"
:aria-label="link.ariaLabel"
:class="{ 'bg-background-main': activeTablink === link.name }"
:to="{ name: link.routerName }"
class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
tag="a"
@click.native="activeTablink = link.name"
>
<i
class="p-2 text-3xl material-icons side_icon group-hover:text-primary"
:class="{ 'text-primary': activeTablink === link.name }"
class="p-2 text-3xl material-icons side_icon group-hover:text-primary"
>
{{ link.icon }}
</i>
<span
class="ml-5 overflow-hidden capitalize whitespace-no-wrap main-tablinks-text"
:class="{ hidden: isSlim }"
class="ml-5 overflow-hidden capitalize whitespace-no-wrap main-tablinks-text"
style="letter-spacing: 1.3px"
>
{{ $t(link.label) }}
@@ -39,24 +40,24 @@
<span
id="theme_selector"
:class="{ 'inline-grid gap-2': isSlim }"
aria-label="theme selector"
class="flex h-12 mt-5"
role="link"
aria-label="theme selector"
:class="{ 'inline-grid gap-2': isSlim }"
>
<i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme">
brush
</i>
<div
id="theme_togglers"
class="relative flex items-center w-full justify-evenly"
:class="{ 'inline-grid gap-2': isSlim }"
class="relative flex items-center w-full justify-evenly"
>
<div
v-for="theme of THEMES"
:key="theme"
class="w-6 h-6 border rounded-full cursor-pointer theme_toggler border-grayscale-500 gap"
:class="[{ 'theme_toggler--active': currentTheme === theme }, `theme_toggler--${theme}`]"
class="w-6 h-6 border rounded-full cursor-pointer theme_toggler border-grayscale-500 gap"
@click="currentTheme = theme"
/>
</div>
@@ -65,9 +66,18 @@
</template>
<style lang="scss" scoped>
.deemix-icon-container {
display: grid;
place-content: center;
&::v-deep svg {
height: 75px;
}
}
#update-notification {
left: 30px;
top: 12px;
left: 30px;
}
.theme_toggler {
@@ -97,6 +107,7 @@ import { computed, defineComponent, reactive, toRefs } from '@vue/composition-ap
import { links } from '@/data/sidebar'
import { socket } from '@/utils/socket'
import { useTheme } from '@/use/theme'
import deemixIcon from '@/assets/deemix-icon.svg'
export default defineComponent({
setup(props, ctx) {
@@ -124,7 +135,8 @@ export default defineComponent({
...toRefs(state),
THEMES,
currentTheme,
isSlim: computed(() => ctx.root.$store.getters.getSlimSidebar)
isSlim: computed(() => ctx.root.$store.getters.getSlimSidebar),
deemixIcon
}
}
})