MY FINAL COMMIT

Author: MichaelSun48

static/app/utils/useResizable.tsx

@@ -38,12 +38,6 @@ interface UseResizableOptions {
    * Triggered when the user starts dragging the resize handle.
    */
   onResizeStart?: () => void;
-
-  /**
-   * The local storage key used to persist the size of the container. If not provided,
-   * the size will not be persisted and the defaultWidth will be used.
-   */
-  sizeStorageKey?: string;
 }
 
 /**
@@ -58,7 +52,6 @@ export const useResizable = ({
   minWidth = RESIZABLE_MIN_WIDTH,
   onResizeEnd,
   onResizeStart,
-  sizeStorageKey,
 }: UseResizableOptions): {
   /**
    * Whether the drag handle is held.
@@ -86,14 +79,9 @@ export const useResizable = ({
 
   useEffect(() => {
     if (ref.current) {
-      const storedSize = sizeStorageKey
-        ? parseInt(localStorage.getItem(sizeStorageKey) ?? '', 10)
-        : undefined;
-
-      ref.current.style.width = `${storedSize ?? initialSize}px`;
+      ref.current.style.width = `${initialSize}px`;
     }
-    console.log(ref.current?.style.width);
-  }, [ref, initialSize, sizeStorageKey]);
+  }, [ref, initialSize]);
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
@@ -139,10 +127,7 @@ export const useResizable = ({
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
     onResizeEnd?.(newSize);
-    if (sizeStorageKey) {
-      localStorage.setItem(sizeStorageKey, newSize.toString());
-    }
-  }, [onResizeEnd, ref, sizeStorageKey, initialSize]);
+  }, [onResizeEnd, ref, initialSize]);
 
   useEffect(() => {
     document.addEventListener('mousemove', handleMouseMove);

static/app/views/nav/constants.tsx

@@ -2,7 +2,7 @@ export const NAV_SIDEBAR_COLLAPSED_LOCAL_STORAGE_KEY = 'navigation-sidebar-is-co
 
 export const PRIMARY_SIDEBAR_WIDTH = 74;
 export const SECONDARY_SIDEBAR_WIDTH = 190;
-export const SECONDARY_SIDEBAR_MIN_WIDTH = 100;
+export const SECONDARY_SIDEBAR_MIN_WIDTH = 150;
 export const SECONDARY_SIDEBAR_MAX_WIDTH = 500;
 
 // Slightly delay closing the nav to prevent accidental dismissal

static/app/views/nav/secondary/secondarySidebar.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import useResizable from 'sentry/utils/useResizable';
+import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
 import {
   SECONDARY_SIDEBAR_MAX_WIDTH,
   SECONDARY_SIDEBAR_MIN_WIDTH,
@@ -25,16 +26,23 @@ export function SecondarySidebar() {
   const resizableContainerRef = useRef<HTMLDivElement>(null);
   const resizeHandleRef = useRef<HTMLDivElement>(null);
 
+  const [secondarySidebarWidth, setSecondarySidebarWidth] = useSyncedLocalStorageState(
+    'secondary-sidebar-width',
+    SECONDARY_SIDEBAR_WIDTH
+  );
+
   const {
     onMouseDown: handleStartResize,
     size,
     onDoubleClick,
   } = useResizable({
     ref: resizableContainerRef,
-    initialSize: SECONDARY_SIDEBAR_WIDTH,
+    initialSize: secondarySidebarWidth,
     minWidth: SECONDARY_SIDEBAR_MIN_WIDTH,
     maxWidth: SECONDARY_SIDEBAR_MAX_WIDTH,
-    sizeStorageKey: 'secondary-sidebar-width',
+    onResizeEnd: newWidth => {
+      setSecondarySidebarWidth(newWidth);
+    },
   });
 
   const {activePrimaryNavGroup} = useNavContext();

static/app/views/nav/sidebar.tsx

@@ -11,6 +11,7 @@ import {isActiveSuperuser} from 'sentry/utils/isActiveSuperuser';
 import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
 import {PRIMARY_SIDEBAR_WIDTH, SECONDARY_SIDEBAR_WIDTH} from 'sentry/views/nav/constants';
 import {useNavContext} from 'sentry/views/nav/context';
 import {OrgDropdown} from 'sentry/views/nav/orgDropdown';
@@ -37,6 +38,11 @@ export function Sidebar() {
   const isCollapsed = forceExpanded ? false : isCollapsedState;
   const {isOpen} = useCollapsedNav();
 
+  const [secondarySidebarWidth] = useSyncedLocalStorageState(
+    'secondary-sidebar-width',
+    SECONDARY_SIDEBAR_WIDTH
+  );
+
   useTourModal();
 
   return (
@@ -63,9 +69,15 @@ export function Sidebar() {
           animate={isOpen ? 'visible' : 'hidden'}
           variants={{
             visible: {x: 0},
-            hidden: {x: -SECONDARY_SIDEBAR_WIDTH - 10},
+            hidden: {x: -secondarySidebarWidth - 10},
+          }}
+          transition={{
+            type: 'spring',
+            damping: 50,
+            stiffness: 700,
+            bounce: 0,
+            visualDuration: 0.1,
           }}
-          transition={{duration: 0.15, ease: 'easeOut'}}
           data-test-id="collapsed-secondary-sidebar"
           data-visible={isOpen}
         >