Add latest changes from gitlab-org/gitlab@master

7 files changed, 99 insertions, 20 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index f5ed85e8845..b9fbcfb642c 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -123,7 +123,9 @@ $search-input-field-x-min-width: 200px;
     padding: 0;
 
     @include media-breakpoint-down(xs) {
-      flex: 1 1 auto;
+      .legacy-top-bar & {
+        flex: 1 1 auto;
+      }
     }
 
     .nav {
@@ -193,8 +195,10 @@ $search-input-field-x-min-width: 200px;
         padding: 6px 8px;
         height: 32px;
 
-        @include media-breakpoint-down(xs) {
-          padding: 0;
+        .legacy-top-bar & {
+          @include media-breakpoint-down(xs) {
+            padding: 0;
+          }
         }
 
         &.header-user-dropdown-toggle {
@@ -322,7 +326,7 @@ $search-input-field-x-min-width: 200px;
   left: var(--application-bar-left);
   position: fixed;
   right: var(--application-bar-right);
-  top: $calc-system-headers-height;
+  top: $calc-application-bars-height;
   width: auto;
   z-index: $top-bar-z-index;
 
@@ -427,7 +431,7 @@ $search-input-field-x-min-width: 200px;
 }
 
 @include media-breakpoint-down(xs) {
-  .navbar-gitlab .container-fluid {
+  .navbar-gitlab.legacy-top-bar .container-fluid {
     font-size: 18px;
 
     .navbar-nav {
@@ -622,3 +626,27 @@ $search-input-field-x-min-width: 200px;
     }
   }
 }
+
+header.navbar-gitlab.super-sidebar-logged-out {
+  background-color: $brand-charcoal !important;
+
+  li.nav-item > a {
+    @include gl-text-white;
+    @include gl-font-weight-normal;
+
+    &:hover,
+    &:focus {
+      background-color: $brand-gray-04;
+      text-decoration: none;
+    }
+
+    &:focus,
+    &:active {
+      box-shadow: inset 0 0 0 $gl-border-size-1 $white;
+    }
+
+    &:active {
+      background-color: $brand-gray-03;
+    }
+  }
+}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index db7cec3fb39..2bf239979f7 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -317,7 +317,7 @@ module ApplicationHelper
     class_names << 'with-performance-bar' if performance_bar_enabled?
     class_names << 'with-top-bar' if show_super_sidebar? && !@hide_top_bar
     class_names << system_message_class
-    class_names << 'logged-out-marketing-header' if !current_user && ::Gitlab.com?
+    class_names << 'logged-out-marketing-header' if !current_user && ::Gitlab.com? && !show_super_sidebar?
 
     class_names
   end
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 2df77c57b4b..95627c2884a 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -51,4 +51,4 @@
     -# This is needed by [GitLab JH](https://gitlab.com/gitlab-jh/jh-team/gitlab-cn/-/issues/81)
     = render_if_exists "shared/footer/global_footer"
 
-= render "layouts/nav/top_nav_responsive", class: 'layout-page' unless show_super_sidebar?
+= render "layouts/nav/top_nav_responsive", class: 'layout-page' if !show_super_sidebar? || !current_user
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 53e88d95893..28cbdf0a7a1 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -13,10 +13,13 @@
     = header_message
 
     - if show_super_sidebar? # TODO: Move this CSS to a better place
-      :css
-        body {
-          --header-height: 0px;
-        }
+      - if current_user
+        :css
+          body {
+            --header-height: 0px;
+          }
+      - else
+        = render partial: "layouts/header/super_sidebar_logged_out"
     - else
       = render partial: "layouts/header/default", locals: { project: @project, group: @group }
     = render 'layouts/page', sidebar: sidebar, nav: nav
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 68527d4da52..993094c6889 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,19 +1,12 @@
 - has_impersonation_link = header_link?(:admin_impersonation)
 - user_status_data = user_status_properties(current_user)
 
-%header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar{ data: { testid: 'navbar' } }
+%header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar.legacy-top-bar{ data: { testid: 'navbar' } }
   %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
   .container-fluid
     .header-content.js-header-content
       .title-container.hide-when-top-nav-responsive-open.gl-transition-medium.gl-display-flex.gl-align-items-stretch.gl-pt-0.gl-mr-3
-        .title
-          %span.gl-sr-only GitLab
-          = link_to root_path, title: _('Homepage'), id: 'logo', class: 'has-tooltip', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation_top') do
-            = brand_header_logo
-        .gl-display-flex.gl-align-items-center
-          - if Gitlab.com_and_canary?
-            = gl_badge_tag({ variant: :success, size: :sm }, { href: Gitlab::Saas.canary_toggle_com_url, data: { testid: 'canary_badge_link' }, target: :_blank, rel: 'noopener noreferrer', class: 'canary-badge' }) do
-              = _('Next')
+        = render 'layouts/header/title'
 
         - if current_user
           .gl-display-none.gl-sm-display-block
diff --git a/app/views/layouts/header/_super_sidebar_logged_out.haml b/app/views/layouts/header/_super_sidebar_logged_out.haml
new file mode 100644
index 00000000000..67322aced74
--- /dev/null
+++ b/app/views/layouts/header/_super_sidebar_logged_out.haml
@@ -0,0 +1,47 @@
+%header.navbar.navbar-gitlab.super-sidebar-logged-out{ data: { testid: 'navbar' } }
+  %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
+  .container-fluid
+    .header-content.gl-displax-flex
+      .title-container.gl-display-flex.gl-align-items-stretch.gl-pt-0.gl-mr-3
+        = render 'layouts/header/title'
+
+        %ul.nav.navbar-sub-nav.gl-align-items-center.gl-display-flex.gl-flex-direction-row.gl-flex-grow-1
+          - if Gitlab.com?
+            %li.nav-item.dropdown.gl-mr-3.gl-md-display-none
+              %button{ type: "button", data: { toggle: "dropdown" } }
+                %span.gl-sr-only
+                  = _('Menu')
+                = sprite_icon('hamburger', size: 16)
+              .dropdown-menu
+                %ul
+                  %li
+                    = link_to Gitlab::Utils.append_path(promo_url, 'why-gitlab') do
+                      = s_('LoggedOutMarketingHeader|Why GitLab')
+                  %li
+                    = link_to Gitlab::Utils.append_path(promo_url, 'pricing') do
+                      = s_('LoggedOutMarketingHeader|Pricing')
+                  %li
+                    = link_to Gitlab::Utils.append_path(promo_url, 'sales') do
+                      = s_('LoggedOutMarketingHeader|Contact Sales')
+                  %li
+                    = link_to _("Explore"), explore_root_path
+            %li.nav-item.gl-mr-3.gl-display-none.gl-md-display-inline-block
+              = link_to Gitlab::Utils.append_path(promo_url, 'why-gitlab') do
+                = s_('LoggedOutMarketingHeader|Why GitLab')
+            %li.nav-item.gl-mr-3.gl-display-none.gl-md-display-inline-block
+              = link_to Gitlab::Utils.append_path(promo_url, 'pricing') do
+                = s_('LoggedOutMarketingHeader|Pricing')
+            %li.nav-item.gl-mr-3.gl-display-none.gl-md-display-inline-block
+              = link_to Gitlab::Utils.append_path(promo_url, 'sales') do
+                = s_('LoggedOutMarketingHeader|Contact Sales')
+          %li.nav-item{ class: ('gl-display-none gl-md-display-inline-block' if Gitlab.com?) }
+            = link_to _("Explore"), explore_root_path, class: ''
+
+      - if header_link?(:sign_in)
+        %ul.nav.navbar-nav.gl-align-items-center.gl-justify-content-end.gl-flex-direction-row
+          %li.nav-item.gl-mr-3
+            = link_to _('Sign in'), new_session_path(:user, redirect_to_referer: 'yes')
+          - if allow_signup?
+            %li
+              = render Pajamas::ButtonComponent.new(href: new_user_registration_path, variant: :confirm) do
+                = _('Register')
diff --git a/app/views/layouts/header/_title.html.haml b/app/views/layouts/header/_title.html.haml
new file mode 100644
index 00000000000..0e57c6809c2
--- /dev/null
+++ b/app/views/layouts/header/_title.html.haml
@@ -0,0 +1,8 @@
+.title
+  %span.gl-sr-only GitLab
+  = link_to root_path, title: _('Homepage'), id: 'logo', class: 'has-tooltip', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation_top') do
+    = brand_header_logo
+  .gl-display-flex.gl-align-items-center
+    - if Gitlab.com_and_canary?
+      = gl_badge_tag({ variant: :success, size: :sm }, { href: Gitlab::Saas.canary_toggle_com_url, data: { testid: 'canary_badge_link' }, target: :_blank, rel: 'noopener noreferrer', class: 'canary-badge' }) do
+        = _('Next')