diff --git a/packages/base/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/HomePage.tsconfig b/packages/base/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/HomePage.tsconfig new file mode 100644 index 0000000..00f15c4 --- /dev/null +++ b/packages/base/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/HomePage.tsconfig @@ -0,0 +1,22 @@ +mod.web_layout.BackendLayouts { + home_page { + title = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.home_page + icon = EXT:base/Resources/Public/Images/BackendLayouts/default.png + config { + backend_layout { + colCount = 1 + rowCount = 1 + rows { + 1 { + columns { + 1 { + name = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.column.content + colPos = 0 + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript b/packages/base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript new file mode 100644 index 0000000..cde353b --- /dev/null +++ b/packages/base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript @@ -0,0 +1,40 @@ +# PAGE CLASS +lib.page.class = COA +lib.page.class { + // Page alias or id as fallback + 10 = TEXT + 10 { + field = alias // uid + noTrimWrap = |page-|| + } + // Current level of the page within the tree structure + 20 = TEXT + 20 { + data = level:1 + noTrimWrap = | pagelevel-|| + } + // Language + 30 = TEXT + 30 { + data = siteLanguage:languageId + noTrimWrap = | language-|| + } + // Backend layout + 40 = TEXT + 40 { + data = pagelayout + replacement.10 { + search = pagets__ + replace = + } + ifEmpty = default + noTrimWrap = | backendlayout-|| + } + // Layout + 50 = TEXT + 50 { + field = layout + noTrimWrap = | layout-|| + ifEmpty = default + } +} \ No newline at end of file diff --git a/packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript b/packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript index 08a0d5c..b29c8d8 100644 --- a/packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript +++ b/packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript @@ -3,10 +3,24 @@ # Include constants # +# HELPER +@import 'EXT:base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript' + page = PAGE page { typeNum = 0 shortcutIcon = EXT:base/Resources/Public/Favicons/favicon-96x96.png + + bodyTagCObject = COA + bodyTagCObject { + 10 = TEXT + 10.data = TSFE:id + 10.noTrimWrap = | id="p|"| + 20 =< lib.page.class + 20.stdWrap.noTrimWrap = | class="|"| + wrap = + } + 10 = PAGEVIEW 10 { paths { @@ -32,6 +46,7 @@ page { as = metanavigation } } + } meta { @@ -88,6 +103,7 @@ page { } footerMenuPid = {$footerMenuPid} + } lib.contentElement { diff --git a/packages/base/Resources/Private/Language/locallang_be.xlf b/packages/base/Resources/Private/Language/locallang_be.xlf index 81d9be7..a835fdd 100644 --- a/packages/base/Resources/Private/Language/locallang_be.xlf +++ b/packages/base/Resources/Private/Language/locallang_be.xlf @@ -18,6 +18,16 @@ Right + + Home Page + + + Hero + + + Content + + diff --git a/packages/base/Resources/Private/PageView/Pages/Home_page.html b/packages/base/Resources/Private/PageView/Pages/Home_page.html new file mode 100644 index 0000000..b914912 --- /dev/null +++ b/packages/base/Resources/Private/PageView/Pages/Home_page.html @@ -0,0 +1,6 @@ + + + + Render main content for colPos 0 (Home Page) + + \ No newline at end of file diff --git a/packages/base/Resources/Public/JavaScript/navigation.js b/packages/base/Resources/Public/JavaScript/navigation.js index a986230..5c78ba5 100644 --- a/packages/base/Resources/Public/JavaScript/navigation.js +++ b/packages/base/Resources/Public/JavaScript/navigation.js @@ -1,16 +1,39 @@ document.addEventListener('DOMContentLoaded', function () { - const nav = document.getElementById('mainNav'); + const nav = document.getElementById('mainNav'); // Keep for mobile toggle + const header = document.querySelector('header'); // Get the header element const toggle = document.getElementById('navToggle'); // Toggle menu on mobile toggle.addEventListener('click', function () { - nav.classList.toggle('open'); + nav.classList.toggle('open'); // Mobile menu still controlled by nav toggle.classList.toggle('active'); }); - // No need to add or remove sticky class here since CSS handles position: sticky - // We simply rely on the CSS-based sticky behavior and reserved space via body padding. - + // Handle transparent header scroll effect for home page on desktop + const body = document.body; + const scrollThreshold = 50; // Pixels to scroll before changing background + + function handleScroll() { + // Check if it's the home page layout and desktop view + if (header && body.classList.contains('backendlayout-home_page') && window.innerWidth >= 1024) { // 1024px is Tailwind's default lg breakpoint + if (window.scrollY > scrollThreshold) { + header.classList.add('scrolled'); // Add class to header + } else { + header.classList.remove('scrolled'); // Remove class from header + } + } else if (header) { // Check if header exists before trying to remove class + // Ensure scrolled class is removed if not on home page desktop or resized below lg + header.classList.remove('scrolled'); // Remove class from header + } + } + + // Initial check in case the page loads already scrolled + handleScroll(); + + // Add scroll and resize listeners + window.addEventListener('scroll', handleScroll); + window.addEventListener('resize', handleScroll); // Re-check on resize + const submenuParents = document.querySelectorAll('.nav-item.has-submenu'); submenuParents.forEach(parent => { parent.addEventListener('click', (e) => { diff --git a/packages/base/Resources/Public/Scss/layouts/_home-page.scss b/packages/base/Resources/Public/Scss/layouts/_home-page.scss new file mode 100644 index 0000000..1d860a5 --- /dev/null +++ b/packages/base/Resources/Public/Scss/layouts/_home-page.scss @@ -0,0 +1,82 @@ +// Styles specific to the Home Page layout (.backendlayout-home_page) + +.backendlayout-home_page { + + // --- Target the header element --- + header { + // --- Mobile First: Always Primary Background --- + @apply bg-primary text-white; + + // Mobile link/icon colors (on primary background) + #mainNav .nav-link { // Target links within #mainNav + @apply text-white hover:text-gray-200; + } + #mainNav .nav-toggle-icon, + #mainNav .nav-toggle-icon::before, + #mainNav .nav-toggle-icon::after { + @apply bg-white; // Ensure mobile toggle is visible + } + // Adjust mobile submenu link colors if needed (depends on dropdown background) + #mainNav .sub-menu .nav-link { + @apply text-gray-700 hover:text-black; // Assuming light dropdown background + } + + // --- Desktop Styles --- + @screen lg { + // Initial state: Transparent background, fixed position + @apply fixed top-0 left-0 right-0 z-50 bg-transparent transition-colors duration-300 ease-in-out; + + // Initial link colors and background for transparent header (desktop) + #mainNav .nav-link { + @apply bg-white text-primary hover:text-brand px-3 py-1 rounded; // Add bg-white, padding, and rounded corners + } + // Ensure mobile toggle icon also uses primary color initially on desktop if visible (though usually hidden) + #mainNav .nav-toggle-icon, + #mainNav .nav-toggle-icon::before, + #mainNav .nav-toggle-icon::after { + @apply bg-primary; + } + // Desktop submenu link colors (assuming light dropdown background) + #mainNav .sub-menu .nav-link { + @apply text-gray-700 hover:text-black; + } + + // Scrolled state: Primary background (desktop) + &.scrolled { + @apply bg-primary shadow-md; + + // Link colors for primary background (desktop scrolled) + #mainNav .nav-link { + @apply text-white hover:text-gray-200; + } + // Submenu link colors likely don't need changing here if dropdown is consistent + } + } + } +} + +// --- Default styles for header on NON-home pages --- +// Ensures header has a background and correct colors on other pages +body:not(.backendlayout-home_page) { + header { + @apply bg-primary text-white; // Or your desired default background/text + + #mainNav .nav-link { + @apply text-white hover:text-gray-200; + } + #mainNav .nav-toggle-icon, + #mainNav .nav-toggle-icon::before, + #mainNav .nav-toggle-icon::after { + @apply bg-white; + } + #mainNav .sub-menu .nav-link { + @apply text-gray-700 hover:text-black; // Assuming light dropdown background + } + } + // On non-home pages, main content doesn't need extra padding-top + @screen lg { + main { + @apply pt-0; // Reset padding if needed + } + } +} \ No newline at end of file diff --git a/packages/base/Resources/Public/Scss/main.scss b/packages/base/Resources/Public/Scss/main.scss index fe2890b..e3e7267 100644 --- a/packages/base/Resources/Public/Scss/main.scss +++ b/packages/base/Resources/Public/Scss/main.scss @@ -15,3 +15,5 @@ @import "components/news_detail"; @import 'components/footer'; @import 'components/buttons'; +@import 'layouts/home-page'; +