valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(navigation): ensure active state and hover effect work correctly with HTMX by moving header inside viewport
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-20 10:21:26 +01:00
parent ad8b7777f2
commit a7f1c83e83
3 changed files with 34 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/tailwind.css
View File

@@ -99,6 +99,25 @@
@apply flex flex-col items-center space-y-10 text-4xl; @apply flex flex-col items-center space-y-10 text-4xl;
} }
/* Navigation Links */
.nav-link {
@apply relative py-2 px-1 transition-all duration-300 opacity-80 hover:opacity-100 hover:text-[var(--brand-primary)];
}
.nav-link::after {
content: "";
@apply absolute bottom-0 left-0 w-full h-0.5 bg-[var(--brand-primary)] transform scale-x-0 transition-transform duration-300 ease-out origin-left;
}
.nav-link:hover::after,
.nav-current .nav-link::after {
@apply scale-x-100;
}
.nav-current .nav-link {
@apply text-[var(--brand-primary)] opacity-100 font-semibold;
}
/* Button & Link Components */ /* Button & Link Components */
.btn-primary { .btn-primary {
@apply inline-flex items-center px-8 py-3 border border-transparent text-base font-semibold rounded-lg shadow-md @apply inline-flex items-center px-8 py-3 border border-transparent text-base font-semibold rounded-lg shadow-md

18
default.hbs
View File

@@ -34,22 +34,24 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body <body
class="{{body_class}} font-sans antialiased min-h-screen flex flex-col" class="{{body_class}} font-sans antialiased">
hx-boost="true"
hx-target="#main-content" {{!-- The Mobile Menu is outside the swap target and stays alive --}}
hx-select="#main-content"
hx-swap="innerHTML show:top"
>
{{!-- Mobile menu is outside the swap target and stays alive --}}
{{> mobile-menu}} {{> mobile-menu}}
{{!--
We target only this container for HTMX page swaps.
This keeps root Alpine state (like mobileMenuOpen) persistent.
--}}
<div id="viewport" class="min-h-screen flex flex-col" hx-boost="true" hx-target="#viewport" hx-select="#viewport">
{{> header}} {{> header}}
<main id="main-content" class="flex-grow"> <main class="flex-grow">
{{{body}}} {{{body}}}
</main> </main>
{{> footer}} {{> footer}}
</div>
{{ghost_foot}} {{ghost_foot}}
<script src="{{asset "js/ghost-config.js"}}"></script> <script src="{{asset "js/ghost-config.js"}}"></script>

4
partials/navigation.hbs
View File

@@ -1,10 +1,8 @@
<ul class="nav"> <ul class="nav">
{{#foreach navigation}} {{#foreach navigation}}
<li class="{{link_class for=url class=(concat "nav-" slug)}}"> <li class="{{link_class for=url class=(concat "nav-" slug)}}">
<a href="{{url absolute="true"}}" class="relative py-2 px-1 transition-all duration-300 {{#if current}}text-[var(--brand-primary)] font-bold{{else}}hover:text-[var(--brand-primary)] opacity-80 hover:opacity-100{{/if}} group"> <a href="{{url absolute="true"}}" class="nav-link">
{{label}} {{label}}
{{!-- Animated Underline --}}
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[var(--brand-primary)] transform {{#if current}}scale-x-100{{else}}scale-x-0 group-hover:scale-x-100{{/if}} transition-transform duration-300 ease-out origin-left"></span>
</a> </a>
</li> </li>
{{/foreach}} {{/foreach}}