Fix Mobile Navigation Responsiveness in Admin and Dark Lab Portals

[prince-shakyaa]

PR Description: Fix Mobile Navigation Sidebar for Admin and Dark Lab Portals

Summary

This PR resolves a critical UI/UX bug where the mobile hamburger menu sidebar in the Admin and Dark Lab portals was unresponsive to touch interactions. While the sidebar would open, the links inside (e.g., "Messages") were unclickable due to stacking context conflicts and overlay interception.

Changes Made

• Layout & Stacking Fix: Removed restrictive relative z-10 and overflow-hidden from main layout wrappers in admin/base.html and darklab/base.html. This prevents the sidebar from being "trapped" in a lower layer than the background overlay.
• Vendor Layout Alignment: Updated sidebars to use sticky top-0 h-screen, matching the working implementation in the Vendor portal.
• CSS Layering Normalization:
  • Established a robust z-index hierarchy in portal.css: Toggle (10002) > Sidebar (10001) > Overlay (10000).
  • Scoped the sidebar-overlay to left: 320px on mobile, ensuring it physically cannot overlap the sidebar area and intercept clicks.
  • Applied pointer-events: auto !important to the open sidebar and all descendant anchors to force interaction registration.
• Touch Navigation Handler:
  • Implemented a touchend listener in sidebar.init() (utils.js) that forces window.location.href navigation.
  • Injected an inline _attachMobileSidebarNav() script in the base templates to guarantee the fix works even if static files are cached.

Rationale

The issue was multi-faceted:

1. The overflow-hidden and z-index on wrappers created a "caged" stacking context.
2. The sidebar-overlay was set to left: 0, meaning it sat invisibly on top of the sidebar links, swallowing all click/touch events.
3. Browser caching sometimes prevented new logic in utils.js from being applied immediately.

By fixing the CSS layering and adding capture-phase touch listeners, we've ensured that navigation links are always reachable and responsive on mobile devices.

Screen Recording

Attach your screen recording here showing the mobile menu opening and successfully navigating to "Messages"

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

Verification

• Verified on mobile emulators that sidebar links now navigate immediately.
• Confirmed z-index hierarchy via browser devtools.
• Verified that the fix does not affect desktop layout or responsiveness.

fixes #493

[prince-shakyaa]

Hi @saikishu ,I've resolved the mobile sidebar unresponsiveness by fixing a hidden overlay interception issue and neutralizing restrictive stacking contexts in the Admin/Dark Lab layouts. This aligns the portals with the working Vendor implementation-ready for your final review.
Thank You.