CodePress/engine/templates/assets/header.mustache
Edwin Noorlander a2b7fcb1a8 ## Complete Multi-language System & Navigation Enhancement
### Features Added:
- **Multi-language Support**: Dutch/English with URL-based switching (?lang=nl|en)
- **Theme Customization**: Configurable header/navigation colors via config.json
- **Navigation Improvements**: Active states, dropdown chevron icons, visual distinction
- **Mobile Responsive**: Separate desktop/mobile search layouts
- **Template System**: Fixed rendering pipeline for all partials

### Technical Fixes:
- Fixed language file path (engine/lang/ vs engine/core/class/../lang/)
- Added template data rendering to layout template
- Implemented navigation active state for default/home page
- Added chevron icons to dropdown folders for visual distinction
- Removed hardcoded navigation opacity class for theme colors

### Files Modified:
- config.json: Added theme and language configuration
- engine/core/class/CodePressCMS.php: Multi-language and navigation logic
- engine/templates/: Enhanced header, footer, navigation, layout
- engine/lang/: Dutch and English translation files
- public/assets/css/mobile.css: Mobile responsive fixes

### Result:
Fully functional multi-language CMS with proper navigation states and theme customization.
2025-11-22 15:29:47 +01:00

51 lines
2.6 KiB
Plaintext

<header class="navbar navbar-expand-lg navbar-dark" style="background-color: var(--header-bg);">
<div class="container-fluid">
<a class="navbar-brand" href="?page={{default_page}}">
<img src="/assets/icon.svg" alt="CodePress Logo" width="32" height="32" class="me-2">
{{site_title}}
</a>
<!-- Desktop search and language -->
<div class="d-none d-lg-flex ms-auto align-items-center">
<form class="d-flex me-3" method="GET" action="">
<input class="form-control me-2" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
<button class="btn btn-outline-light" type="submit">{{t_search_button}}</button>
</form>
<!-- Language switcher -->
<div class="dropdown">
<button class="btn btn-outline-light" type="button" data-bs-toggle="dropdown">
{{current_lang_upper}} <i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="?lang=nl&page={{homepage}}">NL</a></li>
<li><a class="dropdown-item" href="?lang=en&page={{homepage}}">EN</a></li>
</ul>
</div>
</div>
<!-- Mobile search and language toggle -->
<div class="d-lg-none">
<button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mobileSearch" aria-controls="mobileSearch" aria-expanded="false" aria-label="Toggle search">
<i class="bi bi-search"></i>
</button>
<button class="btn btn-outline-light" type="button" data-bs-toggle="dropdown">
{{current_lang_upper}} <i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="?lang=nl&page={{homepage}}">NL</a></li>
<li><a class="dropdown-item" href="?lang=en&page={{homepage}}">EN</a></li>
</ul>
</div>
</div>
<!-- Mobile search bar -->
<div class="collapse navbar-collapse d-lg-none" id="mobileSearch">
<div class="container-fluid px-0">
<form class="d-flex px-3 pb-3" method="GET" action="">
<input class="form-control me-2" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
<button class="btn btn-outline-light" type="submit">{{t_search_button}}</button>
</form>
</div>
</div>
</header>