From 9f410a339e03e5d18a07732408e6d6ba62c9e07a Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Fri, 13 Dec 2024 00:04:56 +0100
Subject: [PATCH] fix: sticky nav

---
 .../Resources/Public/JavaScript/navigation.js | 19 ++---------
 .../Public/Scss/components/_navigation.scss   | 32 ++++++++++---------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/packages/base/Resources/Public/JavaScript/navigation.js b/packages/base/Resources/Public/JavaScript/navigation.js
index 0aaa628..a986230 100644
--- a/packages/base/Resources/Public/JavaScript/navigation.js
+++ b/packages/base/Resources/Public/JavaScript/navigation.js
@@ -1,8 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
     const nav = document.getElementById('mainNav');
     const toggle = document.getElementById('navToggle');
-    const navLinks = document.getElementById('navLinks');
-    let lastScrollTop = 0;
 
     // Toggle menu on mobile
     toggle.addEventListener('click', function () {
@@ -10,19 +8,9 @@ document.addEventListener('DOMContentLoaded', function () {
         toggle.classList.toggle('active');
     });
 
-    // Sticky on scroll
-    window.addEventListener('scroll', function () {
-        const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
-        if (currentScroll > 0) {
-            nav.classList.add('sticky');
-        } else {
-            nav.classList.remove('sticky');
-        }
-        lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
-    });
-
-    // Optionally handle dropdowns on mobile (if desired)
-    // For example:
+    // 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.
+    
     const submenuParents = document.querySelectorAll('.nav-item.has-submenu');
     submenuParents.forEach(parent => {
         parent.addEventListener('click', (e) => {
@@ -31,7 +19,6 @@ document.addEventListener('DOMContentLoaded', function () {
                 const subMenu = parent.querySelector('.sub-menu');
                 if (subMenu) {
                     const isOpen = subMenu.style.display === 'block';
-                    // Close all open submenus first (optional)
                     document.querySelectorAll('.sub-menu').forEach(sm => sm.style.display = 'none');
                     subMenu.style.display = isOpen ? 'none' : 'block';
                 }
diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss
index 6886b9a..57e86a8 100644
--- a/packages/base/Resources/Public/Scss/components/_navigation.scss
+++ b/packages/base/Resources/Public/Scss/components/_navigation.scss
@@ -1,23 +1,26 @@
-.main-nav {
-  width: 100%;
-  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
-  position: relative;
-  z-index: 1000;
+// Define a fixed height for the navigation and apply that as padding-top on the body
+// so that when it becomes sticky, the content doesn't jump.
+$nav-height: 60px; // Adjust as needed
 
-  &.sticky {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  }
+header {
+  width: 100%;
+  height: $nav-height;
+  line-height: $nav-height;
+  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.main-nav {
 
   .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 0 auto;
-    padding: 1rem;
+    height: 100%;
+    padding: 0 1rem;
   }
 
   .nav-logo {
@@ -82,6 +85,7 @@
   .nav-links {
     display: flex;
     list-style: none;
+    align-items: center;
 
     .nav-item {
       margin: 0 1rem;
@@ -102,13 +106,11 @@
     }
   }
 
-  // Responsive: show hamburger and collapse menu on smaller screens
   @media (max-width: $breakpoint-lg) {
     .nav-toggle {
       display: block;
     }
 
-    // Hide links by default on mobile and show only when toggled
     .nav-links {
       position: absolute;
       top: 100%;