Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
14 kB
3
Indexable
Never
<?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>
Leave a Comment