From 3578f352d661db7226d572ff9de8874edcb2a395 Mon Sep 17 00:00:00 2001 From: akingcfa <57970802+akingcfa@users.noreply.github.com> Date: Wed, 29 Jan 2020 16:26:27 -0800 Subject: [PATCH] Add sidebar nav (#156) * Add barebones sidebar nav structure Co-authored-by: Andre King * fixed left sidebar * updated styles - nixed border-left * Styles and minute jquery added for collapssible menu button for smaller screens * added manual padding to the toolbar Co-authored-by: Anule Ndukwu <27640736+anule@users.noreply.github.com> Co-authored-by: lettherebesites <38866474+lettherebesites@users.noreply.github.com> --- .gitignore | 1 + app/assets/javascripts/cfa_styleguide_main.js | 1 + app/assets/javascripts/sidebar_nav.js | 76 +++++++++ app/assets/stylesheets/_sidebar-nav.scss | 159 ++++++++++++++++++ .../stylesheets/cfa_styleguide_main.scss | 3 + app/views/layouts/_sidebar_nav.html.erb | 110 ++++++++++++ app/views/layouts/main.html.erb | 21 +-- 7 files changed, 354 insertions(+), 17 deletions(-) create mode 100644 app/assets/javascripts/sidebar_nav.js create mode 100644 app/assets/stylesheets/_sidebar-nav.scss create mode 100644 app/views/layouts/_sidebar_nav.html.erb diff --git a/.gitignore b/.gitignore index bf5fe5e0..15a30a3c 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,4 @@ yarn-debug.log* .yarn-integrity .git-authors .DS_Store +.vscode diff --git a/app/assets/javascripts/cfa_styleguide_main.js b/app/assets/javascripts/cfa_styleguide_main.js index de06b96c..ce2f6ec1 100644 --- a/app/assets/javascripts/cfa_styleguide_main.js +++ b/app/assets/javascripts/cfa_styleguide_main.js @@ -12,6 +12,7 @@ // //= require jquery //= require jquery_ujs +//= require sidebar_nav var incrementer = (function() { var i = { diff --git a/app/assets/javascripts/sidebar_nav.js b/app/assets/javascripts/sidebar_nav.js new file mode 100644 index 00000000..1f85c6e6 --- /dev/null +++ b/app/assets/javascripts/sidebar_nav.js @@ -0,0 +1,76 @@ +//= require jquery +$(document).ready(function() { + //collapse menu if its mobile and you click a link in menu sub items + $('.sidebar-nav').on('click', 'a', function () + { + if( $('.sidebar-collapse-toggle').is(':visible') ) { + $(".sidebar").css({ + "width": "17em", + "display": "none" + }); + $(".left-sidebar-slab-container").css({ + "margin-left": "0", + "padding-left": "0" + }); + } + }); +}); + +$(window).resize(function() { + //needed jquery resize for when someone changes screen size + //works if same size but gets caught in either mobile or desktop without this + if( $('.sidebar-collapse-toggle').first().is(':hidden') ) + { + $(".sidebar").css({ + "display" : "inline-block" + }); + $(".sidebar-nav").css({ + "width": "12em" + }); + $(".left-sidebar-slab-container").css({ + "margin-left": "11em", + "padding-left": "1em" + }); + } + else + { + $(".sidebar").css({ + "width": "17em", + "display" : "none" + }); + + $(".left-sidebar-slab-container").css({ + "margin-left": "0", + "padding-left": "0" + }); + } +}); + +function toggleNav() { + if($(".sidebar").is(":hidden")) + { + $(".sidebar").css({ + "display" : "inline-block" + }); + + $(".sidebar-nav").css({ + "width": "100%" + }); + + $(".left-sidebar-slab-container").css({ + "margin-left": "11em", + "padding-left": "1em" + }); + } + else + { + $(".sidebar").css({ + "width": "17em", + "display" : "none" + }); + $(".left-sidebar-slab-container").css({ + "margin-left": "0", + "padding-left": "0" + }); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/_sidebar-nav.scss b/app/assets/stylesheets/_sidebar-nav.scss new file mode 100644 index 00000000..01289279 --- /dev/null +++ b/app/assets/stylesheets/_sidebar-nav.scss @@ -0,0 +1,159 @@ +/* ------------- +Color Class Updates +----------------*/ + +/* ------------- +Sidebar +----------------*/ +.sidebar { + position: absolute; + //width: 33.3333%; + width: 17em; + height: 100%; + visibility: visible; + -webkit-backface-visibility: hidden; + float:left; + display:inline-block; + vertical-align:top; + header{ + width: 100%; + display:block; + padding: 0.75em 1em; + } +} + +/* .sidebar > a{ + @include transition(all 0.6s ease); + + &:hover{ + @include transition(all 0.6s ease); + } +} */ + +/* ------------- +Sidebar Nav +----------------*/ +.sidebar-nav { + position: fixed; + border-right: 2px black solid; + width: 12em; + height: 100%; + padding-bottom: 6em; + z-index: 9; + overflow: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + background-color: #ffffff; + left: 0; + + ul{ + list-style:none; + display: block; + padding: 0; + margin: 0; + line-height: 16px; + + li{ + margin-left: 0; + //min-width: 13em; + display:inline-block; + width: 100%; + line-height: 16px; + + .section-header{ + display:block; + background-color: $color-green-light; + padding: .75em 1em; + color: $color-grey-dark; + width: 100% !important; + line-height: 16px; + } + + $sidebar-a-tags: 'a, a:active, a:hover, a:visited'; + $sidebar-a-tags-hover: 'a:hover'; + $sidebar-a-tags-active: 'a:active'; + + #{$sidebar-a-tags} { + line-height: 16px; + text-decoration: none; + } + + #{$sidebar-a-tags-active} { + border-right: $color-teal 2px; + font-weight: 900; + } + + #{$sidebar-a-tags-hover} { + text-decoration: underline; + } + + .sidebar__sub-items{ + padding: .05em 1em; + li{ + #{$sidebar-a-tags} { + color: $color-grey-darkest; + line-height: 1.2em; + } + + #{$sidebar-a-tags-active} { + /*border-left: 2px solid $color-teal;*/ + font-weight: 700; + } + + #{$sidebar-a-tags-hover} { + /*border-left: 2px solid $color-teal;*/ + text-decoration: underline; + } + } + } + + } + } +} + +.sidebar-collapse-toggle{ + display: none; +} + +/* ------------- +Sidebar Nav +----------------*/ +.left-sidebar-slab-container{ + margin-left: 11em; + padding-left: 1em; +} + +@media screen and (max-width: 1400px) { + .sidebar{ + display: none; + } + + .sidebar-collapse-toggle{ + display: block; + } + + .left-sidebar-slab-container{ + margin-left: 0; + padding-left: 0; + padding-right: 0; + } +} + +@media screen and (min-width: 1401px) { + .sidebar{ + display: inline-block; + } + + .sidebar-collapse-toggle{ + display: none; + } + + .left-sidebar-slab-container{ + margin-left: 11em; + padding-left: 1em; + } + + .sidebar-nav { + width: 12em !important; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/cfa_styleguide_main.scss b/app/assets/stylesheets/cfa_styleguide_main.scss index 2106586f..71e88478 100644 --- a/app/assets/stylesheets/cfa_styleguide_main.scss +++ b/app/assets/stylesheets/cfa_styleguide_main.scss @@ -74,5 +74,8 @@ @import 'templates/styleguide'; +/* Sidebar Nav */ +@import 'sidebar-nav'; + /* Shame */ @import 'ie-hacks'; diff --git a/app/views/layouts/_sidebar_nav.html.erb b/app/views/layouts/_sidebar_nav.html.erb new file mode 100644 index 00000000..0e3aaa23 --- /dev/null +++ b/app/views/layouts/_sidebar_nav.html.erb @@ -0,0 +1,110 @@ +
+
+
+

+ <%= link_to "Honeycrisp Design System v#{Cfa::Styleguide::VERSION}", styleguide_main_path, class: %w{main-header__logo} %> +

+
+
+ +
+
+
+ diff --git a/app/views/layouts/main.html.erb b/app/views/layouts/main.html.erb index c8fc24ca..263779ed 100644 --- a/app/views/layouts/main.html.erb +++ b/app/views/layouts/main.html.erb @@ -16,23 +16,10 @@
-
-
-
-

- <%= link_to "Honeycrisp Design System v#{Cfa::Styleguide::VERSION}", styleguide_main_path, class: %w{main-header__logo} %> -

-
-
- <%= link_to "Atoms", styleguide_main_path(anchor: "atoms"), class: %w{toolbar__item text--small link--subtle} %> - <%= link_to "Molecules", styleguide_main_path(anchor: "molecules"), class: %w{toolbar__item text--small link--subtle} %> - <%= link_to "Organisms", styleguide_main_path(anchor: "organisms"), class: %w{toolbar__item text--small link--subtle} %> - <%= link_to "Form Builder", styleguide_form_builder_path, class: %w{toolbar__item text--small link--subtle} %> - <%= link_to "Emojis", styleguide_emojis_path, class: %w{toolbar__item text--small link--subtle} %> -
-
-
- <%= yield %> + <%= render 'layouts/sidebar_nav' %> +
+ <%= yield %> +