Skip to content

Commit

Permalink
top nav style changes as per new designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@rrrragas
rrrragas committed Feb 13, 2024
1 parent 1a092a2 commit b266954
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 62 deletions.
59 changes: 36 additions & 23 deletions blocks/header/header.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
.header.block nav {
display: grid;
grid-template:
"logo . hamburger" 75px
"logo . hamburger" 65px
"sections sections sections" min-content
"contact-us contact-us contact-us" min-content
/ min-content 1fr min-content;
padding: 20px;
padding: 0 20px;
align-items: center;
background-color: var(--white);
}

.header.block nav a {
text-decoration: none;
color: var(--quartz);
font-weight: bold;
font-weight: normal;
}

.header.block.nav-logo {
Expand All @@ -23,7 +23,7 @@
.header.block .nav-logo img {
padding: 15px 0;
height: auto;
width: 105px;
width: 99px;
}

.header.block .nav-hamburger {
Expand Down Expand Up @@ -63,12 +63,12 @@
.header.block .nav-contact-us > p > a {
display: inline-block;
padding: 8px 42px;
font-weight: normal;
text-decoration: none;
color: var(--white);
background-color: var(--dark-red);
border-bottom-left-radius: 20px;
white-space: nowrap;
line-height: 19px;
}

.header.block nav .nav-sections {
Expand All @@ -86,7 +86,7 @@
margin: 0;
flex-direction: column;
justify-content: center;
gap: 48px;
gap: 16px;
}

.header.block .nav-sections > ul > li > ul {
Expand All @@ -97,49 +97,51 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
padding: 12px 0;
border-bottom: 1px solid var(--gray);
font-size: 22px;
}

.header.block .nav-sections > ul > li.nav-drop > a.active-arrow-down::after {
.header.block .nav-sections > ul > li.top-nav > a.active-arrow-down::after {
background-image: url('images/down-arrow.png');
}

.header.block .nav-sections > ul > li.nav-drop > a > .icon {
.header.block .nav-sections > ul > li.top-nav > a > .icon {
display: inline-block;
position: relative;
height: 24px;
width: 24px;
}

.header.block .nav-sections > ul > li.nav-drop .icon svg {
.header.block .nav-sections > ul > li.top-nav .icon svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.header.block .nav-sections > ul > li.nav-drop > a > span {
.header.block .nav-sections > ul > li.top-nav > a > span {
transition: transform 0.3s ease-in-out;
transform: rotate(0);
}

.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > a > span {
.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > a > span {
transform: rotate(180deg);
}

.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul {
.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul {
display: block;
}

.header.block .nav-sections > ul > li > ul > li > a {
.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav > a {
display: flex;
justify-content: flex-start;
padding: 20px 20px 0;
padding: 10px 20px 0;
font-size: 18px;
}

.header.block .nav-sections > ul > li > ul > li.active > a {
.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav.active > a {
text-decoration: underline;
}

Expand All @@ -151,14 +153,15 @@
grid-area: contact-us;
display: flex;
justify-content: center;
margin: 20px;
}



@media (min-width: 900px) {
.header.block nav {
grid-template:
"logo sections contact-us" 75px
"logo sections contact-us" 65px
". . hamburger" min-content
/ min-content 1fr min-content;
padding: 0 90px;
Expand All @@ -178,33 +181,43 @@
width: 100%;
}

.header.block .nav-sections > ul > li > a {
.header.block .nav-sections > ul > li.top-nav > a {
padding: 0;
border-bottom: none;
font-size: 14px;
font-weight: bold;
}

.header.block .nav-sections > ul > li.nav-drop > a > .icon {
.header.block .nav-sections > ul > li.top-nav > a > .icon {
display: none;
}

.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul {
.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul {
position: absolute;
left: 0;
width: 100vw;
display: flex;
opacity: 1;
background-color: var(--gray-neutral-80);
top: 86px;
top: 65px;
justify-content: space-evenly;
}

.header.block .nav-sections > ul > li > ul > li.active > a {
.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav.active > a {
border-bottom: 5px solid var(--white);
}

.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul > li > a {
.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul > li.sub-nav > a {
padding: 10px 0;
color: var(--gray);
font-size: 14px;
font-weight: bold;
}

}

@media (min-width: 1200px) {
.header.block nav {
padding: 0 140px;
}
}
74 changes: 37 additions & 37 deletions blocks/header/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function setAttributes(element, attributes) {

function toggleAllNavSections(sections, expanded = false) {
sections
.querySelectorAll('.nav-sections > ul > li.nav-drop')
.querySelectorAll('.nav-sections > ul > li.top-nav')
.forEach((section) => {
setAttributes(section, {
'aria-expanded': expanded,
Expand Down Expand Up @@ -83,65 +83,65 @@ function buildSections(sections) {
const expander = document.createElement('span');
expander.classList.add('icon', 'icon-chevron-down');

sections.querySelectorAll(':scope > ul > li').forEach((section) => {
const active = section.querySelector('a');
sections.querySelectorAll(':scope > ul > li').forEach((topmenu) => {
topmenu.classList.add('top-nav');
const active = topmenu.querySelector('a');
if (active) {
const url = new URL(active.href);
if (window.location.pathname === url.pathname) {
section.classList.add('active');
topmenu.classList.add('active');
}
}

const submenu = section.querySelector('ul');
const submenu = topmenu.querySelector('ul');
if (submenu) {
const anchor = section.querySelector('a');
anchor.append(expander.cloneNode());
section.classList.add('nav-drop');
const topanchor = topmenu.querySelector('a');
topanchor.append(expander.cloneNode());

const submenuLinks = submenu.querySelectorAll('li > a');
const isCurrentPath = Array.from(submenuLinks).some((link) => {
const isMatch = window.location.pathname === new URL(link.href).pathname
&& link.hash === window.location.hash;
const isCurrentPath = Array.from(submenuLinks).some((subanchor) => {
const isMatch = window.location.pathname === new URL(subanchor.href).pathname
&& subanchor.hash === window.location.hash;
if (isMatch) {
link.parentElement.classList.add('active');
link.href = link.hash;
subanchor.parentElement.classList.add('active');
subanchor.href = subanchor.hash;
}
return isMatch;
});
section.setAttribute('aria-expanded', isCurrentPath ? 'true' : 'false');
topmenu.setAttribute('aria-expanded', isCurrentPath ? 'true' : 'false');

submenuLinks.forEach((link) => {
if (window.location.pathname === new URL(link.href).pathname) {
link.href = link.hash;
submenuLinks.forEach((subanchor) => {
subanchor.parentElement.classList.add('sub-nav');
if (window.location.pathname === new URL(subanchor.href).pathname) {
subanchor.href = subanchor.hash;
}
link.addEventListener('click', (e) => {
subanchor.addEventListener('click', (e) => {
// remove active class from all links
submenuLinks.forEach((l) => l.parentElement.classList.remove('active'));
if (link.hash && window.location.pathname === new URL(link.href).pathname) {
link.parentElement.classList.add('active');
if (subanchor.hash && window.location.pathname === new URL(subanchor.href).pathname) {
subanchor.parentElement.classList.add('active');
e.stopPropagation();
toggleMenu(document.getElementById('nav'), sections, false);
}
});
});

anchor.setAttribute('tabindex', '0');
anchor.setAttribute('role', 'button');
anchor.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const expanded = section.getAttribute('aria-expanded') === 'true';
toggleAllNavSections(sections);
topanchor.setAttribute('tabindex', '0');
topanchor.setAttribute('role', 'button');
topanchor.addEventListener('click', (e) => {
if (!isDesktop.matches) {
section.setAttribute('aria-expanded', !expanded);
} else {
section.setAttribute('aria-expanded', true);
}
const all = section.querySelector('.show-all');
if (all) {
all.classList.remove('hide');
}
if (e.pointerType !== 'mouse') {
section.setAttribute('data-touch-click', 'true');
e.preventDefault();
e.stopPropagation();
const expanded = topmenu.getAttribute('aria-expanded') === 'true';
toggleAllNavSections(sections);
topmenu.setAttribute('aria-expanded', !expanded);
const all = topmenu.querySelector('.show-all');
if (all) {
all.classList.remove('hide');
}
if (e.pointerType !== 'mouse') {
topmenu.setAttribute('data-touch-click', 'true');
}
}
});
}
Expand Down
4 changes: 2 additions & 2 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
--heading-font-size-xl: 42px;

/* Nav Height */
--nav-height: 100px;
--nav-height: 65px;

/* Line heights */
--line-height-xs: 1.15em;
Expand Down Expand Up @@ -610,7 +610,7 @@ main .disclaimer-modal-container {

@media screen and (min-width: 600px) {
:root {
--nav-height: 80px;
--nav-height: 65px;
}

main > .section > div {
Expand Down

0 comments on commit b266954

Please sign in to comment.