fix(front): sidebar collapsing (mobile)

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);
 

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;

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;
     }
   }
 }