mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-16 14:32:18 +00:00
reworked sidenav toggler
This commit is contained in:
+8
-12
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user