fix: revert sidebar collapse animation from #4862 (#4867)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

assets/auto-imports.d.ts

@@ -457,12 +457,10 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly DEFAULT_MENU_WIDTH: UnwrapRef<typeof import('./stores/settings')['DEFAULT_MENU_WIDTH']>
     readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./stores/settings')['DEFAULT_SETTINGS']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly K8sNamespace: UnwrapRef<typeof import('./stores/k8s')['K8sNamespace']>
     readonly K8sOwner: UnwrapRef<typeof import('./stores/k8s')['K8sOwner']>
-    readonly MIN_MENU_WIDTH: UnwrapRef<typeof import('./stores/settings')['MIN_MENU_WIDTH']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly allLevels: UnwrapRef<typeof import('./composable/logContext')['allLevels']>
     readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>

assets/layouts/default.vue

@@ -1,15 +1,11 @@
 <template>
   <div>
     <MobileMenu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></MobileMenu>
-    <Splitpanes @resized="onResized($event)" :class="{ 'nav-collapsed': collapseNav }">
-      <Pane
-        :min-size="collapseNav ? 0 : MIN_MENU_WIDTH"
-        :size="collapseNav ? 0 : menuWidth"
-        v-if="!isMobile && !forceMenuHidden"
-      >
-        <SidePanel v-show="!collapseNav" />
+    <Splitpanes @resized="onResized($event)">
+      <Pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav && !forceMenuHidden">
+        <SidePanel />
       </Pane>
-      <Pane :min-size="MIN_MENU_WIDTH" :size="collapseNav ? 100 : 100 - menuWidth">
+      <Pane min-size="10" :size="100 - menuWidth">
         <Splitpanes>
           <Pane class="router-view min-h-screen">
             <router-view></router-view>
@@ -57,7 +53,7 @@
 
 <script lang="ts" setup>
 import { Splitpanes, Pane } from "splitpanes";
-import { collapseNav, MIN_MENU_WIDTH } from "@/stores/settings";
+import { collapseNav } from "@/stores/settings";
 import SideDrawer from "@/components/common/SideDrawer.vue";
 
 const pinnedLogsStore = usePinnedLogsStore();
@@ -89,8 +85,6 @@ onKeyStroke("k", (e) => {
 });
 
 function onResized({ panes }: { panes: { size: number }[] }) {
-  // Ignore the resize that collapsing/expanding triggers; only persist drags.
-  if (collapseNav.value) return;
   if (panes.length == 2) {
     menuWidth.value = Math.min(panes[0].size, 50);
   }
@@ -102,13 +96,6 @@ function onResized({ panes }: { panes: { size: number }[] }) {
 
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
   @apply bg-base-100 hover:bg-secondary min-w-[5px];
-  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
-}
-
-/* Hide (and disable) the resize handle while the sidebar is collapsed. */
-:deep(.splitpanes.nav-collapsed > .splitpanes__splitter) {
-  opacity: 0;
-  pointer-events: none;
 }
 
 @media screen and (max-width: 768px) {

assets/main.css

@@ -214,11 +214,6 @@ body {
 }
 
 .splitpanes--vertical .splitpanes__pane {
-  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
-}
-/* Follow the pointer instantly while dragging; only animate programmatic width
- * changes (collapse, expand). */
-.splitpanes--vertical.splitpanes--dragging .splitpanes__pane {
   transition: none !important;
 }
 

assets/stores/settings.ts

@@ -18,16 +18,11 @@ export type Settings = {
   locale: string;
   groupContainers: "always" | "at-least-2" | "never";
 };
-// Shared sidebar sizing (percent of the window width) so the layout and the
-// collapse/expand handling always agree on one value.
-export const DEFAULT_MENU_WIDTH = 15;
-export const MIN_MENU_WIDTH = 10;
-
 export const DEFAULT_SETTINGS: Settings = {
   search: true,
   compact: false,
   size: "medium",
-  menuWidth: DEFAULT_MENU_WIDTH,
+  menuWidth: 15,
   smallerScrollbars: false,
   showTimestamp: true,
   showStd: false,