From d7a5ee5bfc7c785c2d5bd9e6c9f2dec766d7b24c Mon Sep 17 00:00:00 2001 From: "ADOBENET\\aaravind" Date: Mon, 28 Apr 2025 20:06:13 +0530 Subject: [PATCH 1/7] style updates for header redesign --- group/blocks/header/header.css | 66 ++++++++++++++++++++++++++++++++-- group/blocks/header/header.js | 11 ++++++ group/icons/profile.svg | 5 +++ group/styles/styles.css | 3 +- 4 files changed, 81 insertions(+), 4 deletions(-) create mode 100644 group/icons/profile.svg diff --git a/group/blocks/header/header.css b/group/blocks/header/header.css index 8fbabaa1..cf18eb27 100644 --- a/group/blocks/header/header.css +++ b/group/blocks/header/header.css @@ -4,6 +4,66 @@ position: fixed; width: 100%; z-index: 100; + height: var(--header-height); +} + +.header .utility-nav-wrapper { + height: 50px; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container { + display: flex; + justify-content: space-between; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select { + height: 50px; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div { + margin-top: -1rem; + margin-left: 1rem; + width: 120px; + font-size: 1rem; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div p { + border: none; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div .chevron{ + right: 5%; + width: 8px; + height: 8px; + top: 40%; + border-left: 1px solid var(--text-color); + border-bottom: 1px solid var(--text-color); +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper { + height: 50px; + align-self: center; + margin-right: 1rem; +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p { + margin-top: var(--spacing-xs); +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p a { + color: var(--text-color); + text-decoration: none; + font-weight: var(--font-weight-bold); +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon { + padding-right: 0.5rem;; +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon img { + width: 1.5rem; + height: 1.5rem; + vertical-align: middle; } header .nav-wrapper { @@ -285,9 +345,9 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { header nav .nav-sections ul { display: flex; - gap: 0; - margin: 0; - justify-content: center; + gap: var(--spacing-l); + margin: 0 var(--spacing-xxl) 0 0; + justify-content: flex-end; } header nav .nav-sections .default-content-wrapper { diff --git a/group/blocks/header/header.js b/group/blocks/header/header.js index a86460c9..f4b6aec7 100644 --- a/group/blocks/header/header.js +++ b/group/blocks/header/header.js @@ -118,6 +118,15 @@ export default async function decorate(block) { // decorate nav DOM block.textContent = ''; + + const utilityNav = fragment.firstElementChild; + const utilityNavWrapper = document.createElement('div'); + if (utilityNav) { + utilityNavWrapper.className = 'utility-nav-wrapper'; + utilityNav.querySelector('.default-content-wrapper').classList.add('utility-nav'); + utilityNavWrapper.append(utilityNav); + } + const nav = document.createElement('nav'); nav.id = 'nav'; while (fragment.firstElementChild) nav.append(fragment.firstElementChild); @@ -169,6 +178,8 @@ export default async function decorate(block) { const navWrapper = document.createElement('div'); navWrapper.className = 'nav-wrapper'; + navWrapper.append(utilityNavWrapper); + console.log('navWrapper', navWrapper); navWrapper.append(nav); block.append(navWrapper); } diff --git a/group/icons/profile.svg b/group/icons/profile.svg new file mode 100644 index 00000000..fa2a49f9 --- /dev/null +++ b/group/icons/profile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/group/styles/styles.css b/group/styles/styles.css index 92fbaaa1..842bf2d5 100644 --- a/group/styles/styles.css +++ b/group/styles/styles.css @@ -51,6 +51,7 @@ /* nav height */ --nav-height: 64px; + --header-height: 114px; /* border radius */ --border-radius: 8px; @@ -110,7 +111,7 @@ body.appear { } header { - height: var(--nav-height); + height: var(--header-height); } header .header, From 946498439554eef77be7e3358d857f9c56bf2418 Mon Sep 17 00:00:00 2001 From: "ADOBENET\\aaravind" Date: Tue, 29 Apr 2025 17:35:42 +0530 Subject: [PATCH 2/7] nav style updates --- group/blocks/header/header.css | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/group/blocks/header/header.css b/group/blocks/header/header.css index cf18eb27..0475f15e 100644 --- a/group/blocks/header/header.css +++ b/group/blocks/header/header.css @@ -69,12 +69,13 @@ header .nav-wrapper { background-color: var(--background-color); width: 100%; - box-shadow: 0 0 7px rgb(0 0 0 / 40%); position: relative; z-index: 100; } header nav { + background-color: var(--shade-color); + border-radius: 45px; box-sizing: border-box; display: grid; grid-template: @@ -326,7 +327,7 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { content: ''; display: inline-block; position: absolute; - top: 1.5rem; + top: 35%; right: var(--spacing-s); transform: rotate(135deg); width: 6px; @@ -338,7 +339,7 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { } header nav .nav-sections .nav-drop[aria-expanded='true']::after { - top: unset; + top: 45%; bottom: 0.4em; transform: rotate(315deg); } @@ -364,7 +365,7 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { flex: 0 1 auto; position: relative; font-weight: var(--font-weight-regular); - height: 100%; + height: 80%; align-content: center; padding: 0 var(--spacing-xl); } @@ -376,22 +377,23 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] { padding: 0 var(--spacing-xl); - background-color: var(--link-color); - color: white; min-width: unset; width: inherit; - border-bottom: none; + border-bottom: 5px solid #b3f8ff;; + margin-bottom: -5px; } header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul { display: block; position: absolute; - left: 0; - width: 22rem; - top: 100%; - background-color: var(--link-color); + right: 0; + width: 15rem; + top: 68px; white-space: initial; - color: white; + box-shadow: 0 0 5px rgb(0 0 0 / 40%); + border-radius: 40px; + background-color: var(--background-color); + margin: 0; } header nav .nav-sections .default-content-wrapper > ul > li > ul > li { From 2511c93fd4a431bd6d921cd4decb2067c4a3c4a8 Mon Sep 17 00:00:00 2001 From: "ADOBENET\\aaravind" Date: Wed, 30 Apr 2025 12:21:48 +0530 Subject: [PATCH 3/7] header nav style updates --- group/blocks/header/header.css | 83 +++++++++++++++++++++++++++------- group/blocks/header/header.js | 17 ++----- 2 files changed, 72 insertions(+), 28 deletions(-) diff --git a/group/blocks/header/header.css b/group/blocks/header/header.css index 0475f15e..46eddcf8 100644 --- a/group/blocks/header/header.css +++ b/group/blocks/header/header.css @@ -74,30 +74,25 @@ header .nav-wrapper { } header nav { - background-color: var(--shade-color); - border-radius: 45px; box-sizing: border-box; - display: grid; - grid-template: - 'brand hamburger' var(--nav-height) / 70% 30% 0; align-items: center; max-width: 1248px; height: var(--nav-height); - padding: 0 24px 0 0; + padding: 0; font-family: var(--body-font-family); justify-content: space-between; } header nav[aria-expanded='true'] { - grid-template: - 'brand hamburger' var(--nav-height) - 'sections sections' 1fr / 70% 30%; overflow-y: auto; min-height: 100dvh; } @media (width >= 900px) { header nav { + background-color: var(--shade-color); + border-radius: 45px; + background-color: var(--shade-color); display: flex; justify-content: space-between; max-width: unset; @@ -122,11 +117,19 @@ header nav a:any-link { /* hamburger */ header nav .nav-hamburger { - grid-area: hamburger; height: 22px; display: flex; align-items: center; justify-content: end; + position: absolute; + right: 24px; + top: 70px; +} + +header nav[aria-expanded='true'] .nav-hamburger { + position: absolute; + right: 24px; + top: 70px; } header nav .nav-hamburger button { @@ -204,14 +207,15 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { /* brand */ header .nav-brand { + border-radius: 45px; grid-area: brand; font-size: var(--heading-font-size-s); font-weight: 700; line-height: 1; - padding: 1rem; + padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-s); + background-color: var(--shade-color); } - header nav .nav-brand picture img { width: 164px; height: auto; @@ -234,6 +238,7 @@ header .nav-brand div:first-of-type { display: flex; align-items: center; gap: 20px; + padding-left: 2rem; } /* sections */ @@ -248,10 +253,13 @@ header nav[aria-expanded='true'] .nav-sections { display: block; visibility: visible; align-self: start; - width: 100vw; - background-color: var(--link-color); - color:var(--background-color); - padding: var(--spacing-xl); + position: absolute; + top: 90px; + width: -webkit-fill-available; + background-color: var(--shade-color); + margin: 30px 8px 0 6px; + padding: 1rem; + border-radius: 45px; } header nav .nav-sections ul { @@ -287,6 +295,49 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { padding: var(--spacing-s) 0 0; } +header nav[aria-expanded='true'] .nav-sections .nav-drop { + position: relative; + cursor: pointer; + z-index: 10; +} + +header nav[aria-expanded='true'] .nav-sections .nav-drop::after { + content: ''; + display: inline-block; + position: absolute; + top: 5%; + right: var(--spacing-s); + transform: rotate(135deg); + width: 6px; + height: 6px; + color: var(--link-color); + border: 2px solid currentcolor; + border-radius: 0 1px 0 0; + border-width: 2px 2px 0 0; +} + +header nav .nav-sections .nav-drop[aria-expanded='true']::after { + top: 5%; + bottom: 0.4em; + transform: rotate(315deg); +} + +header nav .nav-sections .default-content-wrapper > ul > li > ul { + display: none; + position: relative; +} + +header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] { + padding: 0; + min-width: unset; + width: inherit; +} + +header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul { + display: block; + white-space: initial; +} + @media (width >= 900px) { header .nav-brand { padding: 0 0 0 2.5rem; diff --git a/group/blocks/header/header.js b/group/blocks/header/header.js index f4b6aec7..6208ac85 100644 --- a/group/blocks/header/header.js +++ b/group/blocks/header/header.js @@ -74,25 +74,18 @@ function toggleMenu(nav, navSections, forceExpanded = null) { const button = nav.querySelector('.nav-hamburger button'); document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden'; nav.setAttribute('aria-expanded', expanded ? 'false' : 'true'); - toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true'); if (button) { button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); } // enable nav dropdown keyboard accessibility const navDrops = navSections.querySelectorAll('.nav-drop'); - if (isDesktop.matches) { + // if (isDesktop.matches) { navDrops.forEach((drop) => { if (!drop.hasAttribute('tabindex')) { drop.setAttribute('tabindex', 0); drop.addEventListener('focus', focusNavSection); } }); - } else { - navDrops.forEach((drop) => { - drop.removeAttribute('tabindex'); - drop.removeEventListener('focus', focusNavSection); - }); - } // enable menu collapse on escape keypress if (!expanded || isDesktop.matches) { @@ -156,6 +149,9 @@ export default async function decorate(block) { const expanded = navSection.getAttribute('aria-expanded') === 'true'; toggleAllNavSections(navSections); navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); + } else { + const expanded = navSection.getAttribute('aria-expanded') === 'true'; + navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); } }); }); @@ -172,14 +168,11 @@ export default async function decorate(block) { hamburger.addEventListener('click', () => toggleMenu(nav, navSections)); nav.append(hamburger); nav.setAttribute('aria-expanded', 'false'); - // prevent mobile nav behavior on window resize - toggleMenu(nav, navSections, isDesktop.matches); - isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches)); const navWrapper = document.createElement('div'); navWrapper.className = 'nav-wrapper'; navWrapper.append(utilityNavWrapper); - console.log('navWrapper', navWrapper); navWrapper.append(nav); + block.append(navWrapper); } From 607a7d11048f6ed5d5f61cb28ec01bdc6b21956f Mon Sep 17 00:00:00 2001 From: "ADOBENET\\aaravind" Date: Wed, 30 Apr 2025 17:08:55 +0530 Subject: [PATCH 4/7] header redesign updates --- group/blocks/header/header.css | 202 +++++++++++++++------------------ group/blocks/header/header.js | 26 +++-- 2 files changed, 110 insertions(+), 118 deletions(-) diff --git a/group/blocks/header/header.css b/group/blocks/header/header.css index 46eddcf8..73aeb7f1 100644 --- a/group/blocks/header/header.css +++ b/group/blocks/header/header.css @@ -11,6 +11,59 @@ height: 50px; } +.header .nav-wrapper { + background-color: var(--background-color); + width: 100%; + position: relative; + z-index: 100; +} + +header nav { + box-sizing: border-box; + align-items: center; + max-width: 1248px; + height: var(--nav-height); + padding: 0; + font-family: var(--body-font-family); +} + +header nav[aria-expanded='true'] { + overflow-y: auto; + min-height: 100dvh; +} + +header nav p { + margin: 0; + line-height: 1; +} + +header nav a:any-link { + color: currentcolor; + text-decoration: none; +} + +@media (width >= 900px) { + header nav { + background-color: var(--shade-color); + border-radius: 45px; + display: flex; + justify-content: space-between; + max-width: unset; + } + + header nav[aria-expanded='true'] { + min-height: 0; + overflow: visible; + } +} +/* Utility Nav */ +/* .header .nav-wrapper .utility-nav-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + height: 50px; +} */ + .header .nav-wrapper .utility-nav-wrapper .select-container { display: flex; justify-content: space-between; @@ -31,7 +84,7 @@ border: none; } -.header .nav-wrapper .utility-nav-wrapper .select-container .select > div .chevron{ +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div .chevron { right: 5%; width: 8px; height: 8px; @@ -57,7 +110,7 @@ } .header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon { - padding-right: 0.5rem;; + padding-right: 0.5rem; } .header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon img { @@ -66,56 +119,7 @@ vertical-align: middle; } -header .nav-wrapper { - background-color: var(--background-color); - width: 100%; - position: relative; - z-index: 100; -} - -header nav { - box-sizing: border-box; - align-items: center; - max-width: 1248px; - height: var(--nav-height); - padding: 0; - font-family: var(--body-font-family); - justify-content: space-between; -} - -header nav[aria-expanded='true'] { - overflow-y: auto; - min-height: 100dvh; -} - -@media (width >= 900px) { - header nav { - background-color: var(--shade-color); - border-radius: 45px; - background-color: var(--shade-color); - display: flex; - justify-content: space-between; - max-width: unset; - padding: 0; - } - - header nav[aria-expanded='true'] { - min-height: 0; - overflow: visible; - } -} - -header nav p { - margin: 0; - line-height: 1; -} - -header nav a:any-link { - color: currentcolor; - text-decoration: none; -} - -/* hamburger */ +/* Hamburger Menu */ header nav .nav-hamburger { height: 22px; display: flex; @@ -126,12 +130,6 @@ header nav .nav-hamburger { top: 70px; } -header nav[aria-expanded='true'] .nav-hamburger { - position: absolute; - right: 24px; - top: 70px; -} - header nav .nav-hamburger button { height: 22px; margin: 0; @@ -140,9 +138,6 @@ header nav .nav-hamburger button { padding: 0; background-color: var(--background-color); color: inherit; - overflow: initial; - text-overflow: initial; - white-space: initial; } header nav .nav-hamburger-icon, @@ -189,7 +184,6 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { transform-origin: 2px 1px; width: 24px; height: 2px; - border-radius: 2px; } header nav[aria-expanded='true'] .nav-hamburger-icon::after { @@ -201,14 +195,12 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { @media (width >= 900px) { header nav .nav-hamburger { display: none; - visibility: hidden; } } /* brand */ header .nav-brand { border-radius: 45px; - grid-area: brand; font-size: var(--heading-font-size-s); font-weight: 700; line-height: 1; @@ -221,10 +213,7 @@ header nav .nav-brand picture img { height: auto; } -header nav .nav-brand .icon { - width: 100%; -} - +/* TODO - check this - icon width */ header nav .nav-brand .icon img { width: 128px; height: auto; @@ -241,18 +230,28 @@ header .nav-brand div:first-of-type { padding-left: 2rem; } -/* sections */ +@media (width >= 900px) { + header .nav-brand { + padding: 0 0 0 2.5rem; + margin: 0 auto; + } + + header nav .nav-brand picture img { + width: 219px; + } +} + +/* Nav Sections */ header nav .nav-sections { - grid-area: sections; - flex: 1 1 auto; display: none; visibility: hidden; + grid-area: sections; /* TODO - check this - grid-area: sections; */ + flex: 1 1 auto; } header nav[aria-expanded='true'] .nav-sections { display: block; visibility: visible; - align-self: start; position: absolute; top: 90px; width: -webkit-fill-available; @@ -295,13 +294,21 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { padding: var(--spacing-s) 0 0; } -header nav[aria-expanded='true'] .nav-sections .nav-drop { +header nav .nav-sections ul > li > ul > li:hover { + background-color: #FFFFFF0D; +} + +header nav .nav-sections ul > li > ul > li > a:hover { + text-decoration: none; +} + +header nav .nav-sections .nav-drop { position: relative; cursor: pointer; - z-index: 10; + padding-right: var(--spacing-m); } -header nav[aria-expanded='true'] .nav-sections .nav-drop::after { +header nav .nav-sections .nav-drop::after { content: ''; display: inline-block; position: absolute; @@ -338,16 +345,14 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' white-space: initial; } -@media (width >= 900px) { - header .nav-brand { - padding: 0 0 0 2.5rem; - margin: 0 auto; - } - - header nav .nav-brand picture img { - width: 219px; +@media (width >= 600px) { + header nav[aria-expanded='true'] .nav-sections { + width: 30%; + right: 0; } +} +@media (width >= 900px) { header nav .nav-sections { display: block; visibility: visible; @@ -355,11 +360,14 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' height: 100%; } + header .nav-brand div:first-of-type { + padding-left: 0; + } + header nav[aria-expanded='true'] .nav-sections { align-self: unset; width: unset; background-color: unset; - color:unset; padding: 0; } @@ -368,25 +376,8 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' padding: 0 var(--spacing-m); } - header nav .nav-sections .nav-drop { - position: relative; - padding-right: var(--spacing-m); - cursor: pointer; - } - - header nav .nav-sections .nav-drop::after { - content: ''; - display: inline-block; - position: absolute; + header nav .nav-sections .nav-drop::after { top: 35%; - right: var(--spacing-s); - transform: rotate(135deg); - width: 6px; - height: 6px; - color: var(--link-color); - border: 2px solid currentcolor; - border-radius: 0 1px 0 0; - border-width: 2px 2px 0 0; } header nav .nav-sections .nav-drop[aria-expanded='true']::after { @@ -451,11 +442,4 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' padding: var(--spacing-m) var(--spacing-xl); } - header nav .nav-sections .default-content-wrapper > ul > li > ul > li:hover { - background-color: #FFFFFF0D; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > li > a:hover { - text-decoration: none; - } } diff --git a/group/blocks/header/header.js b/group/blocks/header/header.js index 6208ac85..942861fb 100644 --- a/group/blocks/header/header.js +++ b/group/blocks/header/header.js @@ -63,6 +63,14 @@ function toggleAllNavSections(sections, expanded = false) { }); } +function enableKeyboardAccessibility(nav) { + const navDrops = nav.querySelectorAll('.nav-drop'); + navDrops.forEach((drop) => { + drop.setAttribute('tabindex', 0); + drop.addEventListener('focus', focusNavSection); + }); +} + /** * Toggles the entire nav * @param {Element} nav The container element @@ -77,15 +85,8 @@ function toggleMenu(nav, navSections, forceExpanded = null) { if (button) { button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); } - // enable nav dropdown keyboard accessibility - const navDrops = navSections.querySelectorAll('.nav-drop'); - // if (isDesktop.matches) { - navDrops.forEach((drop) => { - if (!drop.hasAttribute('tabindex')) { - drop.setAttribute('tabindex', 0); - drop.addEventListener('focus', focusNavSection); - } - }); + + enableKeyboardAccessibility(document); // enable menu collapse on escape keypress if (!expanded || isDesktop.matches) { @@ -169,6 +170,13 @@ export default async function decorate(block) { nav.append(hamburger); nav.setAttribute('aria-expanded', 'false'); + enableKeyboardAccessibility(nav); + if (isDesktop.matches) { + // collapse menu on escape press + window.addEventListener('keydown', closeOnEscape); + // collapse menu on focus lost + nav.addEventListener('focusout', closeOnFocusLost); + } const navWrapper = document.createElement('div'); navWrapper.className = 'nav-wrapper'; navWrapper.append(utilityNavWrapper); From b100d44bcb717bf11af393ca1e3d532c511451ff Mon Sep 17 00:00:00 2001 From: "ADOBENET\\aaravind" Date: Wed, 30 Apr 2025 17:22:38 +0530 Subject: [PATCH 5/7] lint issue fixes --- group/blocks/header/header.css | 120 +++++++++++++++------------------ group/blocks/header/header.js | 12 ++-- 2 files changed, 61 insertions(+), 71 deletions(-) diff --git a/group/blocks/header/header.css b/group/blocks/header/header.css index 73aeb7f1..622362d9 100644 --- a/group/blocks/header/header.css +++ b/group/blocks/header/header.css @@ -56,68 +56,6 @@ header nav a:any-link { overflow: visible; } } -/* Utility Nav */ -/* .header .nav-wrapper .utility-nav-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - height: 50px; -} */ - -.header .nav-wrapper .utility-nav-wrapper .select-container { - display: flex; - justify-content: space-between; -} - -.header .nav-wrapper .utility-nav-wrapper .select-container .select { - height: 50px; -} - -.header .nav-wrapper .utility-nav-wrapper .select-container .select > div { - margin-top: -1rem; - margin-left: 1rem; - width: 120px; - font-size: 1rem; -} - -.header .nav-wrapper .utility-nav-wrapper .select-container .select > div p { - border: none; -} - -.header .nav-wrapper .utility-nav-wrapper .select-container .select > div .chevron { - right: 5%; - width: 8px; - height: 8px; - top: 40%; - border-left: 1px solid var(--text-color); - border-bottom: 1px solid var(--text-color); -} - -.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper { - height: 50px; - align-self: center; - margin-right: 1rem; -} - -.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p { - margin-top: var(--spacing-xs); -} - -.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p a { - color: var(--text-color); - text-decoration: none; - font-weight: var(--font-weight-bold); -} - -.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon { - padding-right: 0.5rem; -} - -.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon img { - width: 1.5rem; - height: 1.5rem; - vertical-align: middle; -} /* Hamburger Menu */ header nav .nav-hamburger { @@ -198,7 +136,6 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { } } -/* brand */ header .nav-brand { border-radius: 45px; font-size: var(--heading-font-size-s); @@ -213,7 +150,6 @@ header nav .nav-brand picture img { height: auto; } -/* TODO - check this - icon width */ header nav .nav-brand .icon img { width: 128px; height: auto; @@ -245,7 +181,6 @@ header .nav-brand div:first-of-type { header nav .nav-sections { display: none; visibility: hidden; - grid-area: sections; /* TODO - check this - grid-area: sections; */ flex: 1 1 auto; } @@ -345,6 +280,61 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' white-space: initial; } +.header .nav-wrapper .utility-nav-wrapper .select-container { + display: flex; + justify-content: space-between; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select { + height: 50px; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div { + margin-top: -1rem; + margin-left: 1rem; + width: 120px; + font-size: 1rem; +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p { + margin-top: var(--spacing-xs); +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div p { + border: none; +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div .chevron { + right: 5%; + width: 8px; + height: 8px; + top: 40%; + border-left: 1px solid var(--text-color); + border-bottom: 1px solid var(--text-color); +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper { + height: 50px; + align-self: center; + margin-right: 1rem; +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p a { + color: var(--text-color); + text-decoration: none; + font-weight: var(--font-weight-bold); +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon { + padding-right: 0.5rem; +} + +.header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon img { + width: 1.5rem; + height: 1.5rem; + vertical-align: middle; +} + @media (width >= 600px) { header nav[aria-expanded='true'] .nav-sections { width: 30%; diff --git a/group/blocks/header/header.js b/group/blocks/header/header.js index 942861fb..5798ae37 100644 --- a/group/blocks/header/header.js +++ b/group/blocks/header/header.js @@ -85,7 +85,7 @@ function toggleMenu(nav, navSections, forceExpanded = null) { if (button) { button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); } - + enableKeyboardAccessibility(document); // enable menu collapse on escape keypress @@ -172,15 +172,15 @@ export default async function decorate(block) { enableKeyboardAccessibility(nav); if (isDesktop.matches) { - // collapse menu on escape press - window.addEventListener('keydown', closeOnEscape); - // collapse menu on focus lost - nav.addEventListener('focusout', closeOnFocusLost); + // collapse menu on escape press + window.addEventListener('keydown', closeOnEscape); + // collapse menu on focus lost + nav.addEventListener('focusout', closeOnFocusLost); } const navWrapper = document.createElement('div'); navWrapper.className = 'nav-wrapper'; navWrapper.append(utilityNavWrapper); navWrapper.append(nav); - + block.append(navWrapper); } From a6baf1758ad85d321cd887b60abda1939acff91a Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Wed, 30 Apr 2025 23:08:51 -0600 Subject: [PATCH 6/7] dialing in css --- group/blocks/header/header.css | 66 +++++++++++++++++++++++++++++++--- group/styles/styles.css | 3 +- 2 files changed, 64 insertions(+), 5 deletions(-) diff --git a/group/blocks/header/header.css b/group/blocks/header/header.css index 622362d9..564718fa 100644 --- a/group/blocks/header/header.css +++ b/group/blocks/header/header.css @@ -25,6 +25,8 @@ header nav { height: var(--nav-height); padding: 0; font-family: var(--body-font-family); + margin: 0 16px; + } header nav[aria-expanded='true'] { @@ -66,6 +68,7 @@ header nav .nav-hamburger { position: absolute; right: 24px; top: 70px; + padding-right: 20px; } header nav .nav-hamburger button { @@ -230,7 +233,7 @@ header nav[aria-expanded='true'] .nav-sections ul > li > ul > li { } header nav .nav-sections ul > li > ul > li:hover { - background-color: #FFFFFF0D; + background: var(--light-blue); } header nav .nav-sections ul > li > ul > li > a:hover { @@ -294,6 +297,7 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' margin-left: 1rem; width: 120px; font-size: 1rem; + padding-left: 16px; } .header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p { @@ -302,6 +306,13 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' .header .nav-wrapper .utility-nav-wrapper .select-container .select > div p { border: none; + font-size: var(--body-font-size-xs); +} + +.header .nav-wrapper .utility-nav-wrapper .select-container .select > div p:hover { + color: var(--text-color); + font-weight: var(--font-weight-bold); + background: none; } .header .nav-wrapper .utility-nav-wrapper .select-container .select > div .chevron { @@ -317,12 +328,14 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' height: 50px; align-self: center; margin-right: 1rem; + padding-right: 16px; } .header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p a { color: var(--text-color); text-decoration: none; font-weight: var(--font-weight-bold); + font-size: var(--body-font-size-xs); } .header .nav-wrapper .utility-nav-wrapper .default-content-wrapper p .icon { @@ -335,6 +348,40 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' vertical-align: middle; } +header .nav-wrapper .utility-nav-wrapper .select-container .select.open div > ul > li { + padding: var(--spacing-l) var(--spacing-xl); + border-bottom: none; +} + +header .nav-wrapper .utility-nav-wrapper .select-container .select.open div > ul > li:hover { + background: var(--light-blue); +} + +header .nav-wrapper .utility-nav-wrapper .select-container .select.open div > ul > li:last-child:hover { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + font-weight: var(--font-weight-bold); +} + +header .nav-wrapper .utility-nav-wrapper .select-container .select.open div > ul > li:first-child:hover{ + border-top-left-radius: 16px; + border-top-right-radius: 16px; + font-weight: var(--font-weight-bold); +} + +header .nav-wrapper .utility-nav-wrapper .select-container .select.open div > ul { + right: unset; + width: 150px; + top: unset; + margin: 6px 0 0; + border-radius: 16px; + display: block; + position: absolute; + white-space: initial; + box-shadow: 0 0 5px rgb(0 0 0 / 40%); + background-color: var(--background-color); +} + @media (width >= 600px) { header nav[aria-expanded='true'] .nav-sections { width: 30%; @@ -366,7 +413,7 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' padding: 0 var(--spacing-m); } - header nav .nav-sections .nav-drop::after { + header nav .nav-sections .nav-drop::after { top: 35%; } @@ -411,7 +458,7 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' padding: 0 var(--spacing-xl); min-width: unset; width: inherit; - border-bottom: 5px solid #b3f8ff;; + border-bottom: 5px solid var(--light-blue); margin-bottom: -5px; } @@ -425,11 +472,22 @@ header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true' box-shadow: 0 0 5px rgb(0 0 0 / 40%); border-radius: 40px; background-color: var(--background-color); - margin: 0; + margin: 16px 0 0; } header nav .nav-sections .default-content-wrapper > ul > li > ul > li { padding: var(--spacing-m) var(--spacing-xl); } + header nav .nav-sections .default-content-wrapper > ul > li > ul > li:last-child:hover { + border-bottom-left-radius: 40px; + border-bottom-right-radius: 40px; + font-weight: var(--font-weight-bold); + } + + header nav .nav-sections .default-content-wrapper > ul > li > ul > li:first-child:hover { + border-top-left-radius: 40px; + border-top-right-radius: 40px; + font-weight: var(--font-weight-bold); + } } diff --git a/group/styles/styles.css b/group/styles/styles.css index 842bf2d5..7e69a5f1 100644 --- a/group/styles/styles.css +++ b/group/styles/styles.css @@ -21,6 +21,7 @@ --link-color: #0071bc; --link-hover-color: #003456; --grey-color: #6a6a6a; + --light-blue: #b3f8ff; /* fonts */ --body-font-family: fieldwork-geo-light, fieldwork-geo-light-fallback, sans-serif; @@ -50,7 +51,7 @@ --font-weight-bold: 700; /* nav height */ - --nav-height: 64px; + --nav-height: 72px; --header-height: 114px; /* border radius */ From c2901f44c1f533e6d978de70b10b55c6d6573ee9 Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Tue, 13 May 2025 15:24:24 -0600 Subject: [PATCH 7/7] style change --- group/blocks/header/header.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/group/blocks/header/header.css b/group/blocks/header/header.css index 564718fa..d598002c 100644 --- a/group/blocks/header/header.css +++ b/group/blocks/header/header.css @@ -193,10 +193,11 @@ header nav[aria-expanded='true'] .nav-sections { position: absolute; top: 90px; width: -webkit-fill-available; - background-color: var(--shade-color); + background-color: var(--background-color); + box-shadow: 0 0 5px rgb(0 0 0 / 40%); + border-radius: 40px; margin: 30px 8px 0 6px; padding: 1rem; - border-radius: 45px; } header nav .nav-sections ul {