Improvements to breadcrumbs

Closes #35269

3 files changed, 29 insertions, 39 deletions

diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 3e2f23e6b2a..f39ccaac287 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -402,6 +402,20 @@ header.navbar-gitlab-new {
   }
 }
 
+.breadcrumbs-list {
+  display: flex;
+  margin-bottom: 0;
+
+  > li {
+    display: flex;
+    align-items: center;
+  }
+
+  a {
+    color: $gl-text-color;
+  }
+}
+
 .breadcrumbs-extra {
   display: flex;
   flex: 0 0 auto;
@@ -409,34 +423,10 @@ header.navbar-gitlab-new {
 }
 
 .breadcrumbs-sub-title {
-  margin: 2px 0;
-  font-size: 16px;
+  margin: 0;
+  font-size: $gl-font-size;
   font-weight: normal;
   line-height: 1;
-
-  ul {
-    margin: 0;
-  }
-
-  li {
-    display: inline-block;
-
-    &:not(:last-child) {
-      &::after {
-        content: "/";
-        margin: 0 2px 0 5px;
-        color: rgba($black, .65);
-      }
-    }
-
-    &:last-child a {
-      font-weight: 600;
-    }
-  }
-
-  a {
-    color: $gl-text-color;
-  }
 }
 
 .top-area {
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index bee4950e414..2fbb294a5ec 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -58,7 +58,7 @@ module ProjectsHelper
         link_to(simple_sanitize(owner.name), user_path(owner))
       end
 
-    project_link = link_to project_path(project), { class: "project-item-select-holder" } do
+    project_link = link_to project_path(project), { class: ("project-item-select-holder" unless show_new_nav?) } do
       output =
         if show_new_nav?
           project_icon(project, alt: project.name, class: 'avatar-tile', width: 16, height: 16)
@@ -70,13 +70,18 @@ module ProjectsHelper
       output.html_safe
     end
 
-    if current_user
+    if show_new_nav?
+      namespace_link = content_tag "li", namespace_link
+      project_link = content_tag "li", project_link
+    end
+
+    if current_user && !show_new_nav?
       project_link << button_tag(type: 'button', class: 'dropdown-toggle-caret js-projects-dropdown-toggle', aria: { label: 'Toggle switch project dropdown' }, data: { target: '.js-dropdown-menu-projects', toggle: 'dropdown', order_by: 'last_activity_at' }) do
         icon("chevron-down")
       end
     end
 
-    "#{namespace_link} / #{project_link}".html_safe
+    "#{namespace_link} #{project_link}".html_safe
   end
 
   def remove_project_message(project)
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index 4db84771f4e..9c13395e3d6 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -7,21 +7,16 @@
       = button_tag class: 'toggle-mobile-nav', type: 'button' do
         %span.sr-only Open sidebar
         = icon ('bars')
-    .breadcrumbs-links.js-title-container
-      - unless hide_top_links
-        .title
-          = link_to "GitLab", root_path
-          \/
+      .breadcrumbs-links.js-title-container
+        %ul.list-unstyled.breadcrumbs-list
           - if content_for?(:header_title_before)
-            = yield :header_title_before
-            \/
+            %li= yield :header_title_before
           = header_title
-      %h2.breadcrumbs-sub-title
-        %ul.list-unstyled
           - if @breadcrumbs_extra_links
             - @breadcrumbs_extra_links.each do |extra|
               %li= link_to extra[:text], extra[:link]
-          %li= link_to @breadcrumb_title, breadcrumb_link
+          %li
+            %h2.breadcrumbs-sub-title= link_to @breadcrumb_title, breadcrumb_link
     - if content_for?(:breadcrumbs_extra)
       .breadcrumbs-extra.hidden-xs= yield :breadcrumbs_extra
     = yield :header_content