fix: hamburger menu sidebar slide-in animation targets sidebarRef instead of backdropRef

src/MainMenu.jsx

@@ -16,12 +16,13 @@ const MENU_ITEMS = [
 ];
 
 export default function MainMenu({ onClose, onItemSelect }) {
-  const overlayRef = useRef(null);
+  const sidebarRef = useRef(null);
+  const backdropRef = useRef(null);
 
   useEffect(() => {
-    const el = overlayRef.current;
+    const el = sidebarRef.current;
     if (!el) return;
-    // Trigger enter animation
+    // Trigger enter animation — slide sidebar into view
     requestAnimationFrame(() => { el.style.transform = "translateX(0)"; });
   }, []);
 
@@ -31,7 +32,7 @@ export default function MainMenu({ onClose, onItemSelect }) {
 
   return (
     <div
-      ref={overlayRef}
+      ref={backdropRef}
       onClick={handleBackdropClick}
       style={{
         position: "fixed", inset: 0, zIndex: 999,
@@ -42,6 +43,7 @@ export default function MainMenu({ onClose, onItemSelect }) {
     >
       {/* Sidebar */}
       <div
+        ref={sidebarRef}
         style={{
           width: 260, maxWidth: "75vw", height: "100%",
           background: T.panel,