mohadese namavar
84 lines
2.4 KiB
Vue
84 lines
2.4 KiB
Vue
<template>
|
|
<nav class="panel-toolbar">
|
|
<ul>
|
|
<li v-for="(item, i) in menu" :key="i">
|
|
<router-link :to="item.url" v-if="i < 7 || user.profile.confirmToSales">
|
|
<Button v-bind="getBind(item)" @click="toFloat(i)" />
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
<span ref="selector" />
|
|
<Button v-bind="logoutBtn.props" @click="logout()" />
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from '../../initialize/panelToolbar.js'
|
|
const { menu, logoutBtn, getBind, floating } = init()
|
|
|
|
const route = useRoute()
|
|
const selector = ref()
|
|
|
|
const { dialog } = inject('service')
|
|
const logout = () => dialog.show(resolveComponent('PanelDialogLogout'))
|
|
|
|
const toFloat = (index = menu.findIndex((item) => item.url == route.path)) => {
|
|
try {
|
|
floating(menu, selector, index ??= 7)
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
const user = useUserStore()
|
|
user.get()
|
|
|
|
watch(() => route.path, () => toFloat())
|
|
onMounted(() => toFloat())
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.panel-toolbar {
|
|
@apply w-full container bg-[#FAFAFA] rounded-[0.6rem] border-2 border-[#E5E5E5];
|
|
@apply flex flex-wrap items-center justify-between mx-auto px-2 xl:px-4 2xl:px-6 xl:py-2 2xl:py-4 relative mt-10;
|
|
|
|
ul {
|
|
@apply flex xl:gap-4 2xl:gap-[1.1rem] overflow-hidden;
|
|
|
|
li {
|
|
button {
|
|
@apply h-10 py-1.5 justify-end overflow-visible whitespace-nowrap px-3 xl:px-3.5 2xl:px-4;
|
|
|
|
.p-button-icon {
|
|
@apply text-[#7F7F7F] lg:text-lg xl:text-xl 2xl:text-2xl 2xl:ml-2;
|
|
}
|
|
|
|
.p-button-label {
|
|
@apply text-[#7F7F7F] lg:text-sm xl:text-base 2xl:text-lg font-medium font-vazir grow-0;
|
|
}
|
|
|
|
&[active] * {
|
|
@apply text-primary-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply h-10 xl:h-12 2xl:h-[3.7rem] bg-[#F2F2F2] hover:bg-[#eaeaea] active:bg-[#d8d8d8] px-3 xl:px-4 2xl:px-5 mr-auto #{!important};
|
|
|
|
.p-button-icon {
|
|
@apply text-[#AD3434] lg:text-base xl:text-lg 2xl:text-2xl xl:ml-4;
|
|
}
|
|
|
|
.p-button-label {
|
|
@apply text-[#AD3434] lg:text-sm xl:text-base 2xl:text-lg font-medium font-vazir grow-0;
|
|
}
|
|
}
|
|
|
|
&>span {
|
|
@apply content-['_'] right-6 h-1 rounded-full bg-primary-600 absolute -bottom-[0.2rem];
|
|
@apply transition-['right'] duration-200;
|
|
}
|
|
}
|
|
</style>
|