MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(style): contain all Sidebar classes inside the module

This commit is contained in:
upsiflu 2024-12-15 15:07:04 +01:00
parent 3865cbac93
commit 925d2db0a6
1 changed files with 17 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
front/src/ui/components/Sidebar.vue
View File

@ -23,9 +23,8 @@ const uploads = useUploadsStore()
</script>
<template>
<aside>
<div class="sticky-content">
<nav class="quick-actions">
<aside :class="[$style.sidebar, $style['sticky-content']]">
<nav :class="$style['quick-actions']">
<Link to="/">
<img
src="../../assets/logo/logo.svg"
@ -47,11 +46,11 @@ const uploads = useUploadsStore()
<Transition>
<div
v-if="uploads.currentIndex < uploads.queue.length"
class="upload-progress"
:class="$style['upload-progress']"
>
<div class="progress fake" />
<div :class="[$style.progress, $style.fake]" />
<div
class="progress"
:class="$style.progress"
:style="{ maxWidth: `${uploads.progress}%` }"
/>
</div>
@ -62,7 +61,7 @@ const uploads = useUploadsStore()
</nav>
<div class="search">
<div :class="$style.search">
<Input
v-model="searchQuery"
type="search"
@ -71,10 +70,9 @@ const uploads = useUploadsStore()
/>
</div>
<nav class="button-list">
<nav :class="$style['button-list']">
<Link to="/library"
color="secondary"
variant="ghost"
icon="bi-compass"
>
Explore
@ -82,76 +80,66 @@ const uploads = useUploadsStore()
</nav>
<nav class="button-list">
<nav :class="$style['button-list']">
<Link to="/library/artists"
color="secondary"
variant="ghost"
icon="bi-person"
>
Artists
</Link>
<Link to="/library/albums"
color="secondary"
variant="ghost"
icon="bi-disc"
>
Albums
</Link>
<Link to="/library/playlists"
color="secondary"
variant="ghost"
icon="bi-music-note-list"
>
Playlists
</Link>
<Link to="/library/radios"
color="secondary"
variant="ghost"
icon="bi-question-diamond"
>
Radios
</Link>
<Link to="/library/podcasts"
color="secondary"
variant="ghost"
icon="bi-mic"
>
Podcasts
</Link>
<Link to="/"
color="secondary"
variant="ghost"
icon="bi-heart"
>
Favorites
</Link>
</nav>
<h3>Channels</h3>
<nav class="footer inline menu">
<Link to="/about">
<nav :class="$style['button-list']">
<Link inline to="/about">
{{ t('components.Sidebar.link.about') }}
</Link>
<Link to="/privacy">
<Link inline to="/privacy">
Privacy
</Link>
<Link to="/legal">
<Link inline to="/legal">
Legal
</Link>
</nav>
</div>
</aside>
</template>
<style scoped lang="scss">
aside {
@include light-theme {
background: var(--fw-beige-300);
}
@include dark-theme {
background: var(--fw-blue-700);
}
<style module lang="scss">
.sidebar {
background-color: var(--fw-bg-raised)
height: 100%;
display:flex;
flex-direction:column;
> .sticky-content {
position: sticky;