blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-16 19:49:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

puts nav-toggle and nav-menu-items in a sticky container

Browse Source
This commit is contained in:
SimonGschnell
2024-08-13 15:27:51 +02:00
parent 36bd1795ed
commit 3a466e8e0f
2 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/templates/CISHTML-Header.php
+23 -21
View File
@@ -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>
public/css/Cis4/Cis.css
+4 -9
View File
@@ -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;