Skip to content

Commit 732e055

Browse files
author
rakeshAlgo
committed
make version dropdown in two column
1 parent 7fea180 commit 732e055

File tree

6 files changed

+75
-110
lines changed

6 files changed

+75
-110
lines changed

‎src/css/component-frame.css‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
padding: 17px 0 0;
5353
}
5454

55-
.frame-dropdown .frame-dropdown-list {
55+
.frame-dropdown .frame-dropdown-list,
56+
.frame-dropdown .related {
5657
margin: 0;
5758
padding: 0;
5859
list-style: none;
@@ -61,30 +62,39 @@
6162
.frame-dropdown ul {
6263
background: var(--color-brand-white);
6364
min-width: 125px;
64-
border-radius: 4px;
65-
box-shadow: 0 3px 10px -4px var(--color-brand-gray8);
65+
border-radius: 0;
66+
/* box-shadow: 0 3px 10px -4px var(--color-brand-gray8); */
67+
margin: 0;
6668
}
6769

68-
.frame-dropdown ul li a {
69-
padding: 4px 0.625rem;
70+
.frame-dropdown ul li a,
71+
.frame-dropdown .related li a {
72+
padding: 8px 0.625rem;
7073
display: inline-block;
7174
width: 100%;
7275
}
7376

74-
ul.frame-dropdown-list li {
77+
.frame-dropdown .related {
78+
border-left: 3px solid var(--color-brand-gray8);
79+
}
80+
81+
.frame-dropdown ul.frame-dropdown-list li,
82+
.frame-dropdown ul.related li {
7583
border-bottom: 1px solid var(--color-brand-gray8);
76-
padding-bottom: 5px;
77-
margin-bottom: 5px;
84+
/* padding-bottom: 5px; */
85+
/* margin-bottom: 5px; */
7886
}
7987

80-
ul.frame-dropdown-list li:last-child {
88+
ul.frame-dropdown-list li:last-child,
89+
.frame-dropdown ul.related li:last-child {
8190
border-bottom: 0;
8291
margin-bottom: 0;
8392
padding-bottom: 0;
8493
}
8594

8695
.frame-link,
87-
.frame-item {
96+
.frame-item,
97+
.navbar-item {
8898
font-size: var(--font-small);
8999
color: var(--color-brand-gray4);
90100
text-decoration: none;
@@ -95,6 +105,17 @@ ul.frame-dropdown-list li:last-child {
95105
.frame-link:active,
96106
.frame-item:active,
97107
.frame-link:visited,
98-
.frame-item:visited {
108+
.frame-item:visited,
109+
.navbar-item:hover {
99110
text-decoration: none;
100111
}
112+
113+
.version-control-box {
114+
position: relative;
115+
z-index: 9;
116+
}
117+
118+
.frame-dropdown .column {
119+
display: flex;
120+
box-shadow: 0 3px 10px 0 #e5e5e5;
121+
}

‎src/css/nav.css‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
.nav-menu {
1+
.left-sidebar-menu {
22
background-color: var(--color-brand-gray7);
33
position: fixed;
44
width: inherit;
5-
overflow-y: auto;
65
font-size: 1rem;
76
line-height: 24px;
87
}
98

9+
.nav-menu {
10+
overflow-y: auto;
11+
background-color: var(--color-brand-gray7);
12+
height: var(--height-nav);
13+
}
14+
1015
@media screen and (max-width: 768px) {
11-
.nav-menu {
16+
.left-sidebar-menu {
1217
top: 0;
1318
bottom: 0;
1419
left: 0;
@@ -18,10 +23,11 @@
1823
}
1924

2025
@media screen and (min-width: 769px) {
21-
.nav-menu {
26+
.left-sidebar-menu {
2227
top: var(--height-to-body);
2328
margin-bottom: 1.5rem;
24-
height: var(--height-nav);
29+
height: 100%;
30+
/* height: var(--height-nav); */
2531
z-index: var(--z-index-nav);
2632
border-left: 2px solid #eee;
2733
border-right: 2px solid #eee;
@@ -374,7 +380,7 @@ html.is-clipped--nav {
374380
margin: auto;
375381
} */
376382

377-
.nav-menu ul.version-related-list.nav-list {
383+
/* .nav-menu ul.version-related-list.nav-list {
378384
margin: -1.5rem 0 1.5rem;
379385
}
380386
@@ -394,9 +400,6 @@ html.is-clipped--nav {
394400
color: var(--color-brand-blue-secondary);
395401
}
396402
397-
/* .nav-menu ul.version-related-list.nav-list .nav-line {
398-
padding-left: 1.65rem;
399-
} */
400403
.nav-menu ul.version-related-list.nav-list .nav-line .in-toggle {
401404
display: block;
402405
position: relative;
@@ -412,6 +415,8 @@ html.is-clipped--nav {
412415
padding-left: 1.85rem;
413416
}
414417
418+
*/
419+
415420
@media screen and (min-width: 769px) {
416421
.nav-control {
417422
display: none;

‎src/css/vars.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,11 @@
6666
/* --height-navbar: 4rem; */
6767
--height-spacer: 1rem;
6868
--height-navbar: 6rem;
69+
--height-version-control: 4.5rem;
6970
--height-to-body: calc(var(--height-navbar) + var(--height-spacer));
7071
--height-min-body: calc(100vh - var(--height-to-body));
71-
--height-nav: calc(var(--height-min-body) + var(--height-spacer));
72+
--height-nav: calc(var(--height-min-body) + var(--height-spacer) + var(--height-version-control));
73+
--nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
7274
/* --width-main-gutter: 1.5rem; */
7375
--width-main-gutter: 2.5rem;
7476
--width-container: 90rem;

‎src/js/01-nav.js‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -34,55 +34,12 @@
3434
// window.addEventListener('resize', fitNavMenuInit)
3535

3636
if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav)
37-
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-
// }
67-
// var navMenuControl = document.querySelector('.main-nav-parent')
68-
// // var navWrap = document.querySelector('.currentNav-wrap')
69-
70-
// navMenuControl.addEventListener('click', function () {
71-
// // navWrap.style.display = 'none'
72-
// for (var i = 0; i < navItems.length; i++) {
73-
// navItems[i].classList.remove('is-active')
74-
// navItems[i].classList.remove('is-inactive')
75-
// }
76-
// this.style.display = 'none'
77-
// })
78-
7937
var navMenuControl
8038
if (document.querySelector('.main-nav-parent')) {
8139
navMenuControl = document.querySelector('.main-nav-parent')
8240
navMenuControl.addEventListener('click', function () {
8341
// navWrap.style.display = 'none'
8442
for (var i = 0; i < navItems.length; i++) {
85-
console.log(navItems[i], 85)
8643
navItems[i].classList.remove('is-active')
8744
navItems[i].classList.remove('is-inactive')
8845
navItems[i].classList.remove('open')
@@ -94,7 +51,6 @@
9451
function toggleActive (e) {
9552
if (this.getAttribute('data-depth') === '1') {
9653
var otherNavs = document.querySelectorAll('.nav-item[data-depth="0"]:not(.is-active)')
97-
console.log(otherNavs)
9854
for (var i = 0; i < otherNavs.length; i++) {
9955
otherNavs[i].classList.add('is-inactive')
10056
}

‎src/partials/nav-menu.hbs‎

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,8 @@
1-
<div class="nav-menu">
2-
{{> nav-version-control}}
3-
{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
4-
{{!-- append version info for SDK --}}
5-
{{#if (ends-with page.component.name '-sdk')}}
6-
<ul class="version-related-list nav-list">
7-
<li class="nav-item open is-active" data-depth="0">
8-
9-
<span class="nav-line " data-depth="0">
10-
<span class="in-toggle" data-depth="0"></span>
11-
<span class="nav-text ">SDK</span>
12-
</span>
13-
14-
<ul class="related nav-list">
15-
{{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
16-
<li data-depth="1">
17-
<span class="nav-line " data-depth="1">
18-
{{!-- <span class="in-toggle" data-depth="1"></span> --}}
19-
<a class="navbar-item nav-link" data-depth="1" href="{{relativize ./url}}">{{{./title}}}</a>
20-
</span>
21-
</li>
22-
{{/each}}
23-
</ul>
24-
</li>
25-
26-
</ul>
27-
28-
{{/if}}
29-
</div>
1+
<div class="left-sidebar-menu">
2+
<div class="version-control-box">
3+
{{> nav-version-control}}
4+
</div>
5+
<div class="nav-menu">
6+
{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
7+
</div>
8+
</div>

‎src/partials/nav-version-control.hbs‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,24 @@
1111
<div class="frame-link-dropdowns">
1212
<a class="frame-link component" href="{{relativize page.componentVersion.url}}"> <span class="version">Version {{page.componentVersion.displayVersion}}</span></a>
1313
<div class="frame-dropdown versions">
14-
<ul class="frame-dropdown-list">
15-
{{#each page.versions}}
16-
{{#unless (eq ./version @root.page.version)}}
17-
<li><a class="frame-item" href="{{relativize ./url}}">
18-
{{!-- {{{@root.page.component.title}}} --}}
19-
Version {{./displayVersion}}</a></li>
20-
{{/unless}}
21-
{{/each}}
22-
</ul>
23-
{{!-- {{#if (ends-with page.component.name '-sdk')}}
24-
<ul class="related">
25-
{{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
26-
<li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
27-
{{/each}}
28-
</ul>
29-
{{/if}} --}}
14+
<div class="column">
15+
<ul class="frame-dropdown-list">
16+
{{#each page.versions}}
17+
{{#unless (eq ./version @root.page.version)}}
18+
<li><a class="frame-item" href="{{relativize ./url}}">
19+
{{!-- {{{@root.page.component.title}}} --}}
20+
Version {{./displayVersion}}</a></li>
21+
{{/unless}}
22+
{{/each}}
23+
</ul>
24+
{{#if (ends-with page.component.name '-sdk')}}
25+
<ul class="related">
26+
{{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
27+
<li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
28+
{{/each}}
29+
</ul>
30+
{{/if}}
31+
</div>
3032
</div>
3133
</div>
3234
</div>

0 commit comments

Comments
 (0)