Untitled
unknown
plain_text
2 years ago
14 kB
6
Indexable
<?php
declare(strict_types=1);
use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Hyva\Theme\ViewModel\Navigation;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
/** @var Template $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */
/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);
/** @var Navigation $viewModelNavigation */
$viewModelNavigation = $viewModels->require(Navigation::class);
$uniqueId = '_' . uniqid();
// Order is important here: 1. build the menu data, 2. then set the cache tags from the view model identities
$menuItems = $viewModelNavigation->getNavigation(4);
$block->setData('cache_tags', $viewModelNavigation->getIdentities());
?>
<div x-data="initMenuMobile<?= $escaper->escapeHtml($uniqueId) ?>()"
class="z-20 order-1 navigation lg:hidden"
>
<!-- mobile -->
<div class="after:content-blank after:bg-onyx after:opacity-30 after:fixed after:flex after:inset-0" x-show="open"
x-transition:enter="ease-in-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
@click="open = false" aria-label="Close panel"></div>
<div @load.window="setActiveMenu($root)"
class="bg-container-lighter"
:class="{'h-screen overflow-x-hidden overflow-y-auto fixed top-0 left-0 w-61.5' : open}"
@toggle-mobile-menu.window="open = !open"
@keydown.window.escape="open=false"
>
<div class="flex items-baseline justify-between menu-icon">
<div class="flex justify-end w-full">
<a @click="$dispatch('toggle-mobile-menu')"
class="flex items-center justify-center cursor-pointer"
:class="{ 'ml-auto': open }">
<div class="before:text-pumpkin before:content-['\f0c9']
before:font-fontawesome w-11 h-11 text-center leading-11 md:mr-3.75 mt-3.5 md:mt-1.5 mb-2.25
md:mb-3.75 before:text-xl -ml-3.75 mr-3.75 md:ml-0"
:class="{ 'hidden' : open, 'block': !open }"></div>
</a>
</div>
</div>
<nav
class="hidden w-full duration-150 ease-in-out transform transition-display"
:class="{ 'hidden' : !open }">
<div class="flex items-center px-3.75 h-17">
<span class="before:content-['\f007'] before:font-fontawesome before:text-pumpkin before:text-lg">
</span>
<a href="<?= $escaper->escapeHtmlAttr($escaper->escapeUrl($block->getUrl('customer/account/login'))) ?>"
id="customer-menu-title"
class="text-charcoal hover:text-silver text-sm pl-2.5"
:aria-expanded="open ? 'true' : 'false'"
aria-label="<?= $escaper->escapeHtmlAttr(__('Login')) ?>">
<?= $escaper->escapeHtmlAttr(__('Login')) ?>
</a>
</div>
<div class="bg-pumpkin px-3.75 py-1.75 text-lg font-avenirMedium text-white capitalize">
<?= $escaper->escapeHtml(__('Shop')) ?>
</div>
<a href="<?= $escaper->escapeUrl($block->getUrl('/')) ?>"
class="text-charcoal px-3.75 py-3.5 text-f15 capitalize block font-avenirMedium">
<?= $escaper->escapeHtml(__('Home')) ?>
</a>
<?php foreach ($menuItems as $index => $menuItem): ?>
<?php $numericPart = (int)(substr($index, strlen("category-node-"))); ?>
<?php $category = $numericPart - 1; ?>
<div class="level-0 border-t border-solid border-grey1">
<span class="flex items-center transition-transform duration-150 ease-in-out transform"
:class="{
'-translate-x-full' : mobilePanelActiveId,
'translate-x-0' : !mobilePanelActiveId
}">
<a class="w-full text-charcoal hover:text-charcoal focus:text-charcoal active:text-charcoal px-3.75
py-3.5 text-f15 capitalize font-avenirMedium level-0"
href="<?= $escaper->escapeUrl($menuItem['url']) ?>"
title="<?= $escaper->escapeHtmlAttr($menuItem['name']) ?>">
<?= $escaper->escapeHtml($menuItem['name']) ?>
</a>
<?php if (!empty($menuItem['childData'])): ?>
<a class="absolute right-0 flex before:content-['\f105'] before:font-fontawesome
before:text-charcoal before:text-f25 before:mr-3.75"
@click="mobilePanelActiveId = mobilePanelActiveId === '<?= /* @noEscape */ "category-node-" . $category ?>' ?
0 : '<?= /* @noEscape */ "category-node-" . $category ?>'">
</a>
<?php endif; ?>
</span>
<?php if (!empty($menuItem['childData'])): ?>
<div
class="absolute top-27.5 right-0 z-10 w-full h-full transition-transform duration-200
ease-in-out translate-x-full transform bg-container-lighter"
:class="{
'translate-x-full' : mobilePanelActiveId !== '<?= /* @noEscape */ "category-node-" . $category ?>',
'translate-x-0' : mobilePanelActiveId === '<?= /* @noEscape */ "category-node-" . $category ?>',}">
<a class="flex bg-charcoal px-3.75 py-3.25 text-f13 font-avenirMedium text-white capitalize
before:content-['\f104'] before:font-fontawesome before:text-grey1 before:text-f15
before:mr-3.25" @click="mobilePanelActiveId = 0">
<?= $escaper->escapeHtml(__('Back')) ?>
</a>
<?php foreach ($menuItem['childData'] as $index1 => $subMenuItem): ?>
<?php $numericPart = (int)(substr($index1, strlen("category-node-"))); ?>
<?php $category1 = $numericPart - 1; ?>
<span class="flex items-center transition-transform duration-150 ease-in-out transform
border-t border-solid border-grey1 level-1"
:class="{'-translate-x-0' : mobilePanelActiveId,'translate-x-full' : !mobilePanelActiveId}">
<a href="<?= $escaper->escapeUrl($subMenuItem['url']) ?>"
title="<?= $escaper->escapeHtmlAttr($subMenuItem['name']) ?>"
class="w-full text-charcoal hover:text-charcoal focus:text-charcoal active:text-charcoal
px-3.75 py-3.5 text-f15 capitalize font-avenirMedium">
<?= $escaper->escapeHtml($subMenuItem['name']) ?>
</a>
<?php if (!empty($subMenuItem['childData'])): ?>
<a class="absolute right-0 flex before:content-['\f105'] before:font-fontawesome
before:text-charcoal before:text-f25 before:mr-3.75"
@click="mobilePanelActiveId = mobilePanelActiveId === '<?= /* @noEscape */ "category-node-" . $category1 ?>' ?
0 : '<?= /* @noEscape */ "category-node-" . $category1 ?>'">
</a>
<?php endif; ?>
</span>
<div class="absolute top-0 right-0 z-10 w-full h-full transition-transform duration-200
ease-in-out translate-x-full transform bg-container-lighter"
:class="{ 'translate-x-full' : mobilePanelActiveId !== '<?= /* @noEscape */ "category-node-" . $category1 ?>',
'-translate-x-full' : mobilePanelActiveId === '<?= /* @noEscape */ "category-node-" . $category1 ?>',}">
<a class="flex bg-charcoal px-3.75 py-3.25 text-f13 font-avenirMedium text-white
capitalize before:content-['\f104'] before:font-fontawesome before:text-grey1
before:text-f15 before:mr-3.25"
@click="mobilePanelActiveId = '<?= /* @noEscape */"category-node-" . $category1 ?>'">
<?= $escaper->escapeHtml(__('Back')) ?>
</a>
<?php if (!empty($subMenuItem['childData'])): ?>
<?php foreach ($subMenuItem['childData'] as $subMenuItemLevel2): ?>
<a href="<?= $escaper->escapeUrl($subMenuItemLevel2['url']) ?>"
title="<?= $escaper->escapeHtmlAttr($subMenuItemLevel2['name']) ?>"
class="w-full text-charcoal hover:text-charcoal focus:text-charcoal
active:text-charcoal px-3.75 py-3.5 text-f15 capitalize font-avenirMedium
level-2 block border-t border-solid border-grey1">
<?= $escaper->escapeHtml($subMenuItemLevel2['name']) ?>
</a>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<a class="flex items-center px-3.75 py-3.5 border-y border-solid border-grey1"
href="https://local.diy.com/orders">
<svg class="mr-2.5 text-pumpkin" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.048 1.344a2.052 2.052 0 0 1 1.904 0l7.368 3.865c.153.08.28.197.369.34a.887.887 0 0 1.135.469v7.625c0 .33-.094.654-.271.94a1.925 1.925 0 0 1-.738.679l-6.863 3.601a2.05 2.05 0 0 1-1.904 0l-6.862-3.601a1.914 1.914 0 0 1-.738-.68 1.774 1.774 0 0 1-.271-.938V6.018c0-.165.046-.327.135-.47a.957.957 0 0 1 .369-.34l7.367-3.864Z"
stroke="#FF7D3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.177 5.474 10 10.104m0 0 8.824-4.63M10 10.104v9.259" stroke="#FF7D3A" stroke-width="1.5"
stroke-linejoin="round"></path>
<path d="m5.589 7.788 8.823-4.63m-10.294 7.25 2.941 1.548" stroke="#FF7D3A" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span
class="text-charcoal font-avenirMedium text-f15">
<?= $escaper->escapeHtml(__('Order Status')) ?>
</span>
</a>
<a href="<?= $escaper->escapeHtmlAttr($escaper->escapeUrl($block->getUrl('customer/account/logout'))) ?>"
id="customer-sign-out"
class="text-lg leading-1.75 before:mr-5px h-auto text-pumpkin no-underline block px-3.75 py-2.5 before:content-['\f08b'] before:font-fontawesome before:text-pumpkin before:text-lg"
aria-label="<?= $escaper->escapeHtmlAttr(__('Sign Out')) ?>">
</a>
</nav>
</div>
</div>
<script>
'use strict';
const initMenuMobile<?= $escaper->escapeHtml($uniqueId) ?> = () => {
return {
mobilePanelActiveId: null,
open: false,
setActiveMenu(menuNode) {
Array.from(menuNode.querySelectorAll('a')).filter(link => {
return link.href === window.location.href.split('?')[0];
}).map(item => {
item.classList.add('text-charcoal');
item.closest('div.level-0') &&
item.closest('div.level-0').querySelector('a.level-0').classList.add('text-charcoal');
});
}
}
}
</script>
<script>
"use strict";
function initCustomer(event) {
const sectionData = event.detail.data;
const customerMenuTitleElement = document.getElementById('customer-menu-title');
const customerSignOut = document.getElementById('customer-sign-out');
if (sectionData.customer && sectionData.customer.firstname) {
if (!customerMenuTitleElement.classList.contains('logged-in')) {
customerMenuTitleElement.innerHTML = "<?= $escaper->escapeHtml(__('Welcome ')) ?></br>" + "<b>" + sectionData.customer.firstname + "</b>";
customerMenuTitleElement.classList.add('logged-in');
customerSignOut.textContent = "<?= $escaper->escapeHtml(__('Sign Out')) ?>";
customerSignOut.classList.add('logged-in');
}
} else {
customerMenuTitleElement.classList.remove('logged-in');
customerSignOut.classList.remove('logged-in');
customerSignOut.classList.add('hidden');
}
}
window.addEventListener("private-content-loaded", initCustomer);
</script>
Editor is loading...
Leave a Comment