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

reworked searchbar animation

Browse Source
This commit is contained in:
adisposkofh
2026-04-17 18:10:05 +02:00
parent 202e6e88d2
commit 4def45907b
2 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Menu.js
+32 -31
View File
@@ -28,7 +28,6 @@ export default {
urlMatchRankings:[],
navUserDropdown:null,
menuOpen:true,
isSearchShownInMobileView: false,
};
},
inject: ["isMobile"],
@@ -61,9 +60,6 @@ export default {
site_url(){
return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
},
areHeaderOptionsShown() {
return !this.isSearchShownInMobileView || !this.isMobile;
},
},
methods: {
fetchMenu() {
@@ -118,19 +114,19 @@ export default {
},
template: /*html*/`
<div
:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: 0px' : 'width: 79px')"
style="transition: width 0.5s"
class="d-flex flex-row align-items-center gap-2 h-100"
id="header-options-collapsible"
class="collapse multi-collapse collapse-horizontal show"
>
<button id="nav-main-btn" class="navbar-toggler rounded-0 px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span v-if="isMobile" class="d-flex flex-row align-items-center">
<theme-switch></theme-switch>
</span>
<div class="d-flex flex-row align-items-center gap-2 h-100" style="width: 79px">
<button id="nav-main-btn" class="navbar-toggler rounded-0 px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span v-if="isMobile" class="d-flex flex-row align-items-center">
<theme-switch></theme-switch>
</span>
</div>
</div>
<fhc-searchbar
@isSearchShownInMobileViewUpdated="isSearchShownInMobileView = $event.isSearchShownInMobileView"
:searchoptions="searchbaroptions"
:searchfunction="searchfunction"
ref="searchbar"
@@ -147,25 +143,30 @@ export default {
</div>
<div
:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: 0px' : 'width: 51px')"
style="transition: width 0.5s"
id="nav-user"
id="header-usermenu-collapsible"
class="collapse multi-collapse collapse-horizontal show"
>
<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="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
</button>
<ul ref="navUserDropdown"
@[\`shown.bs.collapse\`]="handleShowNavUser"
@[\`hide.bs.collapse\`]="handleHideNavUser"
id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
<li >
<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
</li>
<li><hr class="dropdown-divider m-0 "></li>
<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
</ul>
<div
:style="!isMobile ? '' : 'width: 51px'"
id="nav-user"
>
<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="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
</button>
<ul ref="navUserDropdown"
@[\`shown.bs.collapse\`]="handleShowNavUser"
@[\`hide.bs.collapse\`]="handleHideNavUser"
id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
<li >
<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
</li>
<li><hr class="dropdown-divider m-0 "></li>
<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
</ul>
</div>
</div>
<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 ">