From 3a466e8e0fe71e1a5187cbb8e7bf6befeced2aa8 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 13 Aug 2024 15:27:51 +0200
Subject: [PATCH] puts nav-toggle and nav-menu-items in a sticky container

---
 .../views/templates/CISHTML-Header.php        | 44 ++++++++++---------
 public/css/Cis4/Cis.css                       | 13 ++----
 2 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/application/views/templates/CISHTML-Header.php b/application/views/templates/CISHTML-Header.php
index 6a034cfb4..811047093 100755
--- a/application/views/templates/CISHTML-Header.php
+++ b/application/views/templates/CISHTML-Header.php
@@ -35,27 +35,29 @@ if (!isset($menu)) {
 		<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
 	</a>
 	<nav id="nav-main" class="offcanvas offcanvas-start bg-dark" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
-		<div id="nav-main-toggle" class="d-none d-lg-flex bg-dark">
-			<button type="button" class="btn bg-dark text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#nav-main-menu" aria-expanded="true" aria-controls="nav-main-menu">
-				<i class="fa fa-arrow-circle-left"></i>
-			</button>
-		</div>
-		<div class="offcanvas-body flex-grow-0 p-0">
-			<fhc-searchbar id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
-			<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
-				<img src="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" class="avatar rounded-circle"/>
-			</button>
-			<ul id="nav-user-menu" class="collapse list-unstyled" aria-labelledby="nav-user-btn">
-				<li><a class="btn btn-level-2 rounded-0 d-block" href="<?= site_url('Cis/Profil'); ?>" id="menu-profil">Profil</a></li>
-				<li><a class="btn btn-level-2 rounded-0 d-block" href="#">Ampeln</a></li>
-				<li><hr class="dropdown-divider"></li>
-				<li><a class="btn btn-level-2 rounded-0 d-block" href="<?= site_url('Cis/Auth/logout'); ?>">Logout</a></li>
-			</ul>
-			<div id="nav-main-menu" class="collapse collapse-horizontal show">
-				<div>
-				<?php foreach($menu->childs as $entry)
-					$this->load->view('templates/CISHTML-Menu/Entry', ['entry' => $entry, 'menu_id' => 'menu']);
-				?>
+		<div id="nav-main-sticky">
+			<div id="nav-main-toggle" class="position-static d-none d-lg-flex bg-dark">
+				<button type="button" class="btn bg-dark text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#nav-main-menu" aria-expanded="true" aria-controls="nav-main-menu">
+					<i class="fa fa-arrow-circle-left"></i>
+				</button>
+			</div>
+			<div class="p-0">
+				<fhc-searchbar id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
+				<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
+					<img src="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" class="avatar rounded-circle"/>
+				</button>
+				<ul id="nav-user-menu" class="collapse list-unstyled" aria-labelledby="nav-user-btn">
+					<li><a class="btn btn-level-2 rounded-0 d-block" href="<?= site_url('Cis/Profil'); ?>" id="menu-profil">Profil</a></li>
+					<li><a class="btn btn-level-2 rounded-0 d-block" href="#">Ampeln</a></li>
+					<li><hr class="dropdown-divider"></li>
+					<li><a class="btn btn-level-2 rounded-0 d-block" href="<?= site_url('Cis/Auth/logout'); ?>">Logout</a></li>
+				</ul>
+				<div id="nav-main-menu" class="collapse collapse-horizontal show">
+					<div>
+					<?php foreach($menu->childs as $entry)
+						$this->load->view('templates/CISHTML-Menu/Entry', ['entry' => $entry, 'menu_id' => 'menu']);
+					?>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 3122fe97e..bbad5f056 100755
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -36,7 +36,6 @@ html {
   :root {
     --fhc-cis-menu-width: 250px;
     --fhc-cis-header-height: 60px;
-	--fhc-cis-toggle-height: 30px;
     --fhc-cis-menu-bg: #72777A;
   }
 }
@@ -44,7 +43,6 @@ html {
   :root {
     --fhc-cis-menu-width: 400px;
     --fhc-cis-header-height: 40px;
-	--fhc-cis-toggle-height: 0px;
     --fhc-cis-menu-bg: #343a40;
   }
 }
@@ -234,10 +232,11 @@ html {
     width: 100%;
     height: 100%;
   }
+  #nav-main-sticky {
+  	position: sticky;
+  	top: var(--fhc-cis-header-height);
+  }
   #nav-main-toggle {
-	position: sticky;
-	top: var(--fhc-cis-header-height);
-	height: var(--fhc-cis-toggle-height);
     width: 0;
     z-index: 1;
   }
@@ -252,10 +251,6 @@ html {
     transform: scaleX(-1);
     color: var(--bs-dark);
   }
-  #nav-main .offcanvas-body{
-	position: sticky;
-	top: calc(var(--fhc-cis-header-height) + var(--fhc-cis-toggle-height));
-  }
   #nav-search {
     position: fixed;
     top: 0;