From 5f37c34ecbfd9a71d1a777a452476b00f7e3241b Mon Sep 17 00:00:00 2001
From: Jonas <jonas.kumlin@karlstad.se>
Date: Mon, 4 Dec 2023 15:00:40 +0100
Subject: [PATCH] feature: sticky legend group header (#1909)

* Sticky header

* slidefix

* Update group.js
---
 scss/ui/_slidenav.scss        | 6 ++++--
 scss/ui/helpers/_helpers.scss | 4 ++++
 src/controls/legend/group.js  | 6 +++---
 src/ui/slidenav.js            | 2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/scss/ui/_slidenav.scss b/scss/ui/_slidenav.scss
index cff55f5f2..290cbc5a2 100644
--- a/scss/ui/_slidenav.scss
+++ b/scss/ui/_slidenav.scss
@@ -2,7 +2,6 @@
   box-sizing: border-box;
   display: inline-block;
   line-height: 0;
-  overflow: hidden;
   position: relative;
   transition: height 0.3s;
 
@@ -10,7 +9,6 @@
     box-sizing: border-box;
     display: inline-block;
     left: 0;
-    overflow: hidden;
     position: relative;
     top: 0;
     transition: all 0.3s;
@@ -35,9 +33,11 @@
     width: 100%;
     will-change: transform;
     z-index: 1000;
+    height: unset;
 
     &.absolute {
       position: absolute;
+      height: 0;
     }
   }
 
@@ -70,5 +70,7 @@
       opacity: 1;
       transform: none;
     }
+    
+    overflow: hidden
   }  
 }
diff --git a/scss/ui/helpers/_helpers.scss b/scss/ui/helpers/_helpers.scss
index d9f50058e..623e4b39c 100644
--- a/scss/ui/helpers/_helpers.scss
+++ b/scss/ui/helpers/_helpers.scss
@@ -64,6 +64,10 @@
   overflow-y: auto;
 }
 
+.overflow-unset {
+  overflow: unset;
+}
+
 // position
 .absolute {
   position: absolute;
diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js
index f3760e926..58743faef 100644
--- a/src/controls/legend/group.js
+++ b/src/controls/legend/group.js
@@ -128,10 +128,10 @@ const Group = function Group(viewer, options = {}) {
 
   const GroupHeader = function GroupHeader() {
     const headerComponent = CollapseHeader({
-      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small item wrap',
+      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small sticky bg-white z-index-low item wrap',
+      style: `top: 0;${moreInfoButton ? 'padding-right: 0.275rem' : ''}`,
       icon,
-      title,
-      style: `${moreInfoButton ? 'padding-right: 0.275rem' : ''}`
+      title
     });
     if (moreInfoButton) {
       headerComponent.on('render', function hcRender() {
diff --git a/src/ui/slidenav.js b/src/ui/slidenav.js
index 3b2f26ce2..777afb536 100644
--- a/src/ui/slidenav.js
+++ b/src/ui/slidenav.js
@@ -132,7 +132,7 @@ export default function Slidenav(options = {}) {
     getState,
     onInit() {
       mainContainer = Element({
-        cls: 'main'
+        cls: 'main overflow-unset'
       });
       backButton = Button({
         cls: 'icon-small padding-small',