diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index 1a24c7a64330d4cf7bf132ec07f1cba7fe4aa73b..6186ffe20b3250b8e5a9c0187782728e7c849b40 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -1,5 +1,6 @@ /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */ import _ from 'underscore'; +import Cookies from 'js-cookie'; import NewNavSidebar from './new_sidebar'; (function() { @@ -54,8 +55,11 @@ import NewNavSidebar from './new_sidebar'; } $(() => { - var newNavSidebar = new NewNavSidebar(); - newNavSidebar.bindEvents(); + if (Cookies.get('new_nav') === 'true') { + const newNavSidebar = new NewNavSidebar(); + newNavSidebar.bindEvents(); + } + $(window).on('scroll', _.throttle(applyScrollNavClass, 100)); }); }).call(window); diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js index 2ab8d764a1d706f0ab3572948dda5f3a0ad4616f..5f98aff8ced0ecfd04077209444b1f6da9b6bac6 100644 --- a/app/assets/javascripts/new_sidebar.js +++ b/app/assets/javascripts/new_sidebar.js @@ -11,9 +11,9 @@ export default class NewNavSidebar { } bindEvents() { - this.$openSidebar.on('click', e => this.toggleSidebarNav(e, true)); - this.$closeSidebar.on('click', e => this.toggleSidebarNav(e, false)); - this.$overlay.on('click', e => this.toggleSidebarNav(e, false)); + this.$openSidebar.on('click', () => this.toggleSidebarNav(true)); + this.$closeSidebar.on('click', () => this.toggleSidebarNav(false)); + this.$overlay.on('click', () => this.toggleSidebarNav(false)); } toggleSidebarNav(show) { diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index 0ab5322a7a4486e51c4ca78aa350828e8c77795a..1532ff3940c2abc7b4b0d3ab97386180f9030e83 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -247,7 +247,7 @@ $new-sidebar-width: 220px; &.mobile-nav-open { display: block; - position: absolute; + position: fixed; background-color: $black-transparent; height: 100%; width: 100%; diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index cef6e022d2b1eab3fc1b200dc9c5aaf41a50e8fc..6ffa1dd97d25671f07cc70a282ea6aee0567cef0 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -4,7 +4,8 @@ %nav.breadcrumbs{ role: "navigation" } .breadcrumbs-container{ class: [container_class, @content_class] } - if defined?(@new_sidebar) - %button.toggle-mobile-nav + = button_tag class: 'toggle-mobile-nav', type: 'button' do + %span.sr-only Open sidebar = icon ('bars') .breadcrumbs-links.js-title-container - unless hide_top_links diff --git a/app/views/layouts/nav/_new_admin_sidebar.html.haml b/app/views/layouts/nav/_new_admin_sidebar.html.haml index 2b5523f6fad0127fc20ec04b82258649632dead8..e58bc66635aa5badff6798ce1a92a3ca6873b84a 100644 --- a/app/views/layouts/nav/_new_admin_sidebar.html.haml +++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml @@ -4,8 +4,9 @@ .avatar-container.s40.settings-avatar = icon('wrench') .project-title Admin Area - %button.close-nav-button - = icon('times') + = 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 diff --git a/app/views/layouts/nav/_new_group_sidebar.html.haml b/app/views/layouts/nav/_new_group_sidebar.html.haml index fdb66d827ec3e578cf19acb2ffa64956bf9e78e0..b8a2a36ef2a635e715a0c9ecf52b180c2721b396 100644 --- a/app/views/layouts/nav/_new_group_sidebar.html.haml +++ b/app/views/layouts/nav/_new_group_sidebar.html.haml @@ -5,8 +5,9 @@ = image_tag group_icon(@group), class: "avatar s40 avatar-tile" .group-title = @group.name - %button.close-nav-button - = icon('times') + = 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: '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 ce4eecc6c79e8972b0829e08892b88d7d32a6c46..239e6b949e2f4302685ade6dfa6dd3c219e2538d 100644 --- a/app/views/layouts/nav/_new_profile_sidebar.html.haml +++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml @@ -4,8 +4,9 @@ .avatar-container.s40.settings-avatar = icon('user') .project-title User Settings - %button.close-nav-button - = icon('times') + = 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 diff --git a/app/views/layouts/nav/_new_project_sidebar.html.haml b/app/views/layouts/nav/_new_project_sidebar.html.haml index baf257d06e0ddf10234e9b56ab1b5d62c310a50c..3f5b7caaed95efa6e67983e1c79756b643f75e11 100644 --- a/app/views/layouts/nav/_new_project_sidebar.html.haml +++ b/app/views/layouts/nav/_new_project_sidebar.html.haml @@ -6,8 +6,9 @@ = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile') .project-title = @project.name - %button.close-nav-button - = icon('times') + = 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', class: 'shortcuts-project' do