makes the cis4 side menu sticky

This commit is contained in:
SimonGschnell
2024-08-13 15:04:44 +02:00
parent 2083e95f8c
commit 36bd1795ed
2 changed files with 11 additions and 2 deletions
@@ -35,12 +35,12 @@ 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="position-static d-none d-lg-block bg-dark">
<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 p-0">
<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"/>
+9
View File
@@ -36,6 +36,7 @@ html {
:root {
--fhc-cis-menu-width: 250px;
--fhc-cis-header-height: 60px;
--fhc-cis-toggle-height: 30px;
--fhc-cis-menu-bg: #72777A;
}
}
@@ -43,6 +44,7 @@ html {
:root {
--fhc-cis-menu-width: 400px;
--fhc-cis-header-height: 40px;
--fhc-cis-toggle-height: 0px;
--fhc-cis-menu-bg: #343a40;
}
}
@@ -233,6 +235,9 @@ html {
height: 100%;
}
#nav-main-toggle {
position: sticky;
top: var(--fhc-cis-header-height);
height: var(--fhc-cis-toggle-height);
width: 0;
z-index: 1;
}
@@ -247,6 +252,10 @@ 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;