Merge branch '322680-collapsed-panel-styling' into 'master'

Styled the collapsed state of the left sidepanel

See merge request gitlab-org/gitlab!62963

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

@@ -47,6 +47,14 @@ $top-level-item-color: $purple-900;
 
   @include context-header-collapsed;
 
+  .context-header {
+    @include gl-h-auto;
+
+    a {
+      @include gl-p-2;
+    }
+  }
+
   .sidebar-top-level-items > li {
     .sidebar-sub-level-items {
       &:not(.flyout-list) {
@@ -60,17 +68,16 @@ $top-level-item-color: $purple-900;
   }
 
   .toggle-sidebar-button {
-    padding: 16px;
-    width: $contextual-sidebar-collapsed-width - 1px;
+    width: $contextual-sidebar-collapsed-width;
 
-    .collapse-text,
-    .icon-chevron-double-lg-left {
+    .collapse-text {
       display: none;
     }
 
-    .icon-chevron-double-lg-right {
-      display: block;
-      margin: 0;
+    .icon-chevron-double-lg-left {
+      @include gl-rotate-180;
+      @include gl-display-block; // TODO: shouldn't be needed after the flag roll out
+      @include gl-m-0;
     }
   }
 }
@@ -83,12 +90,13 @@ $top-level-item-color: $purple-900;
   }
 
   .badge.badge-pill:not(.fly-out-badge),
-  .nav-item-name {
+  .nav-item-name,
+  .collapse-text {
     @include gl-sr-only;
   }
 
   .sidebar-top-level-items > li > a {
-    min-height: 45px;
+    min-height: unset;
   }
 
   .fly-out-top-item {
@@ -98,6 +106,10 @@ $top-level-item-color: $purple-900;
   .avatar-container {
     margin: 0 auto;
   }
+
+  li.active > a {
+    background-color: $indigo-900-alpha-008;
+  }
 }
 
 @mixin sub-level-items-flyout {
@@ -158,6 +170,7 @@ $top-level-item-color: $purple-900;
 
   @include gl-p-2;
   @include gl-mb-2;
+  @include gl-mt-0;
 
   .avatar-container {
     @include gl-font-weight-normal;
@@ -187,7 +200,6 @@ $top-level-item-color: $purple-900;
   @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 {
@@ -226,22 +238,16 @@ $top-level-item-color: $purple-900;
 //
 
 .nav-sidebar {
+  @include gl-fixed;
+  @include gl-bottom-0;
+  @include gl-left-0;
   transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-  position: fixed;
   z-index: 600;
   width: $contextual-sidebar-width;
   top: $header-height;
-  bottom: 0;
-  left: 0;
   background-color: $gray-50;
   transform: translate3d(0, 0, 0);
 
-  &:not(.sidebar-collapsed-desktop) {
-    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-      box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
-    }
-  }
-
   &.sidebar-collapsed-desktop {
     @include collapse-contextual-sidebar;
   }
@@ -380,7 +386,11 @@ $top-level-item-color: $purple-900;
 .close-nav-button {
   @include side-panel-toggle;
   background-color: $gray-50;
+  border-top: 1px solid $border-color;
   color: $top-level-item-color;
+  position: fixed;
+  bottom: 0;
+  width: $contextual-sidebar-width;
 
   .collapse-text,
   .icon-chevron-double-lg-left,
@@ -389,22 +399,6 @@ $top-level-item-color: $purple-900;
   }
 }
 
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: $contextual-sidebar-width - 1px;
-  border-top: 1px solid $border-color;
-
-  svg {
-    margin-right: 8px;
-  }
-
-  .icon-chevron-double-lg-right {
-    display: none;
-  }
-}
-
 .collapse-text {
   white-space: nowrap;
   overflow: hidden;

app/assets/stylesheets/framework/variables.scss

@@ -9,7 +9,7 @@ $sidebar-transition-duration: 0.3s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: 0.15s;
 $contextual-sidebar-width: 220px;
-$contextual-sidebar-collapsed-width: 50px;
+$contextual-sidebar-collapsed-width: 48px;
 $toggle-sidebar-height: 48px;
 
 /**

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

+- avatar_size = sidebar_refactor_disabled? ? 24 : 18
+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+
 %aside.nav-sidebar.qa-admin-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), 'aria-label': _('Admin navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do
-        %span.avatar-container.rect-avatar.s32.settings-avatar
-          = sprite_icon('admin', size: 18)
+        %span{ class: ['avatar-container', 'settings-avatar', 'rect-avatar', avatar_size_class] }
+          = sprite_icon('admin', size: avatar_size)
         %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

+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+- avatar_classes = ['avatar-container', 'rect-avatar', 'group-avatar']
+- avatar_classes << avatar_size_class
+
 = link_to group_path(@group), title: @group.name do
-  %span.avatar-container.rect-avatar.s32.group-avatar
-    = group_icon(@group, class: "avatar s32 avatar-tile")
+  %span{ class: avatar_classes }
+    = group_icon(@group, class: ['avatar', 'avatar-tile', avatar_size_class])
   %span.sidebar-context-title
     = @group.name

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

+- avatar_size = sidebar_refactor_disabled? ? 40 : 32
+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+
 %aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **sidebar_tracking_attributes_by_object(current_user), 'aria-label': _('User settings') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
-        %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{ class: ['avatar-container', 'settings-avatar', avatar_size_class] }
+          = image_tag avatar_icon_for_user(current_user, avatar_size), class: ['avatar', 'avatar-tile', 'js-sidebar-user-avatar', avatar_size_class], 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/_sidebar_toggle_button.html.haml

 %a.toggle-sidebar-button.js-toggle-sidebar.qa-toggle-sidebar.rspec-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" }
   = sprite_icon('chevron-double-lg-left', css_class: 'icon-chevron-double-lg-left')
-  = sprite_icon('chevron-double-lg-right', css_class: 'icon-chevron-double-lg-right')
-  %span.collapse-text= _("Collapse sidebar")
+  - if sidebar_refactor_disabled?
+    = sprite_icon('chevron-double-lg-right', css_class: 'icon-chevron-double-lg-right')
+  %span.collapse-text.gl-ml-3= _("Collapse sidebar")
 
 = button_tag class: 'close-nav-button', type: 'button' do
   = sprite_icon('close')
-  %span.collapse-text= _("Close sidebar")
+  %span.collapse-text.gl-ml-3= _("Close sidebar")

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

+- avatar_size = sidebar_refactor_disabled? ? 40 : 32
+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+
 = link_to scope_menu.link, **scope_menu.container_html_options do
-  %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{ class: ['avatar-container', 'rect-avatar', 'project-avatar', avatar_size_class] }
+    = source_icon(scope_menu.container, alt: scope_menu.title, class: ['avatar', 'avatar-tile', avatar_size_class], width: avatar_size, height: avatar_size)
   %span.sidebar-context-title
     = scope_menu.title

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

+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+- avatar_classes = ['avatar-container', 'rect-avatar', 'settings-avatar']
+- avatar_classes << avatar_size_class
+
 %aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), 'aria-label': _('Security navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to security_dashboard_path, title: _('Security Dashboard'), id: 'logo' do
-        %span.avatar-container.s32.settings-avatar.rect-avatar
+        %span{ class: avatar_classes }
           = brand_header_logo
         %span.sidebar-context-title
           = _('Security')