Skip to content

Commit 1c82089

Browse files
colegoldsmithcolegoldsmith
authored
Side Nav Improvements (#133)
1 parent b466aa7 commit 1c82089

17 files changed

+173
-75
lines changed

‎preview-src/ui-model.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ site:
6969
"items": [
7070
{ "title": "Apache Pulsar Connector", "url": "#" },
7171
{ "title": "CDC for Cassandra", "url": "#" },
72-
{ "title": "K8ssandra", "url": "#" },
72+
{ "title": "K8ssandra", "url": "https://docs.k8ssandra.io" },
7373
{ "title": "Stargate", "url": "#" },
7474
{ "title": "Starlight for JMS", "url": "#" },
7575
{ "title": "Starlight for Kafka", "url": "#" },

‎src/css/components/collapse.css‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
@layer components {
22
.collapse {
3-
@apply !visible grid;
3+
@apply !visible;
44
}
55

66
.collapse > .collapse-content {
7-
@apply relative col-start-1 row-start-2 grid min-h-0;
7+
@apply grid min-h-0 invisible;
88

99
grid-template-rows: 0fr;
10-
transition: grid-template-rows 0.2s;
10+
transition-property: grid-template-rows, visibility;
11+
transition-duration: 0.2s;
12+
transition-behavior: allow-discrete;
1113

1214
@media (prefers-reduced-motion: reduce) {
1315
transition-property: none;
@@ -18,19 +20,9 @@
1820
@apply overflow-hidden;
1921
}
2022

21-
.collapse-title,
22-
.collapse > input[type="checkbox"],
23-
.collapse > input[type="radio"] {
24-
@apply col-start-1 row-start-1;
25-
}
26-
27-
.collapse > input[type="checkbox"],
28-
.collapse > input[type="radio"] {
29-
@apply cursor-pointer appearance-none opacity-0;
30-
}
23+
.collapse > .collapse-content.active {
24+
@apply visible;
3125

32-
.collapse > input[type="checkbox"]:checked ~ .collapse-content,
33-
.collapse > input[type="radio"]:checked ~ .collapse-content {
3426
grid-template-rows: 1fr;
3527
}
3628
}

‎src/css/vars/dark.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
--ds-primary-soft-color: var(--ds-primary-200);
7777
--ds-primary-soft-disabled-bg: var(--ds-primary-600);
7878
--ds-primary-soft-disabled-color: var(--ds-primary-800);
79-
--ds-primary-soft-hover-bg: var(--ds-primary-500);
79+
--ds-primary-soft-hover-bg: var(--ds-primary-700);
8080
--ds-primary-solid-active-bg: var(--ds-primary-600);
8181
--ds-primary-solid-bg: var(--ds-primary-600);
8282
--ds-primary-solid-color: var(--ds-common-white);

‎src/css/vars/light.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@
7171
--ds-primary-plain-color: var(--ds-primary-600);
7272
--ds-primary-plain-disabled-color: var(--ds-primary-200);
7373
--ds-primary-plain-hover-bg: var(--ds-primary-100);
74-
--ds-primary-soft-active-bg: var(--ds-primary-300);
74+
--ds-primary-soft-active-bg: var(--ds-primary-200);
7575
--ds-primary-soft-bg: var(--ds-primary-0);
7676
--ds-primary-soft-color: var(--ds-primary-600);
7777
--ds-primary-soft-disabled-bg: var(--ds-primary-100);
7878
--ds-primary-soft-disabled-color: var(--ds-primary-300);
79-
--ds-primary-soft-hover-bg: var(--ds-primary-200);
79+
--ds-primary-soft-hover-bg: var(--ds-primary-100);
8080
--ds-primary-solid-active-bg: var(--ds-primary-700);
8181
--ds-primary-solid-bg: var(--ds-primary-500);
8282
--ds-primary-solid-color: var(--ds-common-white);

‎src/helpers/global-nav-active.js‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,45 @@
22

33
module.exports = module.exports = (navItem, {
44
data: {
5-
root: { page },
5+
root: { page, site },
66
},
77
}) => {
88
const pageVersion = page.componentVersion?.version
99
const pageComponent = page.component?.name
1010

11+
const getIgnoredActiveComponents = (items) => {
12+
return items.reduce((acc, item) => {
13+
if (item.ignoreActiveComponent) {
14+
acc[item.url] = item.component
15+
}
16+
if (item.items) {
17+
acc = { ...acc, ...getIgnoredActiveComponents(item.items) }
18+
}
19+
return acc
20+
}, {})
21+
}
22+
23+
const ignoredActiveComponents = getIgnoredActiveComponents(site.keys.globalNav)
24+
1125
const matchesComponentAndVersion = (item) => {
12-
if (pageVersion) {
13-
return item.component === pageComponent && item.version === pageVersion
14-
} else {
26+
if (ignoredActiveComponents[page.url] === pageComponent && !item.ignoreActiveComponent) {
27+
return false
28+
}
29+
if (item.ignoreActiveComponent) {
30+
return item.url === page.url
31+
}
32+
if (item.component) {
33+
if (item.version && pageVersion) {
34+
return item.component === pageComponent && item.version === pageVersion
35+
}
1536
return item.component === pageComponent
1637
}
17-
}
18-
19-
if (navItem.component) {
20-
return matchesComponentAndVersion(navItem)
38+
return false
2139
}
2240

2341
if (navItem.items) {
2442
return navItem.items.some(matchesComponentAndVersion)
43+
} else {
44+
return matchesComponentAndVersion(navItem)
2545
}
26-
27-
return false
2846
}

‎src/helpers/log-pretty.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict'
2+
3+
module.exports = (obj) => {
4+
return console.log(JSON.stringify(obj, null, 2))
5+
}

‎src/helpers/nav-id.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict'
2+
3+
module.exports = (level = 0, content) => {
4+
if (!content) return
5+
return `${level}-${content.replace(/\s+/g, '-').toLowerCase()}`
6+
}

‎src/js/01-nav.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
// Useful for pages with no nav links i.e. landing pages.
2020
const sideNav = document.querySelector('#side-nav')
2121
if (sideNav) {
22-
const checkedInputs = sideNav.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked')
23-
if (!checkedInputs.length) {
24-
const firstInput = sideNav.querySelector('input[type="checkbox"], input[type="radio"]')
25-
if (firstInput) {
26-
firstInput.checked = true
22+
const activeCollapses = sideNav.querySelectorAll('.collapse > .collapse-content.active')
23+
if (!activeCollapses.length) {
24+
const firstCollapse = sideNav.querySelector('.collapse > .collapse-content')
25+
if (firstCollapse) {
26+
firstCollapse.classList.add('active')
2727
}
2828
}
2929
}

‎src/js/02-on-this-page.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
headingsSelector.push(headingSelector.join('>'))
2222
}
2323
var headings = find(headingsSelector.join(','), article.parentNode)
24-
if (!headings.length) return sidebar.querySelector('.toc-menu').classList.add('hidden')
24+
if (!headings.length) return sidebar.classList.add('!hidden')
2525

2626
var lastActiveFragment
2727
var links = {}

‎src/js/09-dropdown.js‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
/**
2+
* Dropdown Example
3+
*
4+
* Optional: data-trigger-type="hover" (default is "click")
5+
* Optional: data-placement="right-start" (default is "bottom-start")
6+
* Valid Placement Options:
7+
* top, top-start, top-end,
8+
* right, right-start, right-end,
9+
* bottom, bottom-start, bottom-end,
10+
* left, left-start, left-end
11+
*
12+
* <div class="dropdown" data-trigger-type="hover" data-placement="bottom-start">
13+
* <button id="dropdown-1" class="dropdown-trigger" aria-haspopup="true">
14+
* Show or Hide Content
15+
* </button>
16+
* <ul class="dropdown-content" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-1">
17+
* <li role="menuitem"><a href="#">Dropdown Item 1</a></li>
18+
* <li role="menuitem"><a href="#">Dropdown Item 2</a></li>
19+
* </ul>
20+
* </div>
21+
*/
22+
123
;(function () {
224
'use strict'
325

@@ -11,12 +33,17 @@
1133
})
1234
}
1335

14-
const dropdownFn = (trigger, dropdown, triggerType = 'click') => {
36+
const dropdownFn = (trigger, dropdown, triggerType = 'click', placement) => {
1537
const update = () => {
1638
computePosition(trigger, dropdown, {
1739
strategy: 'fixed',
1840
middleware: [
19-
autoPlacement({ alignment: 'start', allowedPlacements: ['bottom', 'bottom-start', 'bottom-end'] }),
41+
autoPlacement(
42+
{
43+
alignment: 'start',
44+
allowedPlacements: placement ? [placement] : ['bottom', 'bottom-start', 'bottom-end'],
45+
}
46+
),
2047
shift(),
2148
],
2249
}).then(({ x, y }) => {
@@ -68,6 +95,8 @@
6895
}
6996
}
7097

98+
trigger.ariaExpanded = false
99+
71100
if (triggerType === 'hover' && !isTouchDevice) {
72101
trigger.addEventListener('mouseenter', show)
73102
trigger.addEventListener('mouseenter', clearHideTimeout)
@@ -84,8 +113,9 @@
84113
// Init all dropdowns
85114
document.querySelectorAll('.dropdown').forEach((dropdown) => {
86115
const triggerType = dropdown.dataset.triggerType
116+
const placement = dropdown.dataset.placement
87117
const trigger = dropdown.querySelector('.dropdown-trigger')
88118
const content = dropdown.querySelector('.dropdown-content')
89-
dropdownFn(trigger, content, triggerType)
119+
dropdownFn(trigger, content, triggerType, placement)
90120
})
91121
})()

0 commit comments

Comments
 (0)