Fix mobile navigation submenu collapse on Bootstrap 4

[Copilot]

Mobile menu submenus briefly flash then disappear after tapping, leaving empty boxes.

Root Cause

Two CSS incompatibilities:

1. metisMenu library lacks Bootstrap 4 support - only recognizes legacy .collapse.in class, not Bootstrap 4's .collapse.show
2. Disabled CSS transitions break collapse height calculation - transition: none prevents Bootstrap's collapse component from computing element height, causing content to remain at 0px

Changes

metisMenu Bootstrap 4 compatibility

/* Added .show class support alongside .in for backward compatibility */
.metismenu .collapse.in,
.metismenu .collapse.show {
  display: block;
}

Removed transition override

/* REMOVED - was breaking Bootstrap collapse animation */
.metismenu .nav-second-level {
  transition: none;
}

Files Changed

• metisMenu.css / metisMenu.min.css - Added .show class support
• responsive-overrides.css - Removed mobile transition override

The fix maintains backward compatibility with Bootstrap 3 while enabling proper Bootstrap 4 collapse behavior.

Original prompt

The side navigation menu is not working properly when on a small device e.g. mobile

the user clicks a top-level icon e.g the servers administration one, the sub menu appears with all items. then, all the sub menu items disappear and there is just an empty box left.

please resolve/fix

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This pull request attempts to fix a mobile navigation submenu collapse issue where submenus briefly flash then disappear after tapping. The fix targets two CSS incompatibilities: metisMenu library's lack of Bootstrap 4+ support for the .collapse.show class, and disabled CSS transitions that break Bootstrap's collapse height calculation.

Changes:

• Added .collapse.show class support to metisMenu CSS files for Bootstrap 4+ compatibility
• Removed transition: none override that was preventing proper collapse animation

Reviewed changes

Copilot reviewed 1 out of 3 changed files in this pull request and generated no comments.

File	Description
src/XtremeIdiots.Portal.Web/wwwroot/lib/metisMenu/dist/metisMenu.css	Added .collapse.show selector alongside .collapse.in for Bootstrap 4+ compatibility
src/XtremeIdiots.Portal.Web/wwwroot/lib/metisMenu/dist/metisMenu.min.css	Minified version of the same Bootstrap 4+ compatibility change
src/XtremeIdiots.Portal.Web/wwwroot/css/responsive-overrides.css	Removed mobile-specific transition: none override that was breaking collapse animation

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud