Resolve main nav clipping in certain breakpoints

Makes the following changes in order to have all the
items of the top nav fit within all of the new Bootstrap 4 breakpoints:

- Change GitLab logo to show only on desktop breakpoint (lg and up)
  - Move margin from logo to logo text, saving 8px
- Move the following icon links to the "More" nav dropdown
  - Instance Statistics (ConDev Index)
  - Admin area (if Admin)
  - Sherlock Transactions (if enabled)
- Removed separator between Admin icons
- Change search input width from 240px to 200px
- Move "Activity", "Milestone", and "Snippets" into "More" menu on lg breakpoints
- Show "More" menu of lg breakpoints

app/assets/stylesheets/framework/header.scss

@@ -90,12 +90,6 @@
         padding: 2px 8px;
         margin: 5px 2px 5px -8px;
         border-radius: $border-radius-default;
-
-        .tanuki-logo {
-          @include media-breakpoint-up(sm) {
-            margin-right: 8px;
-          }
-        }
       }
 
       .project-item-select {

app/assets/stylesheets/framework/variables.scss

@@ -400,7 +400,7 @@ $award-emoji-positive-add-lines: #bb9c13;
  * Search Box
  */
 $search-input-border-color: rgba($blue-400, 0.8);
-$search-input-width: 240px;
+$search-input-width: 200px;
 $search-input-active-width: 320px;
 $location-icon-color: #e7e9ed;
 

app/helpers/nav_helper.rb

@@ -47,8 +47,8 @@ module NavHelper
     class_names
   end
 
-  def show_separator?
-    Gitlab::Sherlock.enabled? || can?(current_user, :read_instance_statistics)
+  def has_extra_nav_icons?
+    Gitlab::Sherlock.enabled? || can?(current_user, :read_instance_statistics) || current_user.admin?
   end
 
   def page_has_markdown?

app/views/layouts/header/_default.html.haml

@@ -15,7 +15,7 @@
             = brand_header_logo
             - logo_text = brand_header_logo_type
             - if logo_text.present?
-              %span.logo-text.d-none.d-sm-block
+              %span.logo-text.d-none.d-lg-block.prepend-left-8
                 = logo_text
 
         - if current_user

app/views/layouts/nav/_dashboard.html.haml

+-# WAIT! Before adding more items to the nav bar, please see
+-# https://gitlab.com/gitlab-org/gitlab-ce/issues/49713 for more information.
 %ul.list-unstyled.navbar-sub-nav
   - if dashboard_nav_link?(:projects)
     = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown" }) do
@@ -16,22 +18,22 @@
         = render "layouts/nav/groups_dropdown/show"
 
   - if dashboard_nav_link?(:activity)
-    = nav_link(path: 'dashboard#activity', html_options: { class: "d-none d-lg-block d-xl-block" }) do
+    = nav_link(path: 'dashboard#activity', html_options: { class: ["d-none d-xl-block", ("d-lg-block" unless has_extra_nav_icons?)] }) do
       = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: _('Activity') do
         = _('Activity')
 
   - if dashboard_nav_link?(:milestones)
-    = nav_link(controller: 'dashboard/milestones', html_options: { class: "d-none d-lg-block d-xl-block" }) do
+    = nav_link(controller: 'dashboard/milestones', html_options: { class: ["d-none d-xl-block", ("d-lg-block" unless has_extra_nav_icons?)] }) do
       = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', title: _('Milestones') do
         = _('Milestones')
 
   - if dashboard_nav_link?(:snippets)
-    = nav_link(controller: 'dashboard/snippets', html_options: { class: "d-none d-lg-block d-xl-block" }) do
+    = nav_link(controller: 'dashboard/snippets', html_options: { class: ["d-none d-xl-block", ("d-lg-block" unless has_extra_nav_icons?)] }) do
       = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: _('Snippets') do
         = _('Snippets')
 
   - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets])
-    %li.header-more.dropdown.d-lg-none.d-xl-none
+    %li.header-more.dropdown.d-xl-none{ class: ('d-lg-none' unless has_extra_nav_icons?) }
       %a{ href: "#", data: { toggle: "dropdown" } }
         = _('More')
         = sprite_icon('angle-down', css_class: 'caret-down')
@@ -52,6 +54,21 @@
               = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: _('Snippets') do
                 = _('Snippets')
 
+          = render_if_exists 'dashboard/operations/nav_link'
+          - if can?(current_user, :read_instance_statistics)
+            = nav_link(controller: [:conversational_development_index, :cohorts]) do
+              = link_to instance_statistics_root_path, title: _('Instance Statistics'), aria: { label: _('Instance Statistics') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = _('Instance Statistics')
+          - if current_user.admin?
+            = nav_link(controller: 'admin/dashboard') do
+              = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = _('Admin Area')
+          - if Gitlab::Sherlock.enabled?
+            %li
+              = link_to sherlock_transactions_path, class: 'admin-icon', title: _('Sherlock Transactions'),
+                data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = _('Sherlock Transactions')
+
   -# Shortcut to Dashboard > Projects
   - if dashboard_nav_link?(:projects)
     %li.hidden
@@ -64,19 +81,17 @@
         = link_to '#', class: 'dashboard-shortcuts-web-ide', title: _('Web IDE') do
           = _('Web IDE')
 
-  - if show_separator?
-    %li.line-separator.d-none.d-sm-block
   = render_if_exists 'dashboard/operations/nav_link'
   - if can?(current_user, :read_instance_statistics)
-    = nav_link(controller: [:conversational_development_index, :cohorts]) do
+    = nav_link(controller: [:conversational_development_index, :cohorts], html_options: { class: "d-none d-lg-block d-xl-block"}) do
       = link_to instance_statistics_root_path, title: _('Instance Statistics'), aria: { label: _('Instance Statistics') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
         = sprite_icon('chart', size: 18)
   - if current_user.admin?
-    = nav_link(controller: 'admin/dashboard') do
-      = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin area'), aria: { label: _('Admin area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+    = nav_link(controller: 'admin/dashboard', html_options: { class: "d-none d-lg-block d-xl-block"}) do
+      = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
         = sprite_icon('admin', size: 18)
   - if Gitlab::Sherlock.enabled?
     %li
-      = link_to sherlock_transactions_path, class: 'admin-icon', title: _('Sherlock Transactions'),
+      = link_to sherlock_transactions_path, class: 'admin-icon d-none d-lg-block d-xl-block', title: _('Sherlock Transactions'),
         data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
         = icon('tachometer fw')

changelogs/unreleased/49713-main-navbar-is-broken-in-certain-viewport-widths.yml

+---
+title: Resolve Main navbar is broken in certain viewport widths
+merge_request: 23348
+author:
+type: fixed

locale/gitlab.pot

@@ -405,9 +405,6 @@ msgstr ""
 msgid "Admin Overview"
 msgstr ""
 
-msgid "Admin area"
-msgstr ""
-
 msgid "AdminArea| You are about to permanently delete the user %{username}. Issues, merge requests, and groups linked to them will be transferred to a system-wide \"Ghost-user\". To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead. Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered."
 msgstr ""