From 030053adc397bf7946b8ab0c69f646e9125bb7a4 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Wed, 23 Apr 2025 23:11:53 +0200
Subject: [PATCH] fix: sticky nav, ul in nav

---
 ToDo.md                                       |  4 ++++
 .../hero/templates/frontend.html              |  2 +-
 .../Private/PageView/Layouts/Default.html     |  2 +-
 .../PageView/Partials/Navigation/Main.html    |  2 +-
 .../Public/Scss/components/_navigation.scss   |  6 +++++
 .../Public/Scss/layouts/_home-page.scss       | 23 +------------------
 6 files changed, 14 insertions(+), 25 deletions(-)
 create mode 100644 ToDo.md

diff --git a/ToDo.md b/ToDo.md
new file mode 100644
index 0000000..3255a91
--- /dev/null
+++ b/ToDo.md
@@ -0,0 +1,4 @@
+[x] hero element needs a possibility to set the anchor link for down arrow
+[x] unordered list design
+[x] check if marker design of ul and ol use em instead of rem for sizing
+[x] navbar should be sticky on mobile
diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index b855f38..66246a6 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
@@ -3,7 +3,7 @@
 <f:section name="Header" />
 
 <f:section name="Main">
-  <section class="bg-white md:bg-hero-gradient md:mb-16">
+  <section class="bg-white md:bg-hero-gradient md:mb-16 -mt-16">
     <div class="container mx-auto px-6 py-12 md:py-24 bg-white md:bg-hero-inner">
       <div class="md:flex md:items-center">
 
diff --git a/packages/base/Resources/Private/PageView/Layouts/Default.html b/packages/base/Resources/Private/PageView/Layouts/Default.html
index f8d7e29..23d1071 100644
--- a/packages/base/Resources/Private/PageView/Layouts/Default.html
+++ b/packages/base/Resources/Private/PageView/Layouts/Default.html
@@ -1,4 +1,4 @@
-<header>
+<header class="sticky top-0 left-0 right-0 z-50 bg-primary text-white">
     <!-- Main Navigation -->
     <f:render partial="Navigation/Main" arguments="{_all}"  />
 </header>
diff --git a/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html b/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
index e51630e..ace295e 100644
--- a/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
+++ b/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
@@ -1,4 +1,4 @@
-<nav class="py-1 main-nav group sticky top-0 z-50 bg-repeat" id="mainNav">
+<nav class="py-1 main-nav group" id="mainNav">
     <div class="container flex items-center h-full mx-auto px-4">
         <a href="/" class="nav-logo">
             <f:image src="EXT:base/Resources/Public/Images/logo.svg" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss
index 0ff9235..ca3f54d 100644
--- a/packages/base/Resources/Public/Scss/components/_navigation.scss
+++ b/packages/base/Resources/Public/Scss/components/_navigation.scss
@@ -2,4 +2,10 @@
   .container {
     padding: 0 1rem;
   }
+
+  ul {
+    ::before {
+      @apply hidden;
+    }
+  }
 }
diff --git a/packages/base/Resources/Public/Scss/layouts/_home-page.scss b/packages/base/Resources/Public/Scss/layouts/_home-page.scss
index 495218c..af5e85e 100644
--- a/packages/base/Resources/Public/Scss/layouts/_home-page.scss
+++ b/packages/base/Resources/Public/Scss/layouts/_home-page.scss
@@ -2,24 +2,11 @@
 
 .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-primary lg:text-white lg:hover:text-gray-200;
-        }
-        // 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;
+            @apply bg-transparent transition-colors duration-300 ease-in-out;
 
             // Initial link colors and background for transparent header (desktop)
             #mainNav .nav-link {
@@ -49,11 +36,3 @@
         }
     }
 }
-
-// --- 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
-    }
-}