Fluid and fixed breadcrumbs for super sidebar toggle

Scott de Jongerequested to merge
393468-make-interacting-with-the-navigation-sidebar-seamless into master

What does this MR do and why?

  • Update breadcrumbs to be full width and fixed for super sidebar
    • Remove custom styles to absolute position super-sidebar-toggle
    • Remove gl-relative wrapping class for breadcrumbs
    • Add breadcrumbs_class and breadcrumbs_container_class variables
  • Update existing sticky headers to compensate for breadcrumbs height
    • Add --breadcrumbs-height to be added with .with-breadcrumbs conditional class
    • Add --breadcrumbs-height to $calc-application-header-height variable
    • Update .layout-page and .boards-sidebar with $calc-application-header-height and $calc-application-footer-height variables

Screenshots or screen recordings

Default

CleanShot_2023-04-04_at_16.04.38

Issue

CleanShot_2023-04-04_at_16.06.05

Merge request

CleanShot_2023-04-04_at_16.05.02

CleanShot_2023-04-04_at_16.05.33

Epic

CleanShot_2023-04-04_at_16.06.36

Job

CleanShot_2023-04-04_at_16.07.02

Board

CleanShot_2023-04-04_at_16.29.20

How to set up and validate locally

  1. Enable super sidebar (if not currently on)
    1. In rails c enabled feature flag Feature.enable(:super_sidebar_nav)
    2. Toggle on "new navigation" in user menu
  2. Scroll on any page, breadcrumbs should stick to top of viewport, note:
    1. With sticky MR header http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/4
    2. With sticky Issue header http://127.0.0.1:3000/flightjs/Flight/-/issues/33
    3. With sticky Epic header http://127.0.0.1:3000/groups/flightjs/-/epics/5
    4. With sticky Job header http://127.0.0.1:3000/flightjs/Flight/-/jobs/675

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #393468 (closed)

Edited by Scott de Jonge

Merge request reports