From 70c19a70b26ba30dfa6d41fa3a3fece0dca3241f Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 27 Mar 2025 00:05:53 +0100
Subject: [PATCH] fix(front): sidebar collapsing (mobile)

---
 front/src/App.vue                    |  1 -
 front/src/style/globals/_layout.scss |  1 -
 front/src/ui/components/Sidebar.vue  | 10 ++++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 6cc415436..3822ccf26 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -119,7 +119,6 @@ store.dispatch('auth/fetchUser')
 <style scoped lang="scss">
 .responsive {
   display: grid !important;
-  grid-template-columns: 100% 0 0;
   grid-template-rows: min-content;
   min-height: calc(100vh - 64px);
 
diff --git a/front/src/style/globals/_layout.scss b/front/src/style/globals/_layout.scss
index bc53a140b..ceeb62818 100644
--- a/front/src/style/globals/_layout.scss
+++ b/front/src/style/globals/_layout.scss
@@ -40,7 +40,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
   &.has-bottom-player {
     padding-bottom: $bottom-player-height;
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 3ca0726cf..5d59eb13b 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -191,6 +191,7 @@ const moderationNotifications = computed(() =>
           icon="bi-list large"
           class="hide-on-desktop"
           :class="$style.menu"
+          :aria-pressed="isCollapsed ? undefined : true"
           @click="isCollapsed=!isCollapsed"
         />
       </Layout>
@@ -382,7 +383,6 @@ const moderationNotifications = computed(() =>
   }
 
   &.sticky-content {
-    max-height: 100dvh;
     overflow: auto;
     top: 0;
 
@@ -459,7 +459,8 @@ const moderationNotifications = computed(() =>
   }
 
   :global(.hide-on-mobile) {
-    display: none;
+    max-height: 0px;
+    pointer-events: none;
   }
 
   @media screen and (min-width: 1024px) {
@@ -470,12 +471,13 @@ const moderationNotifications = computed(() =>
     }
 
     :global(.hide-on-mobile) {
-      display: inherit;
+      max-height: 100dvh;
+      transition: all .8s;
     }
 
     &.sticky-content {
       position: sticky;
-      height: 100%;
+      max-height: 100dvh;
     }
   }
 }