Fix top navbar for all screen widths

- Move items into More dropdown
- Remove IDE button from nav
- Show search button on small screen widths
- Move groups into More dropdown at small widths
- Move help dropdown items into user dropdown at small widths
- Increase max height of user dropdown to account for help items

app/assets/stylesheets/framework/header.scss

@@ -523,6 +523,7 @@
     margin-top: 4px;
     color: $gl-text-color;
     left: auto;
+    max-height: $dropdown-max-height-lg;
 
     li.current-user {
       padding: $dropdown-item-padding-y $dropdown-item-padding-x;

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

@@ -21,6 +21,23 @@
   - if current_user_menu?(:settings)
     %li
       = link_to s_("CurrentUser|Settings"), profile_path, data: { qa_selector: 'settings_link' }
+
+  - if current_user_menu?(:help)
+    %li.divider.d-md-none
+    %li.d-md-none
+      = link_to _("Help"), help_path
+    %li.d-md-none
+      = link_to _("Support"), support_url
+    = render_if_exists "shared/learn_gitlab_menu_item"
+  %li.d-md-none
+    = link_to _("Submit feedback"), "https://about.gitlab.com/submit-feedback"
+  - if current_user_menu?(:help) || current_user_menu?(:settings) || current_user_menu?(:profile)
+    = render 'shared/user_dropdown_contributing_link'
+  = render_if_exists 'shared/user_dropdown_instance_review'
+  - if Gitlab.com?
+    %li.js-canary-link.d-md-none
+      = link_to _("Switch to GitLab Next"), "https://next.gitlab.com/"
+
   - if current_user_menu?(:sign_out)
     %li.divider
     %li

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

@@ -33,9 +33,9 @@
           - if current_user
             = render 'layouts/header/new_dropdown'
           - if header_link?(:search)
-            %li.nav-item.d-none.d-sm-none.d-md-block.m-auto
+            %li.nav-item.d-none.d-lg-block.m-auto
               = render 'layouts/search' unless current_controller?(:search)
-            %li.nav-item.d-inline-block.d-sm-none.d-md-none
+            %li.nav-item.d-inline-block.d-lg-none
               = link_to search_path_url, title: _('Search'), aria: { label: _('Search') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon('search', size: 16)
           - if header_link?(:issues)
@@ -58,7 +58,7 @@
                 = sprite_icon('todo-done', size: 16)
                 %span.badge.badge-pill.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
                   = todos_count_format(todos_pending_count)
-          %li.nav-item.header-help.dropdown
+          %li.nav-item.header-help.dropdown.d-none.d-md-block
             = link_to help_path, class: 'header-help-dropdown-toggle', data: { toggle: "dropdown" } do
               = sprite_icon('question', size: 16)
               = sprite_icon('angle-down', css_class: 'caret-down')

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

@@ -10,37 +10,26 @@
         = render "layouts/nav/projects_dropdown/show"
 
   - if dashboard_nav_link?(:groups)
-    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { id: 'nav-groups-dropdown', class: "home dropdown header-groups qa-groups-dropdown", data: { track_label: "groups_dropdown", track_event: "click_dropdown", track_value: "" } }) do
+    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { id: 'nav-groups-dropdown', class: "d-none d-md-block home dropdown header-groups qa-groups-dropdown", data: { track_label: "groups_dropdown", track_event: "click_dropdown", track_value: "" } }) do
       %button.btn{ type: 'button', data: { toggle: "dropdown" } }
         = _('Groups')
         = sprite_icon('angle-down', css_class: 'caret-down')
       .dropdown-menu.frequent-items-dropdown-menu
         = render "layouts/nav/groups_dropdown/show"
 
-  - if dashboard_nav_link?(:activity)
-    = 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' do
-        = _('Activity')
-
-  - if dashboard_nav_link?(:milestones)
-    = 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' do
-        = _('Milestones')
-
-  - if dashboard_nav_link?(:snippets)
-    = 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 qa-snippets-link' do
-        = _('Snippets')
-
   = render_if_exists 'layouts/nav/sidebar/analytics_link'
 
   - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets])
-    %li.header-more.dropdown.d-xl-none{ class: ('d-lg-none' unless has_extra_nav_icons?) }
+    %li.header-more.dropdown
       %a{ href: "#", data: { toggle: "dropdown" } }
         = _('More')
         = sprite_icon('angle-down', css_class: 'caret-down')
       .dropdown-menu
         %ul
+          - if dashboard_nav_link?(:groups)
+            %li.d-md-none
+              = link_to dashboard_groups_path do
+                = _('Groups')
           - if dashboard_nav_link?(:activity)
             = nav_link(path: 'dashboard#activity') do
               = link_to activity_dashboard_path do
@@ -53,20 +42,20 @@
 
           - if dashboard_nav_link?(:snippets)
             = nav_link(controller: 'dashboard/snippets') do
-              = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets' do
+              = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets qa-snippets-link' do
                 = _('Snippets')
 
           = render_if_exists 'layouts/nav/sidebar/analytics_more_link'
 
-          %li.dropdown.d-lg-none
+          %li.dropdown
             = render_if_exists 'dashboard/nav_link_list'
           - if can?(current_user, :read_instance_statistics)
-            = nav_link(controller: [:conversational_development_index, :cohorts], html_options: { class: 'd-lg-none' }) do
+            = nav_link(controller: [:conversational_development_index, :cohorts]) do
               = link_to instance_statistics_root_path do
                 = _('Instance Statistics')
           - if current_user.admin?
             = nav_link(controller: 'admin/dashboard') do
-              = link_to admin_root_path, class: 'd-lg-none admin-icon qa-admin-area-link' do
+              = link_to admin_root_path, class: 'admin-icon qa-admin-area-link d-xl-none' do
                 = _('Admin Area')
             - if Feature.enabled?(:user_mode_in_session)
               - if header_link?(:admin_mode)
@@ -79,45 +68,19 @@
                     = _('Enter admin mode')
           - if Gitlab::Sherlock.enabled?
             %li
-              = link_to sherlock_transactions_path, class: 'd-lg-none admin-icon' do
+              = link_to sherlock_transactions_path, class: 'admin-icon' do
                 = _('Sherlock Transactions')
 
+  - if current_user.admin?
+    = nav_link(controller: 'admin/dashboard', html_options: { class: "d-none 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)
+
+
   -# Shortcut to Dashboard > Projects
   - if dashboard_nav_link?(:projects)
     %li.hidden
       = link_to dashboard_projects_path, class: 'dashboard-shortcuts-projects' do
         = _('Projects')
 
-  - if current_controller?('ide')
-    %li.line-separator.d-none.d-sm-block
-      = nav_link(controller: 'ide') do
-        = link_to '#', class: 'dashboard-shortcuts-web-ide' do
-          = _('Web IDE')
-
-  %li.dropdown{ class: 'd-none d-lg-block' }
-    = render_if_exists 'dashboard/nav_link'
-  - if can?(current_user, :read_instance_statistics)
-    = 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', 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 Feature.enabled?(:user_mode_in_session)
-    - if header_link?(:admin_mode)
-      = nav_link(controller: 'admin/sessions', html_options: { class: "d-none d-lg-block d-xl-block"}) do
-        = link_to destroy_admin_session_path, title: _('Leave admin mode'), aria: { label: _('Leave admin mode') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
-          = sprite_icon('lock-open', size: 18)
-    - elsif current_user.admin?
-      = nav_link(controller: 'admin/sessions', html_options: { class: "d-none d-lg-block d-xl-block"}) do
-        = link_to new_admin_session_path, title: _('Enter admin mode'), aria: { label: _('Enter admin mode') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
-          = sprite_icon('lock', size: 18)
-
-  - if Gitlab::Sherlock.enabled?
-    %li
-      = 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')
   = render_if_exists 'layouts/nav/geo_primary_node_url'

changelogs/unreleased/31329-hidden-nav-content.yml

+---
+title: Update top nav bar to fit all content in at all screen sizes
+merge_request:
+author:
+type: fixed

ee/spec/features/onboarding/user_onboarding_spec.rb

@@ -38,7 +38,7 @@ describe 'User Onboarding' do
         end
 
         it 'does not show the "Learn GitLab" item in the help menu' do
-          page.within('.header-help') do
+          page.within('.header-user') do
             expect(page).not_to have_link('Learn GitLab')
           end
         end

spec/features/dashboard/active_tab_spec.rb

@@ -27,20 +27,4 @@ RSpec.describe 'Dashboard Active Tab', :js do
       subject { visit dashboard_groups_path }
     end
   end
-
-  context 'on activity projects' do
-    it_behaves_like 'page has active tab', 'Activity' do
-      subject { visit activity_dashboard_path }
-    end
-  end
-
-  context 'on instance statistics' do
-    subject { visit instance_statistics_root_path }
-
-    it 'shows Instance Statistics` as active' do
-      subject
-
-      expect(find('.navbar-sub-nav li.active')).to have_link('Instance Statistics')
-    end
-  end
 end