Skip to content

Commit

Permalink
Submenus for Mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@loginesta
loginesta committed Feb 13, 2025
1 parent a4afaf3 commit 6b1bf46
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 23 deletions.
106 changes: 84 additions & 22 deletions blocks/header/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,10 +149,10 @@ header nav .nav-brand a {
}

li.nav-drop img {
max-width: var(--megamenu-item-width);
width: 100%;
height: auto;
object-fit: contain;
max-width: var(--megamenu-item-width);
width: 100%;
height: auto;
object-fit: contain;
}

header nav .nav-brand img {
Expand Down Expand Up @@ -183,7 +183,7 @@ header nav .nav-sections ul {

header nav .nav-sections ul > li,
header nav .nav-sections ul > li > a {
font-weight: 500;
font-weight: 500;
}

header nav .nav-sections ul > li > ul {
Expand Down Expand Up @@ -213,7 +213,7 @@ header nav .nav-sections ul > li > ul > li {
}

header nav .nav-sections .nav-drop[aria-expanded='true'] {
background-color: var(--color-neutral-200);
background-color: var(--color-neutral-200);
}

header nav .nav-sections ul {
Expand All @@ -238,7 +238,7 @@ header nav .nav-sections ul > li > ul > li {
position: relative;
}

/* This is the style for the dropdown */
/* This is the style for the dropdown */
header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul {
display: flex;
position: absolute;
Expand All @@ -248,7 +248,7 @@ header nav .nav-sections ul > li > ul > li {
padding: 16px;
background-color: var(--color-neutral-50);
white-space: initial;
overflow-x:scroll;
overflow-x: scroll;
}

header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
Expand Down Expand Up @@ -467,10 +467,10 @@ header .nav-search-input .search_autocomplete .popover-container {

.dropdown-wrapper.nav-tools-wrapper .nav-auth-menu-panel .authenticated-user-menu li > a:hover,
.dropdown-wrapper.nav-tools-wrapper
.nav-auth-menu-panel
.authenticated-user-menu
li
> .logoutButton:hover {
.nav-auth-menu-panel
.authenticated-user-menu
li
> .logoutButton:hover {
background-color: lightgray;
}

Expand Down Expand Up @@ -502,20 +502,82 @@ header .nav-search-input .search_autocomplete .popover-container {
}

ul li.nav-drop > ul > li > ul {
margin: 1em 0 0 .5em;
margin: 1em 0 0 .5em;
}

main.overlay {
width: 100%;
height: 100%;
inset: 0;
background-color: rgb(0 0 0 / 50%);
z-index: 2;
width: 100%;
height: 100%;
inset: 0;
background-color: rgb(0 0 0 / 50%);
z-index: 2;
}

@media (width < 900px) {
header nav .nav-sections ul > li > ul,
header nav .nav-sections ul > li > ul > li {
width: 100%;
}
header nav .nav-sections {
position: relative;
}

header nav .nav-sections ul li {
line-height: 3em;
}

header nav .nav-sections ul > li > ul,
header nav .nav-sections ul > li > ul > li {
width: 100%;
}

header nav .nav-sections ul > li.nav-drop::after {
content: '\276F';
position: absolute;
right: 2rem;
}

header nav .nav-sections ul > li.nav-drop ul {
display: none;
}

header nav .nav-sections ul > li.nav-drop input {
display: none;
}

header nav .nav-sections .active-submenu {
background: white;
display: none;
height: 100%;
position: absolute;
top: 30px;
width: 100%;
}

header nav .nav-sections .active-submenu button::before {
content: '\276e';
margin-right: .5em;
}

header nav .nav-sections .active-submenu button {
background: none;
border: 0;
border-bottom: 1px solid var(--color-neutral-500);
left: -2em;
padding: 0 2em 1em;
position: relative;
text-align: left;
width: 120%;
}

header nav .nav-sections .active-submenu span.back {
position: absolute;
right: 3em;
}


header nav .nav-sections .active-submenu ul > li.nav-drop::after {
content: none;
}

header nav .nav-sections .active-submenu.visible,
header nav .nav-sections .active-submenu.visible ul > li.nav-drop ul {
display: block;
}
}
39 changes: 38 additions & 1 deletion blocks/header/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,12 +147,42 @@ export default async function decorate(block) {
brandLink.closest('.button-container').className = '';
}

const activeSubmenu = document.createElement('div');
activeSubmenu.classList.add('active-submenu');
activeSubmenu.innerHTML = `
<button>All Categories<span class="back">✕</span></button>
<h6>Title</h6><ul><li class="nav-drop"></li></ul>
`;

const navSections = nav.querySelector('.nav-sections');
if (navSections) {
navSections
.querySelectorAll(':scope .default-content-wrapper > ul > li')
.forEach((navSection) => {
if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
if (navSection.querySelector('ul')) {
navSection.classList.add('nav-drop');

const checkboxId = `nav-checkbox-${Math.random().toString(36).substr(2, 9)}`;
let label;
if (navSection.childNodes.length) {
[label] = navSection.childNodes;
navSection.childNodes[0].remove();
}
const submenuToggle = document.createRange().createContextualFragment(
`<label for="${checkboxId}" class="nav-toggle">${label.textContent}</label>
<input type="checkbox" id="${checkboxId}" />`,
);

const subMenu = navSection.querySelector('ul');
const clonedSubMenu = subMenu.cloneNode(true);

navSection.addEventListener('click', () => {
activeSubmenu.classList.add('visible');
activeSubmenu.querySelector('h6').textContent = label.textContent;
activeSubmenu.querySelector('li').append(clonedSubMenu);
});
navSection.prepend(submenuToggle);
}
navSection.addEventListener('click', () => {
if (isDesktop.matches) {
const expanded = navSection.getAttribute('aria-expanded') === 'true';
Expand All @@ -168,6 +198,13 @@ export default async function decorate(block) {
});
}

activeSubmenu.querySelector('button').addEventListener('click', () => {
activeSubmenu.classList.remove('visible');
activeSubmenu.querySelector('.nav-drop').removeChild(activeSubmenu.querySelector('.nav-drop ul'));
});

navSections.append(activeSubmenu);

const navTools = nav.querySelector('.nav-tools');

/** Mini Cart */
Expand Down

0 comments on commit 6b1bf46

Please sign in to comment.