Skip to content

Commit

Permalink
Local Nav sub items functionality (#418)
Browse files Browse the repository at this point in the history 
* implement subNav items functionality

* background color on hover

* lint errors

* no trailing spaces

* clear css lint errors

---------

Co-authored-by: Joe-Savella <[email protected]>
  • Loading branch information
@jsavella @webjsavella
jsavella and webjsavella authored Dec 16, 2024
1 parent 91c9f98 commit 6592ce1
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 34 deletions.
180 changes: 150 additions & 30 deletions eds/blocks/local-navigation/local-navigation.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,41 @@
z-index: 3000;
}

.local-navigation-wrapper {
display: flex;
block-size: 60px;
align-items: center;
}

.local-navigation.block {
block-size: 60px;
background-color: inherit;
color: inherit;
inline-size: 1440px;
}

.local-navigation nav {
.local-navigation nav#main {
display: flex;
margin-inline: var(--space-4);
}

.local-navigation .navigation-title {
white-space: nowrap;
font-size: var(--font-2);
margin-inline-start: var(--space-4);
align-items: flex-start;
}

.local-navigation .navigation-title a {
color: #fff;
display: flex;
block-size: 60px;
align-items: center;
white-space: nowrap;
font-size: var(--font-2);
}

.local-navigation .navigation-title a:hover {
box-shadow: inset 0 -3px 0 0 #2b2b2b;
}

.local-navigation ul {
.local-navigation ul.mobile-menu {
padding: 0;
inline-size: 100%;
position: absolute;
inset-inline-end: 0;
list-style-type: none;
margin-block-start: 42px;
inset-block-start: 60px;
}

.local-navigation ul.mobile-menu[aria-expanded='false'] {
display: none;
}

.local-navigation ul li a {
Expand All @@ -51,38 +49,114 @@
block-size: 60px;
align-items: center;
text-decoration: none;
background-color: #2b2b2b;
background-color: #202020;
padding-inline: var(--space-8);
}

.local-navigation ul li a:hover {
background-color: #202020;
box-shadow: inset 0 -3px 0 0 var(--calcite-link-blue-underline);
.local-navigation ul li a[aria-current='true']:hover, .local-navigation ul li.page-title a:hover {
background-color: #2b2b2b;
}

.local-navigation ul li a[aria-current='true'] {
box-shadow: inset 3px 0 0 0 var(--calcite-ui-brand-hover);
}

.local-navigation ul li button {
border: none;
color: #fff;
display: flex;
cursor: pointer;
block-size: 60px;
inline-size: 100%;
align-items: center;
margin-block-start: 0;
text-decoration: none;
background-color: #202020;
}

.local-navigation ul.mobile-menu[aria-expanded='false'] {
.local-navigation ul li button:hover {
background-color: #2b2b2b;
box-shadow: inset 0 0 0 0 var(--calcite-link-blue-underline);
}

.local-navigation ul.mobile-menu .subnav[aria-hidden='true'] {
display: none;
}

.local-navigation ul.mobile-menu button::after {
block-size: 13px;
position: absolute;
transition-duration: 0.25s;
inset-inline-end: var(--space-4);
content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 25' width='10' height='25'%3E%3Cpath fill='%23ffffff' d='M 0 0 14 0 7 7' /%3E%3C/svg%3E");
}

.local-navigation ul.mobile-menu button[aria-expanded='true']::after {
transition-duration: 0.25s;
transform: rotateX(180deg) translateY(1px);
}

.local-navigation calcite-icon {
z-index: 3001;
color: #fff;
block-size: 60px;
cursor: pointer;
margin-inline-start: auto;
position: absolute;
margin: auto 0 auto 90%;
}

.local-navigation calcite-button {
.local-navigation .subnav {
position: relative;
inset-inline-end: 0;
background-color: #202020;
}

.local-navigation .subnav .subnav-ul a {
color: #9f9f9f;
white-space: nowrap;
background-size: 200% 1px;
background-repeat: no-repeat;
background-position: 100% 100%;
transition: background-position .25s;
background-image: linear-gradient(90deg, #007ac2 50%, #555 0);
}

.local-navigation .subnav .subnav-ul a:hover {
background-position: 0 100%;
background-color: #202020;
}

.local-navigation .subnav .subnav-ul a::after {
opacity: 0;
display: flex;
block-size: 16px;
inline-size: 100%;
padding-inline: 30%;
align-items: center;
background-color: #2b2b2b;
padding-block: var(--space-4);
justify-content: end;
margin-inline-end: 20px;
inset-inline-end: .20px;
transition: all .25s ease-out;
content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath fill='%23007ac2' d='M8 14.3l5.3-5.3H0V8h13.3L8 2.7V1.3L15.2 8.5 8 15.7V14.3z' /%3E%3C/svg%3E");
}

.local-navigation .subnav .subnav-ul a:hover::after {
opacity: 1;
margin-inline-end: 10px;
}

.local-navigation .subnav .subnav-ul {
margin: 0;
list-style-type: none;
padding-inline-start: var(--space-10);
}

.local-navigation .subnav ul li a {
padding-inline: 0;
}

@media (width >= 616px) {
.local-navigation ul.mobile-menu {
inline-size: 330px;
}
}

@media (width >= 975px) {
Expand All @@ -94,18 +168,64 @@
align-items: center;
}

.local-navigation ul {
.local-navigation ul.mobile-menu {
margin: 0;
justify-content: end;
inline-size: 100%;
position: relative;
inset-block-start: 0;
justify-content: end;
}

.local-navigation ul li a {
background-color: #2b2b2b;
}

.local-navigation ul li a[aria-current='true'] {
background-color: #202020;
box-shadow: inset 0 -3px 0 0 var(--calcite-ui-brand-hover);
}

.local-navigation ul li.page-title {
position: relative;
}

.local-navigation ul li.page-title > a:hover {
background-color: #2f2f2f;
box-shadow: inset 0 -3px 0 0 var(--calcite-link-blue-underline);
}

.local-navigation ul.mobile-menu button::after {
position: relative;
inset-inline-start: var(--space-2);
}

.local-navigation ul.mobile-menu[aria-expanded='false'] {
display: flex;
flex-wrap: nowrap;
block-size: 60px;
align-items: flex-end;
}

.local-navigation ul li button {
background-color: #2b2b2b;
}

.local-navigation ul li button:hover {
background-color: #202020;
box-shadow: inset 0 -3px 0 0 var(--calcite-link-blue-underline);
}

.local-navigation .subnav {
position: absolute;
inline-size: 330px;
}

.local-navigation .subnav .subnav-ul {
padding-inline-start: var(--space-6);
}

.local-navigation .subnav .subnav-ul a {
background-color: #202020;
}

.local-navigation calcite-icon {
Expand Down
69 changes: 65 additions & 4 deletions eds/blocks/local-navigation/local-navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,70 @@ function navigationTitle(value, block) {
navTitle.appendChild(aHref);
}

function listenSubNav(subNavItems) {
subNavItems.addEventListener('click', () => {
if (subNavItems.getAttribute('aria-expanded') === 'false') {
const order = subNavItems.getAttribute('attr-order');
const allSubNavBtn = document.querySelectorAll('.subnav-btn');
subNavItems.setAttribute('aria-expanded', 'true');
subNavItems.nextElementSibling.setAttribute('aria-hidden', 'false');
allSubNavBtn.forEach((btn) => {
if (btn.getAttribute('attr-order') !== order) {
btn.setAttribute('aria-expanded', 'false');
btn.nextElementSibling.setAttribute('aria-hidden', 'true');
}
});
} else {
subNavItems.setAttribute('aria-expanded', 'false');
subNavItems.nextElementSibling.setAttribute('aria-hidden', 'true');
}
});
}

/**
* Create a new list item for page title and append to the nav tag ul
* @param {Object, Element} pgObj The page title and page url.
*/
function appendPageTitle(pgObj, block) {
function appendPageTitle(pgObj, block, i) {
const updatedUrl = updateURL(pgObj.pageLink);
const navTagUL = block.querySelector('ul');
const li = domEl('li', { class: 'page-title', id: pgObj.pageTitle });
const aHref = domEl('a', { href: updatedUrl });
const currPageTitle = currPg(window.location.href);

aHref.innerHTML = `${pgObj.pageTitle}`;
aHref.setAttribute('aria-current', 'false');

if (currPageTitle === pgObj.pageTitle.toLowerCase()) {
aHref.setAttribute('aria-current', 'true');
}
li.appendChild(aHref);
navTagUL.appendChild(li);
if (pgObj.subnavItems) {
const subNavItems = domEl('button', {
class: 'subnav-btn',
'aria-expanded': 'false',
'aria-controls': 'subnav',
'attr-order': i,
});
const subNav = domEl('div', { class: 'subnav', id: 'subnav', 'aria-hidden': 'true' });
const subNavUL = domEl('ul', { class: 'subnav-ul' });
li.appendChild(subNavItems);
subNavItems.innerHTML = pgObj.pageTitle;
listenSubNav(subNavItems);

pgObj.subnavItems.forEach((item) => {
const subNavLI = domEl('li', { class: 'subnav-li' });
const subNavA = domEl('a', { href: updateURL(item.pageLink) });
subNavA.innerHTML = `${item.pageTitle}`;
subNavLI.appendChild(subNavA);
subNavUL.appendChild(subNavLI);
});
subNav.appendChild(subNavUL);
li.appendChild(subNav);
navTagUL.appendChild(li);
} else {
li.appendChild(aHref);
navTagUL.appendChild(li);
}
}

/**
Expand Down Expand Up @@ -86,7 +133,7 @@ function parseXML(xmlData, block) {
navigationTitle(value, block);
}
if (key === 'pageTitle') {
appendPageTitle(xmlData[i], block);
appendPageTitle(xmlData[i], block, i);
}
if (value.triallabel) {
decorateBlueButton(value, block);
Expand Down Expand Up @@ -185,6 +232,19 @@ function btnEventListener(block) {
});
}

/**
* reset dropdown menu on resize
* @param {Element} block The header block element
*/
function resetDropdown(block) {
const mobileBtn = block.querySelector('calcite-icon.btn-mobile');
const mobileMenu = block.querySelector('ul.mobile-menu');
window.addEventListener('resize', () => {
mobileBtn.setAttribute('icon', 'caret-down');
mobileMenu.setAttribute('aria-expanded', 'false');
}, 500);
}

/**
* Fetch local navigation api data. If on localhost, use cors-anywhere proxy to bypass CORS policy
* @param {Element} block The header block element
Expand All @@ -201,6 +261,7 @@ export default async function decorate(block) {
parseXML(data, block);
docAuthPageTitle(block);
btnEventListener(block);
resetDropdown(block);
})
.catch((error) => error);
}

0 comments on commit 6592ce1

Please sign in to comment.