fix: consistent topnav styles

This commit is contained in:
Björn Fromme
2025-01-06 18:21:08 +01:00
parent 9374b97fe3
commit 6074764f01
2 changed files with 8 additions and 7 deletions
@@ -3,10 +3,11 @@
}
.topnav__nav {
@apply flex items-center justify-between m-0 p-0 w-full divide-x divide-white/50 border-l border-r border-white/50;
@apply flex items-center m-0 p-0;
}
.topnav__item {
@apply flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary;
@apply ser:hover:bg-ser-secondary;
@apply border-r border-white/50;
}
@@ -8,7 +8,7 @@
<div class="topnav">
<div class="container">
<nav role="navigation" class="topnav__nav">
<div class="flex items-center divide-x divide-white/50">
<div class="flex items-center border-l border-white/50">
<f:if condition="{settings.mainSitePid}">
<f:link.typolink parameter="{settings.mainSitePid}"
class="topnav__item"
@@ -22,17 +22,17 @@
{ep:icon(icon: 'home', class: 'w-5 h-5')}
</f:link.typolink>
</div>
<div class="flex-1 flex items-center divide-x divide-white/50">
<f:if condition="{settings.topNavPid}">
<f:if condition="{settings.topNavPid}">
<div class="flex-1 flex items-center">
<f:for each="{topnav}" as="menuitem">
<a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
<a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} || {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
title="{menuitem.title}">
{menuitem.title}
</a>
</f:for>
</f:if>
</div>
</div>
</f:if>
<f:if condition="{settings.myEpPageUid}">
<f:link.typolink parameter="{settings.myEpPageUid}" class="topnav__item" title="My E&P">
{ep:icon(icon: 'user', class: 'w-5 h-5')}