Skip to content

Move wiki sidebar to the left side

Janis Altherrrequested to merge
569910-move-wiki-sidebar-to-left-side into master

What does this MR do and why?

This change redesigns how the wiki sidebar works on the page. Previously, the sidebar was positioned on the right side and used a single toggle button to open/close it. Now, the sidebar has been moved to the left side, in preparation to show contextual comments on the right.

The main improvements include:

  • Moving the sidebar toggle button from the actions area to the page header for easier access
  • Replacing the old CSS classes (like "right-sidebar") with new ones (like "wiki-sidebar") to reflect the new positioning
  • Updating the layout so the sidebar appears on the left and pushes the main content over when expanded
  • Making the sidebar behavior more responsive on different screen sizes (mobile, tablet, desktop)
  • Simplifying the JavaScript code by having dedicated functions for opening and closing instead of a single toggle function
  • Making the sidebar more independent of right-sidebar patterns

The visual result is a more modern sidebar experience where users have clearer control over when to show or hide the wiki navigation, and the sidebar positioning is more consistent with typical web application layouts where navigation appears on the left side.

At this point the sidebar cannot be hidden on screens >xl, this will be addressed in a separate MR.

References

Screenshots or screen recordings

Viewport size Before After
xs (<576px) Screen_Recording_2025-09-19_at_14.51.28 Screen_Recording_2025-09-19_at_14.32.52
sm (>=576px) Screenshot_2025-09-19_at_14.50.58 Screen_Recording_2025-09-19_at_14.34.51
md (>=768px) Screenshot_2025-09-19_at_14.49.40 Screenshot_2025-09-19_at_14.36.21
lg (>=992px) Screenshot_2025-09-19_at_14.49.14 Screenshot_2025-09-19_at_14.37.05
xl (>=1200px) Screenshot_2025-09-19_at_14.48.33 Screenshot_2025-09-19_at_14.37.43

(Note that the ability to toggle the sidebar was missing in sm screen sizes in the before state)

How to set up and validate locally

  1. Open wiki, create a couple of wiki pages.
  2. view / interact with the sidebar on the left
  3. resize the window to see the behavior at different screen sizes. On small screens, toggle the sidebar open/closed.
  4. Run rails c, then inside the rails console run Feature.enable(:tailwind_container_queries) and Feature.enable(:paneled_view)
  5. Reload gitlab, click on your profile picture and toggle "New UI" to on.
  6. Repeat steps 2-3.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #569910

Merge request reports