1 files changed, 23 insertions, 22 deletions
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index 98d6af28cf5..06dff99718c 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -3,25 +3,26 @@
 - unless @skip_current_level_breadcrumb
   - push_to_schema_breadcrumb(@breadcrumb_title, breadcrumb_title_link)
 
-%nav.breadcrumbs{ class: [container, @content_class], 'aria-label': _('Breadcrumbs') }
-  .breadcrumbs-container{ class: ("border-bottom-0" if @no_breadcrumb_border) }
-    - if defined?(@left_sidebar)
-      = button_tag class: 'toggle-mobile-nav', data: { qa_selector: 'toggle_mobile_nav_button' }, type: 'button' do
-        %span.sr-only= _("Open sidebar")
-        = sprite_icon('sidebar', size: 18)
-    .breadcrumbs-links{ 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
+.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', 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' }, 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