Skip to content

Commit ae984ea

Browse files
amarantha-kamarantha-k
authored
Merge pull request #33 from rakeshAlgo/ui-fixes
Implementing collapse & Expand behaviour for Navigation
2 parents 1f7b73e + 129a446 commit ae984ea

File tree

5 files changed

+161
-61
lines changed

5 files changed

+161
-61
lines changed

‎src/css/body.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ main {
2121
nav.nav {
2222
/* NOTE reserve no space in layout by default */
2323
flex: 0 0 0%;
24-
visibility: hidden;
2524
/* NOTE width must be set in order for fixed child to inherit */
2625
width: var(--width-nav);
2726
}
@@ -59,6 +58,6 @@ aside.toc.sidebar {
5958

6059
@media screen and (max-width: 767px) {
6160
div.body {
62-
margin-top: 5rem;
61+
margin-top: 3.9rem;
6362
}
6463
}

‎src/css/nav.css‎

Lines changed: 105 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
line-height: 24px;
77
scrollbar-width: thin;
88
scrollbar-color: var(--color-border) transparent;
9+
height: 100%;
10+
z-index: var(--z-index-nav);
911
}
1012

1113
.nav-menu::-webkit-scrollbar {
@@ -20,28 +22,7 @@
2022
overflow-y: auto;
2123
background-color: var(--color-brand-gray7);
2224
height: var(--height-nav);
23-
}
24-
25-
@media screen and (max-width: 768px) {
26-
.left-sidebar-menu {
27-
top: 0;
28-
bottom: 0;
29-
left: 0;
30-
transform: translateX(-100%);
31-
z-index: var(--z-index-nav-mobile);
32-
}
33-
}
34-
35-
@media screen and (min-width: 769px) {
36-
.left-sidebar-menu {
37-
top: var(--height-to-body);
38-
margin-bottom: 1.5rem;
39-
height: 100%;
40-
/* height: var(--height-nav); */
41-
z-index: var(--z-index-nav);
42-
border-left: 2px solid #eee;
43-
border-right: 2px solid #eee;
44-
}
25+
transition: all 0.3s;
4526
}
4627

4728
.nav-menu .nav-link,
@@ -426,8 +407,109 @@ html.is-clipped--nav {
426407
427408
*/
428409

429-
@media screen and (min-width: 769px) {
410+
a.menu-expand-toggle {
411+
display: inline-block;
412+
position: absolute;
413+
top: 15px;
414+
right: -1rem;
415+
z-index: 99;
416+
font-size: 24px;
417+
color: var(--color-brand-blue-secondary);
418+
background-color: var(--color-brand-gray7);
419+
border-radius: 50%;
420+
}
421+
422+
/* Responsive CSS */
423+
424+
@media screen and (min-width: 993px) {
425+
.nav.collapse-menu {
426+
width: 0rem;
427+
}
428+
429+
.nav.collapse-menu .frame-body .title,
430+
.nav.collapse-menu .version-control-box,
431+
.nav.collapse-menu .nav-menu {
432+
font-size: 0;
433+
display: none;
434+
}
435+
436+
.nav.collapse-menu .left-sidebar-menu {
437+
border: 0;
438+
background-color: transparent;
439+
}
440+
441+
.nav.collapse-menu a.menu-expand-toggle {
442+
transform: rotate(180deg);
443+
right: -1.35rem;
444+
opacity: 1;
445+
color: var(--color-brand-blue-secondary);
446+
}
447+
448+
a.menu-expand-toggle {
449+
opacity: 0;
450+
}
451+
452+
.nav:hover a.menu-expand-toggle {
453+
opacity: 1;
454+
}
455+
456+
.left-sidebar-menu {
457+
top: var(--height-to-body);
458+
margin-bottom: 1.5rem;
459+
/* height: var(--height-nav); */
460+
border-left: 2px solid #eee;
461+
border-right: 2px solid #eee;
462+
}
430463
.nav-control {
431464
display: none;
432465
}
433466
}
467+
468+
@media screen and (max-width: 992px) {
469+
.left-sidebar-menu {
470+
left: 0;
471+
z-index: 9;
472+
transform: translate(-100%, 0);
473+
}
474+
475+
.nav.collapse-menu a.menu-expand-toggle {
476+
transform: rotate(0deg);
477+
right: -1rem;
478+
opacity: 1;
479+
color: var(--color-brand-blue-secondary);
480+
}
481+
482+
nav.nav a.menu-expand-toggle {
483+
transform: rotate(180deg);
484+
right: -1.35rem;
485+
opacity: 1;
486+
color: var(--color-brand-blue-secondary);
487+
}
488+
489+
.nav.collapse-menu .left-sidebar-menu {
490+
transform: translate(0, 0);
491+
}
492+
493+
.nav-menu {
494+
height: calc(100vh - 8.5rem) !important;
495+
}
496+
497+
/* .nav.collapse-menu {
498+
width: 0rem;
499+
}
500+
501+
.nav.collapse-menu .frame-body .title,
502+
.nav.collapse-menu .version-control-box,
503+
.nav.collapse-menu .nav-menu {
504+
font-size: 0;
505+
display: none;
506+
}
507+
508+
.nav.collapse-menu .left-sidebar-menu {
509+
border: 0;
510+
background-color: transparent;
511+
}
512+
513+
*/
514+
515+
}

‎src/js/01-nav.js‎

Lines changed: 47 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
'use strict'
33

44
var nav = document.querySelector('nav.nav')
5+
var menuExpandToggle = document.querySelector('.menu-expand-toggle')
56
var navMenu = {}
67
if (!(navMenu.element = nav && nav.querySelector('.nav-menu'))) return
78
var navControl
@@ -29,41 +30,41 @@
2930
}
3031
})
3132

32-
fitNavMenuInit({})
33-
window.addEventListener('load', fitNavMenuInit)
34-
window.addEventListener('resize', fitNavMenuInit)
33+
// fitNavMenuInit({})
34+
// window.addEventListener('load', fitNavMenuInit)
35+
// window.addEventListener('resize', fitNavMenuInit)
3536

3637
if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav)
3738

38-
function scrollItemToMiddle (el, parentEl) {
39-
var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop
40-
if (adjustment > 0) parentEl.scrollTop = adjustment
41-
}
42-
43-
function fitNavMenuInit (e) {
44-
window.removeEventListener('scroll', fitNavMenuOnScroll)
45-
navMenu.element.style.height = ''
46-
if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) {
47-
// QUESTION should we check if x value > 0 instead?
48-
if (window.getComputedStyle(nav).visibility === 'visible') {
49-
if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer')
50-
fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement)
51-
window.addEventListener('scroll', fitNavMenuOnScroll)
52-
}
53-
if (currentPageItem && e.type !== 'resize') {
54-
scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element)
55-
}
56-
}
57-
}
58-
59-
function fitNavMenuOnScroll () {
60-
fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement)
61-
}
62-
63-
function fitNavMenu (preferredHeight, availableHeight, encroachingElement) {
64-
var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top
65-
navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : ''
66-
}
39+
// function scrollItemToMiddle (el, parentEl) {
40+
// var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop
41+
// if (adjustment > 0) parentEl.scrollTop = adjustment
42+
// }
43+
44+
// function fitNavMenuInit (e) {
45+
// window.removeEventListener('scroll', fitNavMenuOnScroll)
46+
// navMenu.element.style.height = ''
47+
// if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) {
48+
// // QUESTION should we check if x value > 0 instead?
49+
// if (window.getComputedStyle(nav).visibility === 'visible') {
50+
// if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer')
51+
// fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement)
52+
// window.addEventListener('scroll', fitNavMenuOnScroll)
53+
// }
54+
// if (currentPageItem && e.type !== 'resize') {
55+
// scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element)
56+
// }
57+
// }
58+
// }
59+
60+
// function fitNavMenuOnScroll () {
61+
// fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement)
62+
// }
63+
64+
// function fitNavMenu (preferredHeight, availableHeight, encroachingElement) {
65+
// var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top
66+
// navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : ''
67+
// }
6768

6869
var navMenuControl
6970
if (document.querySelector('.main-nav-parent')) {
@@ -137,7 +138,20 @@
137138
} else {
138139
nav.classList.add('show-nav')
139140
}
140-
}, 2000)
141+
142+
menuExpandToggle.addEventListener('click', function(e) {
143+
e.preventDefault()
144+
// var navBarHeight = nav.querySelector('.nav-menu')
145+
// navBarHeight.style.height = '100vh'
146+
// console.log(navBarHeight.style.height)
147+
if (nav.classList.contains('collapse-menu')) {
148+
nav.classList.remove('collapse-menu')
149+
} else {
150+
nav.classList.add('collapse-menu')
151+
}
152+
153+
})
154+
}, 500)
141155
// has children in li
142156
// $('ul.nav-list li.nav-item ul.nav-list .nav-item').has('ul.nav-list').addClass('has-children')
143157
function concealEvent (e) {

‎src/js/05-tabset.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,12 @@ function find (selector, from) {
9898
return Array.prototype.slice.call((from || document).querySelectorAll(selector))
9999
}
100100
setTimeout(function () {
101-
document.querySelector(' .dropddown-btn').addEventListener('click', function (e) {
102-
e.preventDefault()
103-
})
101+
if (document.querySelector(' .dropddown-btn')) {
102+
document.querySelector(' .dropddown-btn').addEventListener('click', function (e) {
103+
e.preventDefault()
104+
})
105+
}
106+
104107
}, 1000)
105108

106109
function getPane (id, tabset) {

‎src/partials/nav-menu.hbs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@
55
<div class="nav-menu">
66
{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
77
</div>
8+
9+
<a href="#" class="menu-expand-toggle"><i class="fas fa-chevron-circle-left"></i></a>
810
</div>

0 commit comments

Comments
 (0)