Fix hydration flash in global sidebar nav

[rakesh2OO5]

Summary

This PR removes the hydration mismatch in the global NavPanels component that caused the sidebar to visually "flash" on reload, especially on desktop.

The fix lazily initializes isMobile and isOpen state from window.innerWidth instead of mutating layout state in useEffect, ensuring the server-rendered HTML matches the first client render.

What Changed

• Initialize isMobile and isOpen using a lazy useState initializer
• Replace ResizeObserver with a simple window.resize listener for breakpoint changes
• No changes to existing UX behavior or styles

Behavior Notes (Mobile)

To keep this fix scoped to the original issue, SSR still assumes a desktop layout to prevent the desktop hydration flash.
On mobile hard reloads, this can cause a brief state resync (no visible flash), where the first toggle click may synchronize state before closing.

If desired, I can follow up with a mobile-specific PR using a CSS or client:media-based approach.

Testing

• Desktop: Sidebar remains stable on hard reload (no flash)
• Mobile: Both panels closed on initial load, single-panel open behavior preserved
• Resize: Desktop ↔ Mobile transitions preserve original UX rules

Related Issue

Closes #477

[rakesh2OO5]

@coseeian I reworked the fix to address the root hydration mismatch in NavPanels with a minimal diff. Desktop flash is now eliminated while preserving existing UX. Mobile behavior is noted in the description — happy to follow up if you'd like that addressed separately. Thanks for the guidance!

[rakesh2OO5]

Closing in favor of continuing the fix in #1094 to keep discussion and review in one place.