[Bug]: Mobile Navigation Sidebar unresponsive in Admin and Dark Lab Portals

[prince-shakyaa]

Issue: Mobile Navigation Sidebar Unresponsive in Admin and Dark Lab Portals

Description

The mobile navigation menu (hamburger menu) is non-functional in the Admin Portal and the Dark Lab Portal. While the sidebar opens visually, the links inside the menu (e.g., "Messages", "Dashboard") are unresponsive to touch or clicks. This issue does not affect the Vendor Portal, which remains fully functional.

Root Cause Analysis

The problem was a multi-faceted failure of CSS stacking contexts and event interception:

Technical Details:

1. Stacking Context Trap: The layout wrapper in admin/base.html and darklab/base.html used relative z-10. This "caged" the sidebar in a layer that sat below the background overlay on mobile, preventing it from receiving direct interaction events.
2. Overlay Event Interception: The .sidebar-overlay element was set to left: 0 and right: 0, covering the entire screen. This meant that while the sidebar was visually visible, it was physically sitting behind the transparent overlay. Every tap on a sidebar link was intercepted by the overlay first, which triggered the close() function and "swallowed" the navigation click.
3. Layout Discrepancy: Unlike the working Vendor portal, these sidebars lacked sticky top-0 h-screen positioning, making them more prone to being clipped by parent overflow settings.

Steps to Reproduce

1. Navigate to the Admin Portal or Dark Lab Portal on a mobile device or emulator.
2. Click the hamburger menu icon in the top right to open the sidebar.
3. Attempt to click on any navigation link (e.g., "Messages").
4. Observed Behavior: The sidebar may close, but the browser does not navigate to the selected page.
5. Expected Behavior: The sidebar should navigate to the clicked link immediately.

Proposed Fix

1. Layout Cleanup: Remove relative z-10 and overflow-hidden from the layout containers in base.html.
2. Overlay Scoping: Update portal.css to scope the sidebar overlay to left: 320px on mobile, ensuring it only covers the main content area and does not overlap the sidebar.
3. Positioning: Implement sticky top-0 h-screen for the sidebar to match the Vendor portal's stable implementation.
4. Touch Fallbacks: Implement touchend event handlers in JavaScript to ensure navigation fires even if CSS layering is marginally blocked.

Visual Evidence

Screen Recording

Screen.Recording.2026-05-08.at.18.35.36.mov