56 lines
2.5 KiB
Vue
56 lines
2.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useGlobalStore } from '../../store/Global';
|
|
import UiInput from '../ui/UiInput.vue';
|
|
import ArrowDownSvg from '../svg/arrowDown.svg';
|
|
import GlobalSvg from '../svg/global.svg';
|
|
const globalStore = useGlobalStore();
|
|
|
|
const toggleSidebar = () => {
|
|
globalStore.sidebarOpen = !globalStore.sidebarOpen;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<header class="grid items-center
|
|
shadow-client-gray/10 grid-cols-2a pe-4 justify-between !ps-[16rem] max-sm:!ps-4 fixed top-0 left-0 right-0 z-20 w-full h-[4.5rem] bg-white">
|
|
<div class="grid grid-cols-2a justify-start items-center gap-4">
|
|
<div class="grid grid-cols-1 max-sm:!grid-cols-2a justify-start items-center">
|
|
<Button
|
|
icon="fi-rr-menu-burger"
|
|
class="!hidden !invisible !px-0 !w-0 !h-0 max-sm:!w-10 max-sm:!h-10 max-sm:!visible max-sm:!block items-center !border-dominant-50"
|
|
pt:icon="flex !text-dominant-300 justify-center items-center"
|
|
variant="outlined"
|
|
size="large"
|
|
@click="toggleSidebar"
|
|
/>
|
|
|
|
</div>
|
|
<div class="grid grid-cols-1 h-[4rem] content-center justify-start items-center">
|
|
<UiInput
|
|
placeholder="جستجو سریع: نام سرپرست، نام حیوان و یا شماره پرونده"
|
|
variant="outlined"
|
|
prefixClasses="!border-dominant-50"
|
|
class="!w-[30rem] max-lg:!w-[22rem] max-md:!w-[26rem] max-sm:!w-[15rem] max-xs:!w-[14rem]"
|
|
prefixColor="dominant-700"
|
|
iconStart="svg:SearchSvg"
|
|
wrapperBorderClass="!border-dominant-50"
|
|
customClass="placeholder:!text-dominant-300 !border-dominant-50 !font-normal !text-[11px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="flex items-center justify-center border-l-[1px] !border-dominant-50 pl-4">
|
|
<GlobalSvg />
|
|
</div>
|
|
<div class="grid grid-cols-2a justify-start items-center gap-2">
|
|
<span class="text-dominant-300 text-[12px] font-normal">
|
|
{{ globalStore.current_user.fullname }}
|
|
</span>
|
|
<ArrowDownSvg class="!w-4 !h-4 flex -mt-0.5"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|