reworked sidenav toggler

This commit is contained in:
adisposkofh
2026-05-11 13:00:50 +02:00
parent 4b22f939b5
commit 772f35c6ba
2 changed files with 28 additions and 21 deletions
+8 -12
View File
@@ -468,7 +468,6 @@ html {
top: 0;
height: var(--fhc-cis-header-height);
width: 100%;
/* padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px); */
background-color: var(--fhc-primary);
}
#cis-header nav {
@@ -500,22 +499,22 @@ html {
top: var(--fhc-cis-header-height);
display: flex;
flex-direction: column;
}
#nav-main-sticky > :not(#nav-main-toggle) {
overflow: auto;
height: 100%;
}
#nav-main-toggle {
width: 0;
z-index: 1;
}
#nav-main-toggle .btn,
#nav-main-toggle .fa-arrow-circle-left {
#nav-main-toggle:hover {
background-color: var(--fhc-secondary-highlight);
}
#nav-main-toggle .div,
#nav-main-toggle .fa-chevron-left {
transition: all 0.5s ease-in-out;
}
#nav-main-toggle .collapsed.btn {
background-color: transparent !important;
}
#nav-main-toggle .collapsed .fa-arrow-circle-left {
#nav-main-toggle .collapsed .fa-chevron-left {
transform: scaleX(-1);
color: var(--fhc-black-40);
}
@@ -555,7 +554,7 @@ html {
#nav-main-menu {
height: 100%;
background-color: var(--fhc-cis-menu-bg);
background-color: var(--fhc-primary);
}
#nav-main-menu > div {
width: var(--fhc-cis-menu-width);
@@ -597,9 +596,6 @@ html {
}
#nav-user{
position: relative;
}
#nav-user-btn {
}
#nav-user-btn img {
object-fit: cover;
+20 -9
View File
@@ -188,15 +188,26 @@ export default {
<nav id="nav-main" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
<div id="nav-main-sticky">
<div id="nav-main-toggle" class="position-static d-none d-lg-block ">
<button :aria-label="menuCollapseAriaLabel" type="button" @click="menuOpen = !menuOpen" class="btn text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target=".nav-menu-collapse" aria-expanded="true" aria-controls="nav-sprachen nav-main-menu">
<i aria-hidden="true" class="fa fa-arrow-circle-left fhc-text"></i>
</button>
</div>
<div class="offcanvas-body p-0">
<div id="nav-main-menu" class="nav-menu-collapse collapse collapse-horizontal show">
<div>
<cis-menu-entry :highestMatchingUrlCount="highestMatchingUrlCount" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />
<div class="d-flex flex-row h-100">
<div class="offcanvas-body p-0">
<div id="nav-main-menu" class="nav-menu-collapse collapse collapse-horizontal show">
<div class="flex-grow-1">
<cis-menu-entry :highestMatchingUrlCount="highestMatchingUrlCount" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />
</div>
</div>
</div>
<div id="nav-main-toggle" class="d-none d-lg-block">
<div
@click="menuOpen = !menuOpen"
:aria-label="menuCollapseAriaLabel"
type="button"
class="h-100 d-flex align-items-center px-2"
data-bs-toggle="collapse"
data-bs-target=".nav-menu-collapse"
aria-expanded="true"
aria-controls="nav-sprachen nav-main-menu"
>
<i aria-hidden="true" class="fa-solid fa-chevron-left fhc-text"></i>
</div>
</div>
</div>