148 lines
3.7 KiB
Vue
148 lines
3.7 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import NavbarItem from "./NavbarItem.vue";
|
|
import NavbarBuilding from "./NavbarBuilding.vue";
|
|
import Logo from "@/assets/img/logo.svg";
|
|
import useUserInfoStore from "@/stores/useUserInfoStore";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
|
|
import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";
|
|
import NavbarLang from "./NavbarLang.vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const user = ref("");
|
|
const menuShow = ref(true);
|
|
const router = useRouter();
|
|
|
|
const store = useUserInfoStore();
|
|
const storeBuilding = useBuildingStore();
|
|
onMounted(() => {
|
|
const name = store.user.user_name;
|
|
if (name) {
|
|
user.value = name;
|
|
}
|
|
});
|
|
|
|
const toggleMenu = () => {
|
|
menuShow.value = !menuShow.value;
|
|
};
|
|
|
|
const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
|
|
|
|
const logout = () => {
|
|
document.cookie = "JWT-Authorization=; Max-Age=0";
|
|
document.cookie = "user_name=; Max-Age=0";
|
|
store.user.token = "";
|
|
store.user.user_name = "";
|
|
storeBuilding.deleteBuilding();
|
|
router.push({ path: "/login" });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<header class="navbar bg-dark text-light-info w-full relative z-50">
|
|
<div class="navbar-start min-w-[480px] lg:min-w-[440px]">
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="btn btn-ghost lg:hidden"
|
|
@click="toggleMenu"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h8m-8 6h16"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<router-link
|
|
to="/dashboard"
|
|
class="rounded-lg pl-4 text-2xl font-bold text-white flex items-center"
|
|
>
|
|
<img :src="src" alt="logo" class="w-8 me-1" />
|
|
CviLux Group
|
|
</router-link>
|
|
<NavbarBuilding />
|
|
</div>
|
|
|
|
<div
|
|
:class="
|
|
twMerge(
|
|
'navbar-center flex absolute lg:relative top-full bg-dark',
|
|
menuShow ? 'block' : 'hidden'
|
|
)
|
|
"
|
|
>
|
|
<NavbarItem />
|
|
</div>
|
|
<div class="navbar-end mr-4">
|
|
<ul class="left-menu">
|
|
<li>
|
|
<NavbarLang />
|
|
</li>
|
|
<li>
|
|
<AlarmDrawer />
|
|
</li>
|
|
<li>
|
|
<div class="dropdown dropdown-bottom dropdown-end">
|
|
<button
|
|
tabindex="0"
|
|
type="link"
|
|
class="flex flex-col justify-center items-center btn-group"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', 'user-circle']"
|
|
size="2x"
|
|
class="text-white w-10 m-auto"
|
|
/>
|
|
<span class="text-white"> {{ user || "webUser" }}</span>
|
|
</button>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
|
|
>
|
|
<li class="text-white">
|
|
<a
|
|
href="#"
|
|
@click.prevent="logout"
|
|
class="flex flex-col justify-center items-center"
|
|
>{{ $t("sign_out") }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="css">
|
|
.sub-drawer {
|
|
@apply bg-dark bg-opacity-90 shadow-xl !important;
|
|
}
|
|
|
|
.left-menu {
|
|
@apply flex flex-wrap justify-center relative z-0;
|
|
}
|
|
|
|
.left-menu > li {
|
|
@apply relative;
|
|
}
|
|
|
|
.left-menu > li:not(:last-child)::after {
|
|
@apply absolute top-5 bottom-0 left-20 right-0 block w-6 h-0.5 bg-[#93c0dc] z-0;
|
|
content: "";
|
|
}
|
|
</style>
|