Skip to content

Move collapse/expand sidebar button out of `breadcrumbs` template

The following discussion from !110868 (merged) should be addressed:

  • @ohoral started a discussion: (+3 comments)

    suggestion: these buttons certainly do not belong to breadcrumbs. Probably app/views/layouts/_page.html.haml

Here are the ideas we could start off

  1. we could create a new partial, e.g top_bar.haml (I'm not sure about the best name here) which will include both collapse sidebar buttons and breadcrumbs.
  2. Breadcrumbs will be a separate file and will include the nav part, where container classes and borders logic stay in top_bar.
  3. we'll have to rename the breadcrumbs classes to top_bar classes as well as some variables, e.g @no_breadcrumb_container to @no_top_bar_container
  4. fix the specs that rely on breadcrumbs selectors (not done in patch)

Here is the patch of how it might be implemented

top_bar.patch 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index d56337fcd607..d4478770a3e6 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -312,13 +312,13 @@ $search-input-field-x-min-width: 200px;
   margin-top: $dropdown-vertical-offset;
 }
 
-.breadcrumbs {
+.top-bar {
   display: flex;
   min-height: $breadcrumb-min-height;
   color: $gl-text-color;
 }
 
-.breadcrumbs-container {
+.top-bar-container {
   display: flex;
   width: 100%;
   padding-top: $gl-padding / 2;
diff --git a/app/assets/stylesheets/pages/registry.scss b/app/assets/stylesheets/pages/registry.scss
index 31c6dbd29705..68f93a4eaf36 100644
--- a/app/assets/stylesheets/pages/registry.scss
+++ b/app/assets/stylesheets/pages/registry.scss
@@ -2,7 +2,7 @@
 // until this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079
 //
 // See app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue when this is changed.
-.breadcrumbs-container .gl-breadcrumbs {
+.top-bar-container .gl-breadcrumbs {
   padding: 0;
   box-shadow: none;
 }
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index f3632a60f877..05f11e61b647 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -32,8 +32,7 @@
       = yield :page_level_alert
       = yield :free_user_cap_alert
       = yield :group_invite_members_banner
-      - unless @hide_breadcrumbs
-        = render "layouts/nav/breadcrumbs"
+      = render 'layouts/nav/tob_bar'
     %div{ class: "#{container_class unless @no_container} #{@content_class}" }
       %main.content{ id: "content-body", **page_itemtype }
         = render "layouts/flash", extra_flash_class: 'limit-container-width'
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index be2b968706bb..a7144970650d 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -1,28 +1,20 @@
-- container = @no_breadcrumb_container ? 'container-fluid' : container_class
 - hide_top_links = @hide_top_links || false
 - unless @skip_current_level_breadcrumb
   - push_to_schema_breadcrumb(@breadcrumb_title, breadcrumb_title_link)
 
-.gl-relative
-  .breadcrumbs{ class: [container, @content_class] }
-    .breadcrumbs-container{ class: ("border-bottom-0" if @no_breadcrumb_border) }
-      - if show_super_sidebar?
-        = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: 'tertiary', button_options: { class: 'js-super-sidebar-toggle super-sidebar-toggle gl-ml-n3 gl-mr-2', type: 'button', title: _('Expand sidebar'), aria: { label: _('Expand sidebar') }, data: {toggle: 'tooltip', placement: 'right' } })
-      - elsif defined?(@left_sidebar)
-        = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: 'tertiary', button_options: { class: 'toggle-mobile-nav gl-ml-n3 gl-mr-2', data: { qa_selector: 'toggle_mobile_nav_button' }, type: 'button', aria: { label: _('Open sidebar') } })
-      %nav.breadcrumbs-links{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links', qa_selector: 'breadcrumb_links_content' } }
-        %ul.list-unstyled.breadcrumbs-list.js-breadcrumbs-list
-          - unless hide_top_links
-            = header_title
-          - if @breadcrumbs_extra_links
-            - @breadcrumbs_extra_links.each do |extra|
-              = breadcrumb_list_item link_to(extra[:text], extra[:link])
-          = render "layouts/nav/breadcrumbs/collapsed_inline_list", location: :after
-          - unless @skip_current_level_breadcrumb
-            %li{ data: { testid: 'breadcrumb-current-link', qa_selector: 'breadcrumb_current_link' } }
-              = link_to @breadcrumb_title, breadcrumb_title_link
-        -# haml-lint:disable InlineJavaScript
-        %script{ type: 'application/ld+json' }
-          :plain
-            #{schema_breadcrumb_json}
-      = yield :header_content
+%nav.breadcrumbs-links{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links', qa_selector: 'breadcrumb_links_content' } }
+  %ul.list-unstyled.breadcrumbs-list.js-breadcrumbs-list
+    - unless hide_top_links
+      = header_title
+    - if @breadcrumbs_extra_links
+      - @breadcrumbs_extra_links.each do |extra|
+        = breadcrumb_list_item link_to(extra[:text], extra[:link])
+    = render "layouts/nav/breadcrumbs/collapsed_inline_list", location: :after
+    - unless @skip_current_level_breadcrumb
+      %li{ data: { testid: 'breadcrumb-current-link', qa_selector: 'breadcrumb_current_link' } }
+        = link_to @breadcrumb_title, breadcrumb_title_link
+  -# haml-lint:disable InlineJavaScript
+  %script{ type: 'application/ld+json' }
+    :plain
+      #{schema_breadcrumb_json}
+= yield :header_content
diff --git a/app/views/layouts/nav/_tob_bar.html.haml b/app/views/layouts/nav/_tob_bar.html.haml
index e69de29bb2d1..bb0b3a8e3d69 100644
--- a/app/views/layouts/nav/_tob_bar.html.haml
+++ b/app/views/layouts/nav/_tob_bar.html.haml
@@ -0,0 +1,11 @@
+- container = @no_top_bar_container ? 'container-fluid' : container_class
+
+.gl-relative
+  .top-bar{ class: [container, @content_class] }
+    .top-bar-container{ class: ("border-bottom-0" if @no_top_bar_border) }
+      - if show_super_sidebar?
+        = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: 'tertiary', button_options: { class: 'js-super-sidebar-toggle super-sidebar-toggle gl-ml-n3 gl-mr-2', type: 'button', title: _('Expand sidebar'), aria: { label: _('Expand sidebar') }, data: {toggle: 'tooltip', placement: 'right' } })
+      - elsif defined?(@left_sidebar)
+        = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: 'tertiary', button_options: { class: 'toggle-mobile-nav gl-ml-n3 gl-mr-2', data: { qa_selector: 'toggle_mobile_nav_button' }, type: 'button', aria: { label: _('Open sidebar') } })
+      - unless @hide_breadcrumbs
+        = render "layouts/nav/breadcrumbs"
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index e2d1a50ae5ea..2b8fb1ca65b7 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -1,4 +1,4 @@
-- @no_breadcrumb_border = true
+- @no_top_bar_border = true
 - show_auto_devops_callout = show_auto_devops_callout?(@project)
 - is_project_overview = local_assigns.fetch(:is_project_overview, false)
 - ref = local_assigns.fetch(:ref) { current_ref }
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 9d25603994af..c35afb8ec830 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -1,4 +1,4 @@
-- @no_breadcrumb_border = true
+- @no_top_bar_border = true
 - can_update_merge_request = can?(current_user, :update_merge_request, @merge_request)
 - can_reopen_merge_request = can?(current_user, :reopen_merge_request, @merge_request)
 - are_close_and_open_buttons_hidden = merge_request_button_hidden?(@merge_request, true) && merge_request_button_hidden?(@merge_request, false)
diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml
index 93f919f01d94..c468b3a2001a 100644
--- a/app/views/shared/_auto_devops_callout.html.haml
+++ b/app/views/shared/_auto_devops_callout.html.haml
@@ -1,4 +1,4 @@
-- container = @no_breadcrumb_container ? 'container-fluid' : container_class
+- container = @no_top_bar_container ? 'container-fluid' : container_class
 
 %div{ class: [container, @content_class, 'gl-pt-5!'] }
   = render Pajamas::BannerComponent.new(button_text: s_('AutoDevOps|Enable in settings'),
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index c3835386d5a8..e5aa4c58da19 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/app/views/shared/boards/_show.html.haml
@@ -1,5 +1,5 @@
 - board = local_assigns.fetch(:board, nil)
-- @no_breadcrumb_container = true
+- @no_top_bar_container = true
 - @no_container = true
 - @content_wrapper_class = "#{@content_wrapper_class} gl-relative gl-pb-0"
 - @content_class = "issue-boards-content js-focus-mode-board"
diff --git a/ee/app/assets/stylesheets/page_bundles/roadmap.scss b/ee/app/assets/stylesheets/page_bundles/roadmap.scss
index 179a7090067c..5c572bfc0973 100644
--- a/ee/app/assets/stylesheets/page_bundles/roadmap.scss
+++ b/ee/app/assets/stylesheets/page_bundles/roadmap.scss
@@ -93,10 +93,10 @@ html.group-epics-roadmap-html {
   padding-bottom: 0;
 }
 
-.breadcrumbs.group-epics-roadmap {
+.top-bar.group-epics-roadmap {
   border-bottom: $border-style;
 
-  .breadcrumbs-container {
+  .top-bar-container {
     border-bottom: 0;
   }
 }
diff --git a/ee/app/views/groups/epics/show.html.haml b/ee/app/views/groups/epics/show.html.haml
index e5a65db2c7f9..0e8383b73e98 100644
--- a/ee/app/views/groups/epics/show.html.haml
+++ b/ee/app/views/groups/epics/show.html.haml
@@ -1,4 +1,4 @@
-- @no_breadcrumb_container = false
+- @no_top_bar_container = false
 - @no_container = true
 - @content_class = 'limit-container-width' unless fluid_layout
 
diff --git a/ee/app/views/groups/roadmap/show.html.haml b/ee/app/views/groups/roadmap/show.html.haml
index cfef1e2a1e73..dab7f3c307b8 100644
--- a/ee/app/views/groups/roadmap/show.html.haml
+++ b/ee/app/views/groups/roadmap/show.html.haml
@@ -1,4 +1,4 @@
-- @no_breadcrumb_container = true
+- @no_top_bar_container = true
 - @no_container = true
 - @html_class = "group-epics-roadmap-html"
 - @body_class = "group-epics-roadmap-body"