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

54 lines
1.1 KiB
CSS

/* Mobile search improvements */
@media (max-width: 991.98px) {
.navbar {
position: relative;
}
/* Hide desktop elements on mobile */
.d-none.d-lg-flex {
display: none !important;
}
#mobileSearch {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--header-bg);
z-index: 1030;
}
#mobileSearch.show {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Ensure navigation doesn't overlap with expanded search */
.navigation-section {
margin-top: 0;
border: none !important;
}
}
/* Desktop improvements */
@media (min-width: 992px) {
/* Hide mobile elements on desktop */
.d-lg-none {
display: none !important;
}
/* Hide mobile search on desktop */
#mobileSearch {
display: none !important;
}
}
/* Search form improvements */
.form-control[type="search"] {
min-width: 200px;
}
@media (max-width: 576px) {
.form-control[type="search"] {
min-width: 150px;
}
}