Skip to content

Commit

Permalink
Add sidebar nav (#156)
Browse files Browse the repository at this point in the history 
* Add barebones sidebar nav structure

Co-authored-by: Andre King <[email protected]>

* 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 <[email protected]>
Co-authored-by: lettherebesites <[email protected]>
  • Loading branch information
@akingcfa @anule @lettherebesites
3 people authored Jan 30, 2020
1 parent 86f7153 commit 3578f35
Show file tree
Hide file tree
Showing 7 changed files with 354 additions and 17 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ yarn-debug.log*
.yarn-integrity
.git-authors
.DS_Store
.vscode
1 change: 1 addition & 0 deletions app/assets/javascripts/cfa_styleguide_main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
//
//= require jquery
//= require jquery_ujs
//= require sidebar_nav

var incrementer = (function() {
var i = {
Expand Down
76 changes: 76 additions & 0 deletions app/assets/javascripts/sidebar_nav.js
View file
Original file line number Diff line number Diff line change
@@ -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"
});
}
}
159 changes: 159 additions & 0 deletions app/assets/stylesheets/_sidebar-nav.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
3 changes: 3 additions & 0 deletions app/assets/stylesheets/cfa_styleguide_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,5 +74,8 @@
@import 'templates/styleguide';


/* Sidebar Nav */
@import 'sidebar-nav';

/* Shame */
@import 'ie-hacks';
110 changes: 110 additions & 0 deletions app/views/layouts/_sidebar_nav.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<header class="main-header">
<div class="toolbar spacing-above-10">
<div class="toolbar__left">
<h1 class="main-header__title">
<%= link_to "Honeycrisp Design System v#{Cfa::Styleguide::VERSION}", styleguide_main_path, class: %w{main-header__logo} %>
</h1>
</div>
<div class="toolbar__right">
<button class="button button--small sidebar-collapse-toggle"onclick="toggleNav()">Menu</button>
</div>
</div>
</header>
<aside class="sidebar">
<nav class="sidebar-nav">
<button class="button button--link sidebar-collapse-toggle" style="float: right;" onclick="toggleNav()">X</button>
<ul>
<!--<li class="spacing-below-0">
<span class="section-header heading-25-small spacing-below-10">Foundations</span>
<ul class="sidebar__sub-items spacing-below-10">
<li class="spacing-below-25"><%#= link_to "Overview", styleguide_main_path(anchor: "organisms"), class: 'text--grey-darkest' %></li>
<li class="spacing-below-25"><%#= link_to "Contributing", styleguide_main_path(anchor: "organisms"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Change Log", styleguide_main_path(anchor: "organisms"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Product Principles", styleguide_main_path(anchor: "organisms"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Atomic Design", styleguide_main_path(anchor: "organisms"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Accessibility", styleguide_main_path(anchor: "organisms"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Compatibility", styleguide_main_path(anchor: "organisms"), class: '' %></li>
</ul>
</li>
<li class="spacing-below-0">
<span class="section-header heading-25-small spacing-below-10">For Designers</span>
<ul class="sidebar__sub-items spacing-below-10 spacing-below-10">
<li class="spacing-below-25"><%#= link_to "Spacing", styleguide_main_path(anchor: "spacing"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Typography", styleguide_main_path(anchor: "spacing"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Grid Layout", styleguide_main_path(anchor: "spacing"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Color", styleguide_main_path(anchor: "spacing"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Copywriting", styleguide_main_path(anchor: "spacing"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Visual Assets", styleguide_main_path(anchor: "spacing"), class: '' %></li>
<li class="spacing-below-25"><%#= link_to "Sketch Symbol Library", styleguide_main_path(anchor: "spacing"), class: '' %></li>
</ul>
</li>-->

<li class="spacing-below-0">
<span class="section-header heading-25-small spacing-below-10">For Engineers</span>
<ul class="sidebar__sub-items spacing-below-10">
<li class="spacing-below-25"><%= link_to "Emojis", styleguide_emojis_path, class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Builder", styleguide_form_builder_path, class: '' %></li>
<!--<li class="spacing-below-25"><%#= link_to "Css Conventions", styleguide_main_path(anchor: "atoms"), class: '' %></li>-->
</ul>
</li>
<li class="spacing-below-0">
<span class="section-header heading-25-small spacing-below-10">Atoms</span>
<ul class="sidebar__sub-items spacing-below-10">
<li class="spacing-below-25"><%= link_to "Buttons", styleguide_main_path(anchor: "atoms-buttons"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Card", styleguide_main_path(anchor: "atoms-card"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Colors", styleguide_main_path(anchor: "atoms-colors"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Example Pills", styleguide_main_path(anchor: "atoms-examples"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Elements", styleguide_main_path(anchor: "atoms-form_elements"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Grid Layout", styleguide_main_path(anchor: "atoms-grid"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Icons", styleguide_main_path(anchor: "atoms-icons"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Labels", styleguide_main_path(anchor: "atoms-labels"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Notice", styleguide_main_path(anchor: "atoms-notices"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Slab Layout", styleguide_main_path(anchor: "atoms"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Spacing", styleguide_main_path(anchor: "atoms-spacing"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Typography", styleguide_main_path(anchor: "atoms-typography"), class: '' %></li>
</ul>
</li>
<li class="spacing-below-0">
<span class="section-header heading-25-small spacing-below-10">Molecules</span>
<ul class="sidebar__sub-items spacing-below-10">
<li class="spacing-below-25"><%= link_to "Accordion", styleguide_main_path(anchor: "molecules-accordion"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Block Input Group", styleguide_main_path(anchor: "molecules-block_input_group"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Data Table", styleguide_main_path(anchor: "molecules-data_table"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Example Group", styleguide_main_path(anchor: "molecules-example_group"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Flash Messages", styleguide_main_path(anchor: "molecules-flash_messages"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Follow Up Question", styleguide_main_path(anchor: "molecules-follow_up_question"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Group", styleguide_main_path(anchor: "molecules-form_group"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Group Error State", styleguide_main_path(anchor: "molecules-form_group_error_state"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Incrementer", styleguide_main_path(anchor: "molecules-incrementer"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Inline Input Group", styleguide_main_path(anchor: "molecules-inline_input_group"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Media Box", styleguide_main_path(anchor: "molecules-media_box"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Progress Indicator", styleguide_main_path(anchor: "molecules-progress_indicator"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Progress Step Bar", styleguide_main_path(anchor: "molecules-progress_step_bar"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Reveal", styleguide_main_path(anchor: "molecules-reveal"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Searchbar", styleguide_main_path(anchor: "molecules-searchbar"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Show More", styleguide_main_path(anchor: "molecules-show_more"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Summary Table", styleguide_main_path(anchor: "molecules-summary_table"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Tab Bar", styleguide_main_path(anchor: "molecules-tab_bar"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Text Input Group", styleguide_main_path(anchor: "molecules-text_input_group"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Toolbar", styleguide_main_path(anchor: "molecules-toolbar"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Two-up Input Group", styleguide_main_path(anchor: "molecules-two_up_input_group"), class: '' %></li>
</ul>
</li>
<li class="spacing-below-0">
<span class="section-header heading-25-small spacing-below-10">Organisms</span>
<ul class="sidebar__sub-items spacing-below-10">
<li class="spacing-below-25"><%= link_to "Admin Application Card", styleguide_main_path(anchor: "organisms-admin_application_card"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Card 1", styleguide_main_path(anchor: "organisms-form_card_1"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Card 2", styleguide_main_path(anchor: "organisms-form_card_2"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Card 3", styleguide_main_path(anchor: "organisms-form_card_3"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Form Card 4", styleguide_main_path(anchor: "organisms-form_card_4"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Pagination", styleguide_main_path(anchor: "organisms-pagination"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Statistics Card", styleguide_main_path(anchor: "organisms-statistics_card"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Steps", styleguide_main_path(anchor: "organisms-steps"), class: '' %></li>
<li class="spacing-below-25"><%= link_to "Vertical Steps", styleguide_main_path(anchor: "organisms-vertical_steps"), class: '' %></li>
</ul>
</li>
</ul>
</nav>
</aside>
21 changes: 4 additions & 17 deletions app/views/layouts/main.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,10 @@

<body class="template--<%= content_for(:template_name) if content_for?(:template_name) %>">
<div class="page-wrapper">
<header class="main-header">
<div class="toolbar">
<div class="toolbar__left">
<h1 class="main-header__title">
<%= link_to "Honeycrisp Design System v#{Cfa::Styleguide::VERSION}", styleguide_main_path, class: %w{main-header__logo} %>
</h1>
</div>
<div class="toolbar__right">
<%= 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} %>
</div>
</div>
</header>
<%= yield %>
<%= render 'layouts/sidebar_nav' %>
<div class="left-sidebar-slab-container">
<%= yield %>
</div>
</div>

<footer class="main-footer">
Expand Down

0 comments on commit 3578f35

Please sign in to comment.