Merge branch '35483-improve-mobile-sidebar' into 'master'

Improve mobile sidebar

Closes #35483

See merge request !13349

app/assets/stylesheets/new_sidebar.scss

@@ -15,7 +15,9 @@ $new-sidebar-width: 220px;
 $new-sidebar-collapsed-width: 50px;
 
 .page-with-new-sidebar {
-  padding-left: $new-sidebar-collapsed-width;
+  @media (min-width: $screen-md-min) {
+    padding-left: $new-sidebar-collapsed-width;
+  }
 
   @media (min-width: $screen-lg-min) {
     padding-left: $new-sidebar-width;
@@ -49,10 +51,6 @@ $new-sidebar-collapsed-width: 50px;
     align-items: center;
     padding: 10px 16px 10px 10px;
     color: $gl-text-color;
-
-    @media (max-width: $screen-xs-max) {
-      padding-right: 30px;
-    }
   }
 
   &:hover,
@@ -77,26 +75,6 @@ $new-sidebar-collapsed-width: 50px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .close-nav-button {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    background-color: transparent;
-    border: 0;
-    padding: 0 10px;
-    color: $gl-text-color-secondary;
-
-    @media (max-width: $screen-xs-max) {
-      display: block;
-    }
-
-    &:hover {
-      color: $gl-text-color;
-    }
-  }
 }
 
 .settings-avatar {
@@ -339,21 +317,19 @@ $new-sidebar-collapsed-width: 50px;
 
 // Collapsed nav
 
-.toggle-sidebar-button {
+.toggle-sidebar-button,
+.close-nav-button {
   width: $new-sidebar-width - 2px;
   position: fixed;
   bottom: 0;
   padding: 16px;
   background-color: $gray-normal;
+  border: 0;
   border-top: 2px solid $border-color;
   color: $gl-text-color-secondary;
   display: flex;
   align-items: center;
 
-  @media (max-width: $screen-xs-max) {
-    display: none;
-  }
-
   i {
     font-size: 20px;
     margin-right: 8px;
@@ -369,6 +345,13 @@ $new-sidebar-collapsed-width: 50px;
   }
 }
 
+.toggle-sidebar-button {
+  @media (max-width: $screen-xs-max) {
+    display: none;
+  }
+}
+
+
 .sidebar-icons-only {
   .context-header {
     height: 60px;
@@ -415,6 +398,10 @@ $new-sidebar-collapsed-width: 50px;
 
 // Mobile nav
 
+.close-nav-button {
+  display: none;
+}
+
 .toggle-mobile-nav {
   display: none;
   background-color: transparent;
@@ -434,6 +421,12 @@ $new-sidebar-collapsed-width: 50px;
   }
 }
 
+@media (max-width: $screen-xs-max) {
+  .close-nav-button {
+    display: flex;
+  }
+}
+
 .mobile-overlay {
   display: none;
 

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

@@ -4,9 +4,6 @@
       .avatar-container.s40.settings-avatar
         = icon('wrench')
       .project-title Admin Area
-    = button_tag class: 'close-nav-button', type: 'button' do
-      %span.sr-only Close sidebar
-      = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts), html_options: {class: 'home'}) do
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do

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

@@ -5,9 +5,6 @@
         = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
       .group-title
         = @group.name
-    = button_tag class: 'close-nav-button', type: 'button' do
-      %span.sr-only Close sidebar
-      = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
       = link_to group_path(@group), title: 'Group overview' do

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

@@ -4,9 +4,6 @@
       .avatar-container.s40.settings-avatar
         = icon('user')
       .project-title User Settings
-    = button_tag class: 'close-nav-button', type: 'button' do
-      %span.sr-only Close sidebar
-      = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
       = link_to profile_path, title: 'Profile Settings' do

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

@@ -6,9 +6,6 @@
         = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
       .project-title
         = @project.name
-    = button_tag class: 'close-nav-button', type: 'button' do
-      %span.sr-only Close sidebar
-      = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
       = link_to project_path(@project), title: 'Project overview', class: 'shortcuts-project' do

app/views/shared/_sidebar_toggle_button.html.haml

@@ -2,3 +2,7 @@
   = icon('angle-double-left')
   = icon('angle-double-right')
   %span.collapse-text Collapse sidebar
+
+= button_tag class: 'close-nav-button', type: 'button' do
+  = icon ('times')
+  %span.collapse-text Close sidebar

changelogs/unreleased/35483-improve-mobile-sidebar.yml

+---
+title: Improve mobile sidebar
+merge_request:
+author: