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

refactor(Cis nav toggle button color in high contrast theme): changes the color of the nav toggle button if the theme is set to high contrast based if the nav is open or closed with a directive

Browse Source
This commit is contained in:
SimonGschnell
2025-08-27 11:41:05 +02:00
parent c48d0250da
commit 17237844b0
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Menu.js
+13 -1
View File
@@ -11,6 +11,18 @@ export default {
CisSprachen,
ThemeSwitch,
},
directives:{
navToggleButton:{
updated(el, binding, vnode, prevVnode){
const { menuOpen, themeName } = binding.value;
if(menuOpen && themeName === "contrast"){
el.querySelector('i').style.setProperty('color', 'white', 'important')
} else if (!menuOpen && themeName === "contrast"){
el.querySelector('i').style.setProperty('color', 'black', 'important')
}
}
}
},
props: {
rootUrl: String,
logoUrl: String,
@@ -143,7 +155,7 @@ 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">
<button v-navToggleButton="{menuOpen, themeName: $theme.theme_name.value}" :aria-label="menuCollapseAriaLabel" :title="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-secondary-text"></i>
</button>
</div>