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

feat(style): SVG switchable monochrome logo in sidebar

This commit is contained in:
ArneBo 2024-12-23 13:45:40 +01:00 committed by upsiflu
parent 9dd10d856d
commit 840c0c4fc0
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/Logo.vue
View File

@ -4,7 +4,7 @@ interface Props {
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
fill: '#222222' fill: 'var(--color)'
}) })
</script> </script>

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

@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch, computed } from 'vue'
import { useUploadsStore } from '../stores/upload' import { useUploadsStore } from '../stores/upload'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
import { color } from '~/composables/colors' import { color } from '~/composables/colors'
import Logo from '~/components/Logo.vue'
import Input from '~/components/ui/Input.vue' import Input from '~/components/ui/Input.vue'
import Link from '~/components/ui/Link.vue' import Link from '~/components/ui/Link.vue'
import ActorAvatar from '~/components/common/ActorAvatar.vue' import ActorAvatar from '~/components/common/ActorAvatar.vue'
@ -30,20 +31,20 @@ const { t } = useI18n()
const store = useStore() const store = useStore()
const uploads = useUploadsStore() const uploads = useUploadsStore()
const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
</script> </script>
<template> <template>
<Layout aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color({}, ['default', 'solid', 'raised'])"> <Layout aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color({}, ['default', 'solid', 'raised'])">
<Layout flex no-gap header style="justify-content:space-between; padding-right:8px;"> <Layout flex no-gap header style="justify-content:space-between; padding-right:8px;">
<Link to="/" <Link
:to="{name: logoUrl}"
:class="$style['logo']" :class="$style['logo']"
> >
<img <i>
src="../../assets/logo/logo.svg" <Logo />
alt="Logo" <span class="visually-hidden">{{ t('components.Sidebar.link.home') }}</span>
width="40px" </i>
height="40px"
>
</Link> </Link>
<Layout nav no-gap flex style="align-items: center;"> <Layout nav no-gap flex style="align-items: center;">
@ -187,8 +188,10 @@ const uploads = useUploadsStore()
.sidebar { .sidebar {
.logo { .logo {
padding-left: 16px; display: block;
padding-top: 8px; width: 40px;
height: 40px;
margin: 16px;
} }
&.sticky-content { &.sticky-content {
@ -281,18 +284,18 @@ const uploads = useUploadsStore()
} }
} }
:global(.hide-on-mobile){ :global(.hide-on-mobile) {
display: none; display: none;
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
height: 100%; height: 100%;
:global(.hide-on-desktop){ :global(.hide-on-desktop) {
display: none !important; display: none !important;
} }
:global(.hide-on-mobile){ :global(.hide-on-mobile) {
display: inherit; display: inherit;
} }