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

style: removed grayscale filters on sidebar; style: refactored sidebar; style: now the sidebar is fixed

Browse Source
This commit is contained in:
Roberto Tonino
2020-10-16 23:02:34 +02:00
parent 2f42f965d2
commit 09f3b2138d
7 changed files with 61 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TheSearchBar.vue
View File

@@ -3,8 +3,10 @@
<div class="search__icon">
<i class="material-icons">search</i>
</div>
<input
id="searchbar"
class="w-full"
autocomplete="off"
type="search"
name="searchbar"

31
src/components/TheSidebar.vue
View File

@@ -1,18 +1,29 @@
<template>
<aside id="sidebar" role="navigation" aria-label="sidebar">
<aside
id="sidebar"
class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-panels-text"
role="navigation"
aria-label="sidebar"
>
<router-link
tag="a"
v-for="link in links"
:key="link.id"
tag="a"
class="main_tablinks"
class="relative flex items-center h-16 no-underline main_tablinks"
:id="link.id"
:class="{ active: activeTablink === link.name }"
:aria-label="link.ariaLabel"
:to="{ name: link.routerName }"
@click.native="activeTablink = link.name"
style="transition: all 500ms; color: inherit"
>
<i class="material-icons side_icon">{{ link.icon }}</i>
<span class="main_tablinks_text">{{ $t(link.label) }}</span>
<i class="p-2 text-3xl transition-all duration-500 material-icons side_icon">{{ link.icon }}</i>
<span
class="ml-5 overflow-hidden capitalize whitespace-no-wrap transition-all duration-75 ease-in-out delay-200 opacity-0 main_tablinks_text"
style="letter-spacing: 1.3px"
>
{{ $t(link.label) }}
</span>
<span
v-if="link.name === 'about' && updateAvailable"
id="update-notification"
@@ -20,13 +31,15 @@
></span>
</router-link>
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
<i class="material-icons side_icon side_icon--theme">palette</i>
<div id="theme_togglers">
<span class="flex h-12 mt-5" role="link" aria-label="theme selector">
<i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme">
palette
</i>
<div id="theme_togglers" class="relative flex items-center w-full justify-evenly">
<div
v-for="theme of themes"
:key="theme"
class="theme_toggler"
class="w-6 h-6 border rounded-full cursor-pointer theme_toggler border-grayscale-500"
:class="[{ 'theme_toggler--active': activeTheme === theme }, `theme_toggler--${theme}`]"
@click="changeTheme(theme)"
></div>