58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
 
|
<script setup lang="ts">
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
|
||
|
|
const route = useRoute();
|
||
|
|
const links = [
|
||
|
|
{ to: '/finance', label: 'داشبورد', exact: true },
|
||
|
|
{ to: '/finance/incomes', label: 'دریافتها و درآمدها' },
|
||
|
|
{ to: '/finance/expenses', label: 'پرداختها و هزینهها' },
|
||
|
|
{ to: '/finance/receivables', label: 'اقساط و مطالبات' },
|
||
|
|
{ to: '/finance/accounts', label: 'صندوق و حسابها' },
|
||
|
|
{ to: '/finance/payroll', label: 'حقوق' },
|
||
|
|
{ to: '/finance/recurring', label: 'تکرارشونده' },
|
||
|
|
{ to: '/finance/reports', label: 'گزارش' },
|
||
|
|
{ to: '/finance/categories', label: 'دستهبندیها' },
|
||
|
|
];
|
||
|
|
|
||
|
|
function on(path: string, exact?: boolean) {
|
||
|
|
if (exact) return route.path === path;
|
||
|
|
return route.path === path || route.path.startsWith(`${path}/`);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<nav class="treasury-nav" aria-label="مدیریت مالی">
|
||
|
|
<RouterLink
|
||
|
|
v-for="link in links"
|
||
|
|
:key="link.to"
|
||
|
|
:to="link.to"
|
||
|
|
:class="{ on: on(link.to, link.exact) }"
|
||
|
|
>
|
||
|
|
{{ link.label }}
|
||
|
|
</RouterLink>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.treasury-nav {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.35rem;
|
||
|
|
overflow: auto;
|
||
|
|
padding-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
.treasury-nav a {
|
||
|
|
flex: 0 0 auto;
|
||
|
|
border-radius: 999px;
|
||
|
|
padding: 0.4rem 0.8rem;
|
||
|
|
color: #475569;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 0.86rem;
|
||
|
|
background: #f8fafc;
|
||
|
|
}
|
||
|
|
.treasury-nav a.on {
|
||
|
|
background: #0f766e;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|