Merge branch '322680-contextual-header-styling' into 'master'

Styled the contextual header in left sidepanel

See merge request gitlab-org/gitlab!62905

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss

+//
+// VARIABLES
+//
+
+$top-level-item-color: $purple-900;
+
 //
 // TEMPORARY OVERRIDES
 // Needed while we serve both *_base and *_variant stylesheets
-// TODO: These have to be removed during the feature flag rollout
+// TODO: These have to be removed during the ':sidebar_refactor' flag rollout
 //
 &.gl-dark .nav-sidebar li.active {
   box-shadow: none;
 }
 
 &.gl-dark .nav-sidebar li a,
-.toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left,
-.toggle-sidebar-button .icon-chevron-double-lg-right {
+&.gl-dark .toggle-sidebar-button .collapse-text,
+&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
+&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
+&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
+&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title {
   color: $gray-darkest;
 }
 
+&.ui-indigo .nav-sidebar li.active > a {
+  color: $top-level-item-color;
+}
+
+&.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
+  fill: $top-level-item-color;
+}
+
 .nav-sidebar {
   box-shadow: none;
 
   li.active {
     background-color: transparent;
-    box-shadow: none;
+    box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout
   }
 }
 
@@ -137,6 +153,48 @@
   }
 }
 
+@mixin context-header {
+  $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;
+
+  @include gl-p-2;
+  @include gl-mb-2;
+
+  .avatar-container {
+    @include gl-font-weight-normal;
+    flex: none;
+    box-shadow: $avatar-box-shadow;
+
+    &.rect-avatar {
+      @include gl-border-none;
+
+      .avatar.s32 {
+        @extend .rect-avatar.s32;
+        color: $gray-900;
+        box-shadow: $avatar-box-shadow;
+      }
+    }
+  }
+
+  .sidebar-context-title {
+    color: $top-level-item-color;
+  }
+}
+
+@mixin top-level-item {
+  @include gl-px-4;
+  @include gl-py-3;
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-rounded-base;
+  @include gl-w-auto;
+  transition: padding $sidebar-transition-duration;
+  margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
+
+  &:hover {
+    background-color: $indigo-900-alpha-008;
+  }
+}
+
 //
 // PAGE-LAYOUT
 //
@@ -195,7 +253,7 @@
   a {
     @include gl-text-decoration-none;
     @include gl-line-height-normal;
-    color: $purple-900;
+    color: $top-level-item-color;
   }
 
   li {
@@ -206,19 +264,7 @@
     }
 
     > a {
-      @include gl-mx-2;
-      @include gl-px-4;
-      @include gl-py-3;
-      @include gl-display-flex;
-      @include gl-align-items-center;
-      @include gl-rounded-base;
-      @include gl-w-auto;
-      transition: padding $sidebar-transition-duration;
-      margin-bottom: 1px;
-
-      &:hover {
-        background-color: $indigo-900-alpha-008;
-      }
+      @include top-level-item;
     }
 
     &.active {
@@ -250,11 +296,6 @@
     display: none;
   }
 
-  svg {
-    height: 16px;
-    width: 16px;
-  }
-
   @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
     &:not(.sidebar-expanded-mobile) {
       @include collapse-contextual-sidebar;
@@ -264,14 +305,28 @@
 }
 
 .nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
+  @include gl-h-full;
+  @include gl-w-full;
+  @include gl-overflow-auto;
+
+  > div.context-header {
+    @include gl-mt-2;
+
+    a {
+      @include top-level-item;
+      @include context-header;
+    }
+  }
 }
 
 .sidebar-top-level-items {
+  @include gl-mt-2;
   margin-bottom: 60px;
 
+  .context-header a {
+    @include context-header;
+  }
+
   > li {
     .badge.badge-pill {
       @include gl-rounded-lg;
@@ -287,8 +342,8 @@
       }
 
       .badge.badge-pill {
-        @include gl-font-weight-normal; // TODO: update in `theme_indigo.scss`
-        color: $blue-700; // TODO: update in `theme_indigo.scss`
+        @include gl-font-weight-normal; // TODO: update in `theme_helper.scss`
+        color: $blue-700; // TODO: update in `theme_helper.scss`
       }
     }
   }
@@ -325,7 +380,7 @@
 .close-nav-button {
   @include side-panel-toggle;
   background-color: $gray-50;
-  color: $purple-900;
+  color: $top-level-item-color;
 
   .collapse-text,
   .icon-chevron-double-lg-left,

app/assets/stylesheets/framework/variables.scss

@@ -573,6 +573,9 @@ $inactive-badge-background: rgba($black, 0.08);
 $sidebar-toggle-height: 60px;
 $sidebar-toggle-width: 40px;
 $sidebar-milestone-toggle-bottom-margin: 10px;
+$sidebar-avatar-size: 32px;
+$sidebar-top-item-lr-margin: 4px;
+$sidebar-top-item-tb-margin: 1px;
 
 /*
 * Buttons

app/assets/stylesheets/performance_bar.scss

@@ -128,6 +128,6 @@
   color: $black;
 }
 
-.with-performance-bar .nav-sidebar {
+html.with-performance-bar .nav-sidebar {
   top: $header-height + $performance-bar-height;
 }

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -2,8 +2,8 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do
-        %span.avatar-container.s40.settings-avatar
-          = sprite_icon('admin', size: 24)
+        %span.avatar-container.rect-avatar.s32.settings-avatar
+          = sprite_icon('admin', size: 18)
         %span.sidebar-context-title
           = _('Admin Area')
     %ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }

app/views/layouts/nav/sidebar/_context_menu_body.html.haml

 = link_to group_path(@group), title: @group.name do
-  %span.avatar-container.rect-avatar.s40.group-avatar
-    = group_icon(@group, class: "avatar s40 avatar-tile")
+  %span.avatar-container.rect-avatar.s32.group-avatar
+    = group_icon(@group, class: "avatar s32 avatar-tile")
   %span.sidebar-context-title
     = @group.name

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -2,8 +2,8 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
-        %span.avatar-container.s40.settings-avatar
-          = image_tag avatar_icon_for_user(current_user, 40), class: "avatar s40 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
+        %span.avatar-container.s32.settings-avatar
+          = image_tag avatar_icon_for_user(current_user, 32), class: "avatar s32 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
         %span.sidebar-context-title= _('User Settings')
     %ul.sidebar-top-level-items
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do

app/views/shared/nav/_scope_menu_body.html.haml

 = link_to scope_menu.link, **scope_menu.container_html_options do
-  %span.avatar-container.rect-avatar.s40.project-avatar
-    = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
+  %span.avatar-container.rect-avatar.s32.project-avatar
+    = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s32 avatar-tile', width: 32, height: 32)
   %span.sidebar-context-title
     = scope_menu.title

ee/app/views/layouts/nav/sidebar/_security.html.haml

@@ -2,7 +2,7 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to security_dashboard_path, title: _('Security Dashboard'), id: 'logo' do
-        %span.avatar-container.s40.settings-avatar.rect-avatar
+        %span.avatar-container.s32.settings-avatar.rect-avatar
           = brand_header_logo
         %span.sidebar-context-title
           = _('Security')