108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
<template>
|
|
<header>
|
|
<nav class="navbar-main d-flex align-items-center bg-light border-bottom">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-6 d-flex align-items-center">
|
|
<div
|
|
v-if="statusFavoriteMenu"
|
|
class="show-menu"
|
|
@click="closeMenu(false)"
|
|
ref="ShowMenu"
|
|
>
|
|
<svg class="icon icon-Component-158--5">
|
|
<use xlink:href="#icon-Component-158--5"></use>
|
|
</svg>
|
|
</div>
|
|
|
|
<ul class="navbar-nav mr-3" style="width: 6em">
|
|
<li class="nav-item dropdown">
|
|
<a
|
|
class="nav-link dropdown-toggle"
|
|
id="navbarDropdown"
|
|
role="button"
|
|
data-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
{{ $t("Systems") }}
|
|
</a>
|
|
<div
|
|
class="favorite-dropdown-menu dropdown-menu"
|
|
aria-labelledby="navbarDropdown"
|
|
style="z-index: 99999"
|
|
>
|
|
<my-system class="list" layout="list"></my-system>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 d-flex justify-content-end">
|
|
<ul class="navbar-nav ml-md-3 mr-auto d-flex flex-row">
|
|
<li class="nav-item">
|
|
<select-language-dropdown
|
|
toggleClass="dropdown-toggle"
|
|
></select-language-dropdown>
|
|
</li>
|
|
<li class="nav-item mr-3">
|
|
<user-avatar-dropdown
|
|
class="position-static"
|
|
></user-avatar-dropdown>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
<script>
|
|
import { mapState, mapActions } from "pinia";
|
|
import favoriteApi from "~/apis/favoriteApi";
|
|
|
|
export default {
|
|
props: ["statusFavoriteMenu"],
|
|
beforeMount() {
|
|
this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
|
|
},
|
|
|
|
|
|
data() {
|
|
return {
|
|
httpService: undefined,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
closeMenu(item) {
|
|
this.$emit("closeMenu", item);
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
<style lang="scss" >
|
|
.favorite-dropdown-menu{
|
|
left: -19px !important;
|
|
}
|
|
.navbar-main {
|
|
height: 4em;
|
|
margin-right: 4.5em;
|
|
}
|
|
.show-menu {
|
|
width: 2em;
|
|
height: 2em !important;
|
|
border-radius: 26%;
|
|
// background-color: red;
|
|
// margin-top: 1em;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media only screen and (max-width: 767.98px) {
|
|
.navbar-main {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
</style>
|