Make sidebar accessible on mobile

5 files changed, 27 insertions, 15 deletions

diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index cc9219cb6fe..7734c1d8be3 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -10,6 +10,8 @@
     - if content_for?(:sub_nav)
       = yield :sub_nav
   .content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" }
+    - if show_new_nav?
+      .mobile-overlay
     .alert-wrapper
       = render "layouts/broadcast"
       - if show_new_nav?
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index 475d89f1156..cef6e022d2b 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -3,8 +3,9 @@
 
 %nav.breadcrumbs{ role: "navigation" }
   .breadcrumbs-container{ class: [container_class, @content_class] }
-    %button.toggle-mobile-nav
-      = icon ('bars')
+    - if defined?(@new_sidebar)
+      %button.toggle-mobile-nav
+        = icon ('bars')
     .breadcrumbs-links.js-title-container
       - unless hide_top_links
         .title
diff --git a/app/views/layouts/nav/_new_admin_sidebar.html.haml b/app/views/layouts/nav/_new_admin_sidebar.html.haml
index d7a9e530983..2b5523f6fad 100644
--- a/app/views/layouts/nav/_new_admin_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml
@@ -1,8 +1,11 @@
 .nav-sidebar
-  = link_to admin_root_path, title: 'Admin Overview', class: 'context-header' do
-    .avatar-container.s40.settings-avatar
-      = icon('wrench')
-    .project-title Admin Area
+  .context-header
+    = link_to admin_root_path, title: 'Admin Overview' do
+      .avatar-container.s40.settings-avatar
+        = icon('wrench')
+      .project-title Admin Area
+    %button.close-nav-button
+      = 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
diff --git a/app/views/layouts/nav/_new_group_sidebar.html.haml b/app/views/layouts/nav/_new_group_sidebar.html.haml
index c80308ed0de..fdb66d827ec 100644
--- a/app/views/layouts/nav/_new_group_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_group_sidebar.html.haml
@@ -1,9 +1,12 @@
 .nav-sidebar
-  = link_to group_path(@group), title: @group.name, class: 'context-header' do
-    .avatar-container.s40.group-avatar
-      = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
-    .group-title
-      = @group.name
+  .context-header
+    = link_to group_path(@group), title: @group.name do
+      .avatar-container.s40.group-avatar
+        = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
+      .group-title
+        = @group.name
+    %button.close-nav-button
+      = 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: 'Home' do
diff --git a/app/views/layouts/nav/_new_profile_sidebar.html.haml b/app/views/layouts/nav/_new_profile_sidebar.html.haml
index 033ea149cfb..ce4eecc6c79 100644
--- a/app/views/layouts/nav/_new_profile_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml
@@ -1,8 +1,11 @@
 .nav-sidebar
-  = link_to profile_path, title: 'Profile Settings', class: 'context-header' do
-    .avatar-container.s40.settings-avatar
-      = icon('user')
-    .project-title User Settings
+  .context-header
+    = link_to profile_path, title: 'Profile Settings' do
+      .avatar-container.s40.settings-avatar
+        = icon('user')
+      .project-title User Settings
+    %button.close-nav-button
+      = 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