27 lines
2.3 KiB
HTML
27 lines
2.3 KiB
HTML
<nav class="py-1 main-nav group" id="mainNav">
|
|
<div class="container flex items-center h-full mx-auto px-4">
|
|
<a href="/" class="nav-logo">
|
|
<f:image src="EXT:base/Resources/Public/Images/logo.svg" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
|
|
</a>
|
|
<button class="nav-toggle group lg:hidden relative w-[30px] h-[30px] cursor-pointer ml-auto bg-none border-none" id="navToggle" aria-label="Toggle Menu">
|
|
<span class="nav-toggle-icon block relative w-full h-[2px] bg-white transition-all duration-300
|
|
before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-white before:left-0 before:-top-[8px] before:transition-all before:duration-300
|
|
after:content-[''] after:block after:absolute after:w-full after:h-[2px] after:bg-white after:left-0 after:top-[8px] after:transition-all after:duration-300
|
|
group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-y-[8px]
|
|
group-[.active]:after:-rotate-45 group-[.active]:after:-translate-y-[8px]"></span>
|
|
</button>
|
|
|
|
<ul class="nav-links flex items-center list-none mx-auto font-hajime text-primary
|
|
lg:flex lg:relative lg:top-auto lg:left-auto lg:right-auto lg:flex-row lg:max-h-full lg:overflow-visible lg:bg-transparent
|
|
absolute top-full left-0 right-0 flex-col max-h-0 overflow-hidden bg-white transition-max-height duration-400 ease-in-out group-[.open]:max-h-[500px]" id="navLinks">
|
|
<f:for each="{mainnavigation}" as="mainnavigationItem">
|
|
<li class="nav-item lg:mx-4 lg:my-0 lg:p-0 lg:border-0 mx-0 my-0 p-4 border-t border-black/10 first:border-t-0 {f:if(condition: mainnavigationItem.active, then:' active')}">
|
|
<a href="{mainnavigationItem.link}" title="{mainnavigationItem.title}" class="nav-link block lg:inline-block no-underline text-primary lg:text-white font-bold uppercase tracking-[0.05em] text-sm md:text-base transition-colors duration-300 hover:text-primary lg:hover:text-white">
|
|
{mainnavigationItem.title}
|
|
</a>
|
|
</li>
|
|
</f:for>
|
|
</ul>
|
|
</div>
|
|
</nav>
|