From b1804d3d31c9962ef47d1751ef146ddc555c137e Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 19 Dec 2024 11:10:25 +0100
Subject: [PATCH] fix(ui): responsive sidebar stays open on desktop when url
 changes

---
 front/src/ui/components/Sidebar.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index cbb1566e8..b3512b814 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -27,6 +27,7 @@ Sidebar on slim screen
 const isCollapsed = ref(false)
 
 const route = useRoute()
+
 watch(() => route.path, () => ( isCollapsed.value = true ))
 
 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"/>
       </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">
         <Input
           v-model="searchQuery"
@@ -295,11 +296,19 @@ const uploads = useUploadsStore()
     }
   }
 
+  :global(.hide-on-mobile){
+    display: none;
+  }
+
   @media screen and (min-width: 1024px) {
     height: 100%;
 
     :global(.hide-on-desktop){
-      display: none !important;
+      display: none;
+    }
+
+    :global(.hide-on-mobile){
+      display: inherit;
     }
 
     &.sticky-content {