mohadese namavar
51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<template>
|
|
<header class="header-mobile">
|
|
<div>
|
|
<Button v-if="h.back" v-bind="btns.back.props" @click="$router.go(-1)" />
|
|
<Button v-if="h.menu" v-bind="btns.menu.props" @click="sidebar.visible = true" />
|
|
<h2 v-if="h.title" v-text="h.title" />
|
|
<AppMobileSearchBox v-if="h.search" />
|
|
<span />
|
|
<template v-for="(opt, i) in h.options" :key="i">
|
|
<Button v-bind="opt.props" @click="opt.click" />
|
|
</template>
|
|
</div>
|
|
<AppMobileToolbar v-if="h.toolbar" />
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { btns, navigation } = inject('mobile')
|
|
const { sidebar } = inject('service')
|
|
const { mobile } = inject('config')
|
|
const h = computed(() => mobile.header)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header-mobile {
|
|
box-shadow: 0px 2px 20px #004b8224;
|
|
@apply w-full h-max bg-white shadow border-b pl-3 flex flex-col sticky top-0 z-10;
|
|
|
|
&>div {
|
|
@apply h-[3.3rem] flex items-center;
|
|
|
|
&>button {
|
|
@apply flex items-center text-[#292D32] shrink-0;
|
|
|
|
.p-button-icon {
|
|
@apply text-2xl;
|
|
}
|
|
}
|
|
|
|
&>h2{
|
|
@apply text-[#333333] text-sm font-medium font-vazir;
|
|
}
|
|
|
|
&>span {
|
|
@apply mr-auto;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</style> |