fix(Cis Navbar Collapsibles): closes other colapsibles when opening another

public/js/components/Cis/Menu.js

@@ -22,6 +22,7 @@ export default {
 			activeEntry:null,
 			url:null,
 			urlMatchRankings:[],
+			navUserDropdown:null,
         };
     },
 	provide(){
@@ -48,6 +49,16 @@ export default {
 		}
 	},
 	methods:{
+		toggleCollapsibles(target){
+			switch(target){
+				case 'settings':
+					this.navUserDropdown?.hide();
+					break;
+				case 'navUserDropdown':
+					this.$refs.searchbar?.settingsDropdown?.hide();
+					break;
+			}
+		},
 		makeParentContentActive(content_id, collection=this.entries, parent=null){
 			for(let entry of collection){
 				if(entry.content_id == content_id){
@@ -71,6 +82,9 @@ export default {
 	mounted(){
 		this.entries = this.menu;
 		this.$p.loadCategory(['ui', 'global'])
+		this.navUserDropdown = new bootstrap.Collapse(this.$refs.navUserDropdown,{
+			toggle: false
+		});
 	},
     template: /*html*/`
 	<!--<p>CISVUE HEADER</p>
@@ -80,7 +94,7 @@ export default {
 	<button id="nav-main-btn" class="navbar-toggler" 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>
-	<fhc-searchbar id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction" :selectedtypes="selectedtypes"></fhc-searchbar>
+	<fhc-searchbar @showSettings="toggleCollapsibles" ref="searchbar" id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction" :selectedtypes="selectedtypes"></fhc-searchbar>
     <a id="nav-logo" class="d-none d-md-block" :href="rootUrl">
         <img :src="logoUrl" alt="Logo">
     </a>
@@ -88,7 +102,7 @@ export default {
 		<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" class="avatar rounded-circle"/>
 		</button>
-		<ul id="nav-user-menu" class="collapse list-unstyled" aria-labelledby="nav-user-btn">
+		<ul ref="navUserDropdown" @[\`show.bs.collapse\`]="toggleCollapsibles('navUserDropdown')" 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 class="fhc-languages" style="text-align: center;">
 				<a class="btn btn-level-2 rounded-0" href="#" @click="handleChangeLanguage('German')">Deutsch</a>

public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js

@@ -73,7 +73,7 @@ export default {
 <div class="col-12 col-sm-6 mb-2">
 <div class="row justify-content-center">
       <div class="col-auto " style="position:relative">
-        <img class=" img-thumbnail " style=" max-height:150px; "  :src="get_image_base64_src"></img>
+        <img class=" img-thumbnail " style=" max-height:150px; "  :src="get_image_base64_src">
         <!-- LOCKING IMAGE FUNCTIONALITY -->
         
         

public/js/components/searchbar/searchbar.js

@@ -7,7 +7,7 @@ import prestudent from "./prestudent.js";
 
 export default {
     props: [ "searchoptions", "searchfunction","selectedtypes" ],
-    
+    emits: ['showSettings'],
     data: function() {
       return {
         searchtimer: null,
@@ -21,6 +21,7 @@ export default {
         showresult: false,  
         searching: false,
         error: null,
+		settingsDropdown:null,
       };
     },
     components: {
@@ -32,18 +33,18 @@ export default {
       prestudent: prestudent
     },
     template: /*html*/`
-          <form ref="searchform" class="d-flex me-3" action="javascript:void(0);" 
+          <form ref="searchform" class="d-flex me-3" action="javascript:void(0);"
             @focusin="this.searchfocusin" @focusout="this.searchfocusout">
-           
+
             <div class="h-100 input-group me-2 bg-white">
-           
-                <input ref="searchbox" @keyup="this.search" @focus="this.showsearchresult" 
-                    v-model="this.searchsettings.searchstr" class="form-control" 
+
+                <input ref="searchbox" @keyup="this.search" @focus="this.showsearchresult"
+                    v-model="this.searchsettings.searchstr" class="form-control"
                     type="search" :placeholder="'Search: '+ searchsettings.types.join(' / ')" aria-label="Search">
                 <button data-bs-toggle="collapse" data-bs-target="#searchSettings" aria-expanded="false" aria-controls="searchSettings" ref="settingsbutton"  class="btn btn-outline-secondary" type="button" id="search-filter"><i class="fas fa-cog"></i></button>
-            </div>            
-        
-            <div v-show="this.showresult" ref="result" 
+            </div>
+
+            <div v-show="this.showresult" ref="result"
                  class="searchbar_results" tabindex="-1">
               <div v-if="this.searching">
                 <i class="fas fa-spinner fa-spin fa-2x"></i>
@@ -61,7 +62,7 @@ export default {
               </template>
             </div>
 
-            <div id="searchSettings"  ref="settings" 
+            <div id="searchSettings"  ref="settings"  @[\`show.bs.collapse\`]="$emit('showSettings','settings')"
                  class="top-100 end-0 searchbar_settings text-white collapse" tabindex="-1">
               <div class="d-flex flex-column m-3" v-if="this.searchoptions.types.length > 0">
               <span class="fw-light mb-2">Suche filtern nach:</span>  
@@ -85,6 +86,11 @@ export default {
         this.updateSearchOptions();
         
     },
+	mounted(){
+		this.settingsDropdown = new bootstrap.Collapse(this.$refs.settings, {
+			toggle: false
+		});
+	},
     methods: {
         getActionsForRoom: function(res){
             res.booklink= FHC_JS_DATA_STORAGE_OBJECT.app_root +