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

fix(ui): responsive sidebar stays open on desktop when url changes

This commit is contained in:
ArneBo 2024-12-19 11:10:25 +01:00 committed by upsiflu
parent 5f6d0c6bb2
commit d8111dcbf6
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,7 @@ Sidebar on slim screen
const isCollapsed = ref(false) const isCollapsed = ref(false)
const route = useRoute() const route = useRoute()
watch(() => route.path, () => ( isCollapsed.value = true )) watch(() => route.path, () => ( isCollapsed.value = true ))
const { openShortcutsModal } = defineProps<{ openShortcutsModal: ()=> void }>() const { openShortcutsModal } = defineProps<{ openShortcutsModal: ()=> void }>()
@ -90,7 +91,7 @@ const uploads = useUploadsStore()
<Button round ghost icon="bi-list large" class="hide-on-desktop" @click="isCollapsed=!isCollapsed"/> <Button round ghost icon="bi-list large" class="hide-on-desktop" @click="isCollapsed=!isCollapsed"/>
</Layout> </Layout>
</Layout> </Layout>
<Layout no-gap stack :class="$style['menu-links']" v-if="!isCollapsed"> <Layout no-gap stack :class="[$style['menu-links'], isCollapsed && 'hide-on-mobile']">
<div :class="$style.search"> <div :class="$style.search">
<Input <Input
v-model="searchQuery" v-model="searchQuery"
@ -295,11 +296,19 @@ const uploads = useUploadsStore()
} }
} }
:global(.hide-on-mobile){
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;
}
:global(.hide-on-mobile){
display: inherit;
} }
&.sticky-content { &.sticky-content {