refactor(header): integrate search and theme functions via Alpine
- header.ts now imports and re-exports functions from search.ts and theme.ts for use in the header template - Functions available via x-data=header: - initializeSearch - initializeTheme - changeTheme - changeWoodPaneling - loadWoodPaneling - updateWoodPanelingIndicators - header.templ x-init calls these functions directly - Enables proper SSR-first pattern with x-init for setup only
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
package templates
|
||||
|
||||
templ Header(user User, currentPath string) {
|
||||
<nav x-data="theme" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
|
||||
<nav x-data="header" x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators()" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
|
||||
<div x-data="{}" x-init="console.log('Alpine is working!', $el)"></div>
|
||||
<div class="w-full px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
// Header functionality
|
||||
|
||||
import { Alpine } from "./alpine";
|
||||
import { initializeSearch } from "./search";
|
||||
import {
|
||||
initializeTheme,
|
||||
changeTheme,
|
||||
changeWoodPaneling,
|
||||
loadWoodPaneling,
|
||||
updateWoodPanelingIndicators,
|
||||
} from "./theme";
|
||||
|
||||
const logout = (): void => {
|
||||
localStorage.removeItem("token");
|
||||
@@ -12,4 +20,10 @@ export { logout };
|
||||
|
||||
Alpine.data("header", () => ({
|
||||
logout,
|
||||
initializeSearch,
|
||||
initializeTheme,
|
||||
changeTheme,
|
||||
changeWoodPaneling,
|
||||
loadWoodPaneling,
|
||||
updateWoodPanelingIndicators,
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user