Skip to content

Commit c1cc431

Browse files
amarantha-kamarantha-k
authored
Merge pull request #21 from rakeshAlgo/nav-menu-ui
Implement drop-down SDK language on left menu
2 parents c954769 + 171da11 commit c1cc431

File tree

6 files changed

+119
-89
lines changed

6 files changed

+119
-89
lines changed

‎src/css/component-frame.css‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.component-frame {
22
/* rgba(87, 160, 255, 1) */
33
background: var(--color-brand-gray6);
4-
padding: 12px 30px 12px 15px;
4+
padding: 12px 15px 12px 15px;
55
display: flex;
66
align-items: center;
77
justify-content: center;
@@ -46,35 +46,55 @@
4646
.frame-dropdown {
4747
position: absolute;
4848
display: none;
49-
background: var(--color-brand-white);
50-
padding: 5px 15px;
51-
left: -15px;
52-
top: 60px;
53-
border-radius: 4px;
49+
left: 0;
50+
top: 45px;
5451
z-index: 1;
55-
box-shadow: 0 3px 10px -4px var(--color-brand-gray8);
52+
padding: 17px 0 0;
5653
}
5754

58-
.frame-dropdown .frame-dropdown-list {
55+
.frame-dropdown .frame-dropdown-list,
56+
.frame-dropdown .related {
5957
margin: 0;
6058
padding: 0;
6159
list-style: none;
6260
}
6361

64-
ul.frame-dropdown-list li {
62+
.frame-dropdown ul {
63+
background: var(--color-brand-white);
64+
min-width: 125px;
65+
border-radius: 0;
66+
/* box-shadow: 0 3px 10px -4px var(--color-brand-gray8); */
67+
margin: 0;
68+
}
69+
70+
.frame-dropdown ul li a,
71+
.frame-dropdown .related li a {
72+
padding: 8px 0.625rem;
73+
display: inline-block;
74+
width: 100%;
75+
}
76+
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 {
6583
border-bottom: 1px solid var(--color-brand-gray8);
66-
padding-bottom: 5px;
67-
margin-bottom: 5px;
84+
/* padding-bottom: 5px; */
85+
/* margin-bottom: 5px; */
6886
}
6987

70-
ul.frame-dropdown-list li:last-child {
88+
ul.frame-dropdown-list li:last-child,
89+
.frame-dropdown ul.related li:last-child {
7190
border-bottom: 0;
7291
margin-bottom: 0;
7392
padding-bottom: 0;
7493
}
7594

7695
.frame-link,
77-
.frame-item {
96+
.frame-item,
97+
.navbar-item {
7898
font-size: var(--font-small);
7999
color: var(--color-brand-gray4);
80100
text-decoration: none;
@@ -85,20 +105,17 @@ ul.frame-dropdown-list li:last-child {
85105
.frame-link:active,
86106
.frame-item:active,
87107
.frame-link:visited,
88-
.frame-item:visited {
108+
.frame-item:visited,
109+
.navbar-item:hover {
89110
text-decoration: none;
90111
}
91112

92-
.frame-dropdown li.current {
93-
font-weight: var(--weight-semibold);
94-
}
95-
96-
.frame-dropdown li.current a.frame-item::before {
97-
content: "\2023";
98-
position: absolute;
99-
margin-left: -0.75em;
113+
.version-control-box {
114+
position: relative;
115+
z-index: 9;
100116
}
101117

102-
.component-frame .version::before {
103-
content: "Version ";
118+
.frame-dropdown .column {
119+
display: flex;
120+
box-shadow: 0 3px 10px 0 #e5e5e5;
104121
}

‎src/css/nav.css‎

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
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
scrollbar-width: thin;
@@ -17,8 +16,14 @@
1716
background-color: var(--color-border);
1817
}
1918

19+
.nav-menu {
20+
overflow-y: auto;
21+
background-color: var(--color-brand-gray7);
22+
height: var(--height-nav);
23+
}
24+
2025
@media screen and (max-width: 768px) {
21-
.nav-menu {
26+
.left-sidebar-menu {
2227
top: 0;
2328
bottom: 0;
2429
left: 0;
@@ -28,10 +33,11 @@
2833
}
2934

3035
@media screen and (min-width: 769px) {
31-
.nav-menu {
36+
.left-sidebar-menu {
3237
top: var(--height-to-body);
3338
margin-bottom: 1.5rem;
34-
height: var(--height-nav);
39+
height: 100%;
40+
/* height: var(--height-nav); */
3541
z-index: var(--z-index-nav);
3642
border-left: 2px solid #eee;
3743
border-right: 2px solid #eee;
@@ -376,6 +382,43 @@ html.is-clipped--nav {
376382
margin: auto;
377383
} */
378384

385+
/* .nav-menu ul.version-related-list.nav-list {
386+
margin: -1.5rem 0 1.5rem;
387+
}
388+
389+
.nav-menu ul.version-related-list.nav-list ul {
390+
padding: 5px 0 0;
391+
list-style: none;
392+
}
393+
394+
.nav-menu ul.version-related-list.nav-list li a {
395+
color: var(--color-brand-gray1);
396+
padding: 0;
397+
text-transform: capitalize;
398+
}
399+
400+
.nav-menu ul.version-related-list.nav-list li a:focus,
401+
.nav-menu ul.version-related-list.nav-list li a:hover {
402+
color: var(--color-brand-blue-secondary);
403+
}
404+
405+
.nav-menu ul.version-related-list.nav-list .nav-line .in-toggle {
406+
display: block;
407+
position: relative;
408+
width: 0;
409+
height: 0;
410+
margin-right: 10px;
411+
border-top: 6px solid transparent;
412+
border-bottom: 6px solid transparent;
413+
border-left: 10px solid var(--color-brand-gray5);
414+
}
415+
416+
.nav-menu ul.version-related-list.nav-list .nav-line[data-depth='1'] {
417+
padding-left: 1.85rem;
418+
}
419+
420+
*/
421+
379422
@media screen and (min-width: 769px) {
380423
.nav-control {
381424
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: 1 addition & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -34,48 +34,6 @@
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')
@@ -84,6 +42,7 @@
8442
for (var i = 0; i < navItems.length; i++) {
8543
navItems[i].classList.remove('is-active')
8644
navItems[i].classList.remove('is-inactive')
45+
navItems[i].classList.remove('open')
8746
}
8847
this.style.display = 'none'
8948
})
@@ -92,7 +51,6 @@
9251
function toggleActive (e) {
9352
if (this.getAttribute('data-depth') === '1') {
9453
var otherNavs = document.querySelectorAll('.nav-item[data-depth="0"]:not(.is-active)')
95-
console.log(otherNavs)
9654
for (var i = 0; i < otherNavs.length; i++) {
9755
otherNavs[i].classList.add('is-inactive')
9856
}

‎src/partials/nav-menu.hbs‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +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-
</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 & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,24 @@
1111
<div class="frame-link-dropdowns">
1212
<a class="frame-link component" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span></a>
1313
<div class="frame-dropdown versions">
14-
<ul class="frame-dropdown-list">
15-
{{#each page.versions}}
16-
<li{{#if (eq ./version @root.page.version)}} class="current"{{/if}}><a class="frame-item" href="{{relativize ./url}}">Version {{./displayVersion}}</a></li>
17-
{{/each}}
18-
</ul>
19-
{{#if (ends-with page.component.name '-sdk')}}
20-
<ul class="related">
21-
{{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
22-
<li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
23-
{{/each}}
24-
</ul>
25-
{{/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>
2632
</div>
2733
</div>
2834
</div>

0 commit comments

Comments
 (0)