Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: many changes

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-20 12:03:59 +02:00
parent 6c9d8966b0
commit 983436da32
6 changed files with 224 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/base/Resources/Private/ContentElements/Layouts/FullWidth.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="frame frame-type-{data.CType}">
<f:render section="Header" optional="true" />
<f:render section="Main" optional="true" />
</div>
<f:section name="Header">
<div class="header">
<h2>{data.header}</h2>
</div>
</f:section>

28
packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
View File

@@ -1,23 +1,29 @@
<nav class="main-nav" id="mainNav">
<div class="container">
<nav class="main-nav group sticky top-0 z-50 bg-repeat" 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.png" alt="Logo" />
<f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle Menu">
<span class="nav-toggle-icon"></span>
<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-primary transition-all duration-300
before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-primary 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-primary 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-x-[5px] group-[.active]:before:translate-y-[5px]
group-[.active]:after:-rotate-45 group-[.active]:after:translate-x-[5px] group-[.active]:after:-translate-y-[5px]"></span>
</button>
<ul class="nav-links" id="navLinks">
<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{f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">
<a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">
<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')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">
<a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}" class="nav-link block lg:inline-block no-underline text-primary font-bold uppercase tracking-[0.05em] text-sm transition-colors duration-300 hover:text-brand">
{mainnavigationItem.title}
</a>
<f:if condition="{mainnavigationItem.children}">
<ul class="sub-menu">
<ul class="sub-menu hidden lg:absolute lg:block lg:opacity-0 lg:invisible lg:group-hover:opacity-100 lg:group-hover:visible lg:bg-white lg:shadow-md lg:mt-2 lg:py-2 lg:rounded lg:border lg:border-gray-200">
<f:for each="{mainnavigationItem.children}" as="child">
<li class="{f:if(condition: child.active, then:'active')}">
<a class="nav-link" href="{child.link}" target="{child.target}" title="{child.title}">
<li class="{f:if(condition: child.active, then:'active')} lg:px-4 lg:py-2 hover:bg-gray-100">
<a class="nav-link block text-sm text-primary hover:text-brand" href="{child.link}" target="{child.target}" title="{child.title}">
{child.title}
</a>
</li>