Bug: Documentation sidebar overlays page content and cannot be collapsed
The documentation sidebar remains permanently expanded and overlaps the main documentation content on the Swagger UI Installation page. There is no visible option to collapse or hide the sidebar, which makes a significant portion of the content inaccessible.
URL
https://swagger.io/docs/open-source-tools/swagger-ui/usage/installation/
Steps to Reproduce
Open the Swagger UI Installation documentation page.
Open the left navigation menu.
Observe the page layout.
Current Behavior
The left sidebar remains fixed on the screen.
The documentation content is rendered underneath the sidebar.
A large portion of the content becomes hidden.
There is no collapse/minimize control to close the sidebar.
Expected Behavior
The sidebar should either:
be collapsible after opening, or
push the content instead of overlapping it.
The documentation should remain fully readable regardless of whether the sidebar is open.
Impact
This affects readability and navigation, especially on desktop screens where users expect the documentation content to remain fully visible while browsing the navigation menu.
The screenshot clearly shows the left navigation panel covering the documentation content with no visible option to close or minimize it.
Possible Fix
One of the following approaches could resolve the issue:
Add a close/collapse button to the sidebar.
Automatically close the sidebar after a navigation item is selected.
Shift the main content using margin-left or a responsive layout instead of allowing the sidebar to overlay it.
Add an overlay with an outside-click handler so users can dismiss the menu.
Ensure proper responsive behavior by using media queries so the sidebar only behaves as an overlay on smaller screens.
I would also mention one extra observation if you verified it:
The issue appears to occur consistently on desktop Chrome in dark mode and is reproducible after refreshing the page. It does not appear to be a one-time rendering glitch.
Bug: Documentation sidebar overlays page content and cannot be collapsed
The documentation sidebar remains permanently expanded and overlaps the main documentation content on the Swagger UI Installation page. There is no visible option to collapse or hide the sidebar, which makes a significant portion of the content inaccessible.
URL
https://swagger.io/docs/open-source-tools/swagger-ui/usage/installation/
Steps to Reproduce
Open the Swagger UI Installation documentation page.
Open the left navigation menu.
Observe the page layout.
Current Behavior
The left sidebar remains fixed on the screen.
The documentation content is rendered underneath the sidebar.
A large portion of the content becomes hidden.
There is no collapse/minimize control to close the sidebar.
Expected Behavior
The sidebar should either:
be collapsible after opening, or
push the content instead of overlapping it.
The documentation should remain fully readable regardless of whether the sidebar is open.
Impact
This affects readability and navigation, especially on desktop screens where users expect the documentation content to remain fully visible while browsing the navigation menu.
The screenshot clearly shows the left navigation panel covering the documentation content with no visible option to close or minimize it.
Possible Fix
One of the following approaches could resolve the issue:
Add a close/collapse button to the sidebar.
Automatically close the sidebar after a navigation item is selected.
Shift the main content using margin-left or a responsive layout instead of allowing the sidebar to overlay it.
Add an overlay with an outside-click handler so users can dismiss the menu.
Ensure proper responsive behavior by using media queries so the sidebar only behaves as an overlay on smaller screens.
I would also mention one extra observation if you verified it:
The issue appears to occur consistently on desktop Chrome in dark mode and is reproducible after refreshing the page. It does not appear to be a one-time rendering glitch.