Added modal to menu
This commit is contained in:
@@ -0,0 +1,280 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type { NavHubDef } from '@/lib/nav-hubs';
|
||||
|
||||
defineProps<{
|
||||
hub: NavHubDef;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
go: [to: string];
|
||||
}>();
|
||||
|
||||
function onKey(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') emit('close');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="hub" role="dialog" aria-modal="true" :aria-label="hub.title">
|
||||
<header class="head">
|
||||
<div class="copy">
|
||||
<h1>{{ hub.title }}</h1>
|
||||
<p>{{ hub.desc }}</p>
|
||||
</div>
|
||||
<span class="head-ico" :class="hub.tint" aria-hidden="true">
|
||||
<UiIcon :name="hub.icon" :size="20" />
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="grid">
|
||||
<button
|
||||
v-for="card in hub.cards"
|
||||
:key="card.to + card.title"
|
||||
class="card"
|
||||
type="button"
|
||||
@click="emit('go', card.to)"
|
||||
>
|
||||
<span class="card-top">
|
||||
<span class="card-title">
|
||||
{{ card.title }}
|
||||
<UiIcon name="chevron" :size="13" class="go" />
|
||||
</span>
|
||||
<span class="card-ico" :class="card.tint" aria-hidden="true">
|
||||
<UiIcon :name="card.icon" :size="16" />
|
||||
</span>
|
||||
</span>
|
||||
<span class="card-desc">{{ card.desc }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="hub.shortcuts.length" class="quick">
|
||||
<span class="quick-label">دسترسی سریع</span>
|
||||
<div class="quick-row">
|
||||
<button
|
||||
v-for="item in hub.shortcuts"
|
||||
:key="item.to + item.title"
|
||||
class="quick-btn"
|
||||
type="button"
|
||||
@click="emit('go', item.to)"
|
||||
>
|
||||
<UiIcon :name="item.icon" :size="15" />
|
||||
{{ item.title }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hub {
|
||||
width: min(28rem, calc(100vw - var(--hub-offset, 16rem) - 1.5rem));
|
||||
max-height: calc(100dvh - 56px);
|
||||
overflow: hidden;
|
||||
padding: 0.9rem 0.9rem 0.8rem;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.7rem;
|
||||
border-radius: 28px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
padding: 0 0.15rem;
|
||||
}
|
||||
|
||||
.copy h1 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.copy p {
|
||||
margin: 0.15rem 0 0;
|
||||
color: #94a3b8;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.head-ico,
|
||||
.card-ico {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.head-ico {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.card-ico {
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
align-content: start;
|
||||
gap: 0.28rem;
|
||||
padding: 0.65rem 0.7rem 0.55rem;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
background: #f7f8fa;
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
color: #94a3b8;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.go {
|
||||
transform: scaleX(-1);
|
||||
color: #94a3b8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quick {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.quick-label {
|
||||
padding-inline: 0.15rem;
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.quick-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
min-height: 2.4rem;
|
||||
padding: 0.45rem 0.7rem;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf8;
|
||||
color: #0f766e;
|
||||
font: inherit;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quick-btn:hover {
|
||||
background: #d8faf3;
|
||||
}
|
||||
|
||||
.mint {
|
||||
background: #d8faf3;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.violet {
|
||||
background: #eee7ff;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.peach {
|
||||
background: #ffedd5;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.sky {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.rose {
|
||||
background: #fce7f3;
|
||||
color: #be185d;
|
||||
}
|
||||
|
||||
.amber {
|
||||
background: #fef3c7;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hub {
|
||||
width: 100%;
|
||||
max-height: min(86dvh, calc(100dvh - 3.5rem));
|
||||
overflow: auto;
|
||||
padding: 0.85rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
|
||||
border-radius: 24px 24px 0 0;
|
||||
box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.hub::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 2.6rem;
|
||||
height: 0.28rem;
|
||||
margin: 0 auto 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+135
-150
@@ -8,6 +8,8 @@ import UiIcon from '@/components/UiIcon.vue';
|
||||
import MentoLogo from '@/components/brand/MentoLogo.vue';
|
||||
import QuickCreate from '@/components/QuickCreate.vue';
|
||||
import BrandName from '@/components/brand/BrandName.vue';
|
||||
import NavHubPanel from '@/components/nav/NavHubPanel.vue';
|
||||
import { NAV_HUBS, type NavHubDef, type NavHubKey } from '@/lib/nav-hubs';
|
||||
import type {
|
||||
ActivitySummaryDto,
|
||||
NotificationDto,
|
||||
@@ -29,17 +31,10 @@ const todayLabel = computed(() => formatJalaliShort(new Date()));
|
||||
const SIDEBAR_KEY = 'mento_sidebar_collapsed';
|
||||
const collapsed = ref(false);
|
||||
|
||||
const customersOpen = ref(false);
|
||||
const salesOpen = ref(false);
|
||||
const activitiesOpen = ref(false);
|
||||
const supportOpen = ref(false);
|
||||
const toolsOpen = ref(false);
|
||||
const settingsOpen = ref(false);
|
||||
const openHubKey = ref<NavHubKey | null>(null);
|
||||
const globalSearch = ref('');
|
||||
const activityBadge = ref(0);
|
||||
|
||||
type FoldKey = 'customers' | 'sales' | 'activities' | 'support' | 'tools' | 'settings';
|
||||
|
||||
function pathIn(prefixes: string[]) {
|
||||
return prefixes.some(
|
||||
(p) => route.path === p || route.path.startsWith(`${p}/`),
|
||||
@@ -66,18 +61,16 @@ const settingsActive = computed(() =>
|
||||
'/settings/faq',
|
||||
]),
|
||||
);
|
||||
const peopleContactsActive = computed(
|
||||
() => customersActive.value && route.query.tab !== 'companies',
|
||||
);
|
||||
const companyContactsActive = computed(
|
||||
() => customersActive.value && route.query.tab === 'companies',
|
||||
);
|
||||
const myActivitiesActive = computed(
|
||||
() =>
|
||||
route.path === '/activities' ||
|
||||
route.path.startsWith('/activities/new') ||
|
||||
(route.path.startsWith('/activities/') && !route.path.startsWith('/activities/calendar')),
|
||||
);
|
||||
const openHub = computed<NavHubDef | null>(() => {
|
||||
if (!openHubKey.value) return null;
|
||||
const hub = NAV_HUBS.find((item) => item.key === openHubKey.value);
|
||||
if (!hub) return null;
|
||||
return {
|
||||
...hub,
|
||||
cards: hub.cards.filter((card) => !card.admin || canSettings.value),
|
||||
shortcuts: hub.shortcuts.filter((item) => !item.admin || canSettings.value),
|
||||
};
|
||||
});
|
||||
|
||||
function givenName(fullName: string): string {
|
||||
const parts = fullName.trim().split(/\s+/).filter(Boolean);
|
||||
@@ -115,37 +108,19 @@ watch([profileFullName, collapsed], () => {
|
||||
void fitProfileName();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (customersActive.value) customersOpen.value = true;
|
||||
if (salesActive.value) salesOpen.value = true;
|
||||
if (activitiesActive.value) activitiesOpen.value = true;
|
||||
if (supportActive.value) supportOpen.value = true;
|
||||
if (toolsActive.value) toolsOpen.value = true;
|
||||
if (settingsActive.value) settingsOpen.value = true;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function toggleFold(key: FoldKey) {
|
||||
if (key === 'customers') customersOpen.value = !customersOpen.value;
|
||||
if (key === 'sales') salesOpen.value = !salesOpen.value;
|
||||
if (key === 'activities') activitiesOpen.value = !activitiesOpen.value;
|
||||
if (key === 'support') supportOpen.value = !supportOpen.value;
|
||||
if (key === 'tools') toolsOpen.value = !toolsOpen.value;
|
||||
if (key === 'settings') settingsOpen.value = !settingsOpen.value;
|
||||
function closeHub() {
|
||||
openHubKey.value = null;
|
||||
}
|
||||
|
||||
function onFoldClick(key: FoldKey, fallback: string, event: Event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (collapsed.value) {
|
||||
void router.push(fallback);
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
toggleFold(key);
|
||||
function onHubClick(key: NavHubKey) {
|
||||
openHubKey.value = openHubKey.value === key ? null : key;
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
function goHub(to: string) {
|
||||
closeHub();
|
||||
closeMenu();
|
||||
void router.push(to);
|
||||
}
|
||||
|
||||
const menuOpen = ref(false);
|
||||
@@ -175,6 +150,7 @@ function closeNotif() {
|
||||
}
|
||||
|
||||
function onLogout() {
|
||||
closeHub();
|
||||
closeMenu();
|
||||
closeNotif();
|
||||
auth.logout();
|
||||
@@ -254,17 +230,19 @@ function submitSearch() {
|
||||
void router.push({ name: 'contacts', query: { q } });
|
||||
}
|
||||
|
||||
watch(menuOpen, (open) => {
|
||||
document.body.style.overflow = open || notifOpen.value ? 'hidden' : '';
|
||||
});
|
||||
watch(notifOpen, (open) => {
|
||||
document.body.style.overflow = open || menuOpen.value ? 'hidden' : '';
|
||||
});
|
||||
function syncBodyLock() {
|
||||
document.body.style.overflow =
|
||||
menuOpen.value || notifOpen.value || Boolean(openHubKey.value) ? 'hidden' : '';
|
||||
}
|
||||
watch(menuOpen, syncBodyLock);
|
||||
watch(notifOpen, syncBodyLock);
|
||||
watch(openHubKey, syncBodyLock);
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
closeMenu();
|
||||
closeNotif();
|
||||
closeHub();
|
||||
},
|
||||
);
|
||||
|
||||
@@ -295,7 +273,7 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="shell" :class="{ 'menu-open': menuOpen, collapsed }">
|
||||
<div class="shell" :class="{ 'menu-open': menuOpen, collapsed, 'hub-open': Boolean(openHub) }">
|
||||
<div v-if="menuOpen" class="backdrop" aria-hidden="true" @click="closeMenu" />
|
||||
|
||||
<aside id="app-sidebar" class="sidebar" :class="{ open: menuOpen, collapsed }">
|
||||
@@ -337,91 +315,55 @@ onUnmounted(() => {
|
||||
<div class="rail-stem">
|
||||
<nav class="side-nav">
|
||||
<div class="nav-primary">
|
||||
<RouterLink to="/" class="nav-item" title="داشبورد" @click="closeMenu">
|
||||
<RouterLink to="/" class="nav-item" title="داشبورد" @click="closeHub(); closeMenu()">
|
||||
<UiIcon name="home" :size="collapsed ? 20 : 18" />
|
||||
<span>داشبورد</span>
|
||||
</RouterLink>
|
||||
|
||||
<div class="nav-fold" :class="{ open: customersOpen, active: customersActive }">
|
||||
<div class="nav-fold" :class="{ active: customersActive || openHubKey === 'customers' }">
|
||||
<button
|
||||
class="nav-item nav-fold-btn"
|
||||
type="button"
|
||||
title="مشتریان"
|
||||
:class="{ 'router-link-active': customersActive }"
|
||||
:aria-expanded="customersOpen"
|
||||
@click="onFoldClick('customers', '/contacts', $event)"
|
||||
:class="{ 'router-link-active': customersActive || openHubKey === 'customers', 'hub-on': openHubKey === 'customers' }"
|
||||
:aria-expanded="openHubKey === 'customers'"
|
||||
@click="onHubClick('customers')"
|
||||
>
|
||||
<UiIcon name="users" :size="collapsed ? 20 : 18" />
|
||||
<span>مشتریان</span>
|
||||
<i class="chev" aria-hidden="true" />
|
||||
</button>
|
||||
<div v-show="customersOpen" class="nav-sub">
|
||||
<RouterLink
|
||||
to="/contacts"
|
||||
:class="{ 'router-link-active': peopleContactsActive }"
|
||||
@click="closeMenu"
|
||||
>اشخاص</RouterLink>
|
||||
<RouterLink
|
||||
to="/contacts?tab=companies"
|
||||
:class="{ 'router-link-active': companyContactsActive }"
|
||||
@click="closeMenu"
|
||||
>شرکتها</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-fold" :class="{ open: salesOpen, active: salesActive }">
|
||||
<div class="nav-fold" :class="{ active: salesActive || openHubKey === 'sales' }">
|
||||
<button
|
||||
class="nav-item nav-fold-btn"
|
||||
type="button"
|
||||
title="فروش"
|
||||
:class="{ 'router-link-active': salesActive }"
|
||||
:aria-expanded="salesOpen"
|
||||
@click="onFoldClick('sales', '/pipeline', $event)"
|
||||
:class="{ 'router-link-active': salesActive || openHubKey === 'sales', 'hub-on': openHubKey === 'sales' }"
|
||||
:aria-expanded="openHubKey === 'sales'"
|
||||
@click="onHubClick('sales')"
|
||||
>
|
||||
<UiIcon name="briefcase" :size="collapsed ? 20 : 18" />
|
||||
<span>فروش</span>
|
||||
<i class="chev" aria-hidden="true" />
|
||||
</button>
|
||||
<div v-show="salesOpen" class="nav-sub">
|
||||
<RouterLink
|
||||
to="/pipeline"
|
||||
:class="{ 'router-link-active': pathIn(['/pipeline', '/deals']) }"
|
||||
@click="closeMenu"
|
||||
>کاریز فروش / معاملات</RouterLink>
|
||||
<RouterLink to="/quotes" @click="closeMenu">پیشفاکتورها</RouterLink>
|
||||
<RouterLink to="/invoices" @click="closeMenu">فاکتورها</RouterLink>
|
||||
<RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
|
||||
<RouterLink
|
||||
v-if="canSettings"
|
||||
to="/settings/products"
|
||||
@click="closeMenu"
|
||||
>محصولات و خدمات</RouterLink>
|
||||
<RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیشبینی</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-fold" :class="{ open: activitiesOpen, active: activitiesActive }">
|
||||
<div class="nav-fold" :class="{ active: activitiesActive || openHubKey === 'activities' }">
|
||||
<button
|
||||
class="nav-item nav-fold-btn"
|
||||
type="button"
|
||||
title="فعالیتها"
|
||||
:class="{ 'router-link-active': activitiesActive }"
|
||||
:aria-expanded="activitiesOpen"
|
||||
@click="onFoldClick('activities', '/activities', $event)"
|
||||
:class="{ 'router-link-active': activitiesActive || openHubKey === 'activities', 'hub-on': openHubKey === 'activities' }"
|
||||
:aria-expanded="openHubKey === 'activities'"
|
||||
@click="onHubClick('activities')"
|
||||
>
|
||||
<UiIcon name="check" :size="collapsed ? 20 : 18" />
|
||||
<span>فعالیتها</span>
|
||||
<span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
|
||||
<i class="chev" aria-hidden="true" />
|
||||
</button>
|
||||
<div v-show="activitiesOpen" class="nav-sub">
|
||||
<RouterLink
|
||||
to="/activities"
|
||||
:class="{ 'router-link-active': myActivitiesActive }"
|
||||
@click="closeMenu"
|
||||
>فعالیتهای من</RouterLink>
|
||||
<RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیتها</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RouterLink
|
||||
@@ -429,35 +371,32 @@ onUnmounted(() => {
|
||||
class="nav-item"
|
||||
title="یادداشتها"
|
||||
:class="{ 'router-link-active': notesActive }"
|
||||
@click="closeMenu"
|
||||
@click="closeHub(); closeMenu()"
|
||||
>
|
||||
<UiIcon name="document" :size="collapsed ? 20 : 18" />
|
||||
<span>یادداشتها</span>
|
||||
</RouterLink>
|
||||
|
||||
<div class="nav-fold" :class="{ open: supportOpen, active: supportActive }">
|
||||
<div class="nav-fold" :class="{ active: supportActive || openHubKey === 'support' }">
|
||||
<button
|
||||
class="nav-item nav-fold-btn"
|
||||
type="button"
|
||||
title="پشتیبانی"
|
||||
:class="{ 'router-link-active': supportActive }"
|
||||
:aria-expanded="supportOpen"
|
||||
@click="onFoldClick('support', '/tickets', $event)"
|
||||
:class="{ 'router-link-active': supportActive || openHubKey === 'support', 'hub-on': openHubKey === 'support' }"
|
||||
:aria-expanded="openHubKey === 'support'"
|
||||
@click="onHubClick('support')"
|
||||
>
|
||||
<UiIcon name="chat" :size="collapsed ? 20 : 18" />
|
||||
<span>پشتیبانی</span>
|
||||
<i class="chev" aria-hidden="true" />
|
||||
</button>
|
||||
<div v-show="supportOpen" class="nav-sub">
|
||||
<RouterLink to="/tickets" @click="closeMenu">تیکتها</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RouterLink to="/loyalty" class="nav-item" title="باشگاه مشتریان" @click="closeMenu">
|
||||
<RouterLink to="/loyalty" class="nav-item" title="باشگاه مشتریان" @click="closeHub(); closeMenu()">
|
||||
<UiIcon name="gift" :size="collapsed ? 20 : 18" />
|
||||
<span>باشگاه مشتریان</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/reports" class="nav-item" title="گزارشها" @click="closeMenu">
|
||||
<RouterLink to="/reports" class="nav-item" title="گزارشها" @click="closeHub(); closeMenu()">
|
||||
<UiIcon name="chart" :size="collapsed ? 20 : 18" />
|
||||
<span>گزارشها</span>
|
||||
</RouterLink>
|
||||
@@ -467,7 +406,7 @@ onUnmounted(() => {
|
||||
class="nav-item"
|
||||
title="اتوماسیون"
|
||||
:class="{ 'router-link-active': automationsActive }"
|
||||
@click="closeMenu"
|
||||
@click="closeHub(); closeMenu()"
|
||||
>
|
||||
<UiIcon name="layers" :size="collapsed ? 20 : 18" />
|
||||
<span>اتوماسیون</span>
|
||||
@@ -477,61 +416,38 @@ onUnmounted(() => {
|
||||
<div class="nav-sep" aria-hidden="true" />
|
||||
|
||||
<div class="nav-utility">
|
||||
<div class="nav-fold" :class="{ open: toolsOpen, active: toolsActive }">
|
||||
<div class="nav-fold" :class="{ active: toolsActive || openHubKey === 'tools' }">
|
||||
<button
|
||||
class="nav-item nav-fold-btn"
|
||||
type="button"
|
||||
title="ابزارها"
|
||||
:class="{ 'router-link-active': toolsActive }"
|
||||
:aria-expanded="toolsOpen"
|
||||
@click="onFoldClick('tools', canSettings ? '/settings/lead-forms' : '/projects', $event)"
|
||||
:class="{ 'router-link-active': toolsActive || openHubKey === 'tools', 'hub-on': openHubKey === 'tools' }"
|
||||
:aria-expanded="openHubKey === 'tools'"
|
||||
@click="onHubClick('tools')"
|
||||
>
|
||||
<UiIcon name="apps-plus" :size="collapsed ? 20 : 18" />
|
||||
<span>ابزارها</span>
|
||||
<i class="chev" aria-hidden="true" />
|
||||
</button>
|
||||
<div v-show="toolsOpen" class="nav-sub">
|
||||
<RouterLink
|
||||
v-if="canSettings"
|
||||
to="/settings/lead-forms"
|
||||
@click="closeMenu"
|
||||
>فرمساز سرنخ</RouterLink>
|
||||
<RouterLink
|
||||
to="/projects"
|
||||
:class="{ 'router-link-active': pathIn(['/projects', '/project-cards']) }"
|
||||
@click="closeMenu"
|
||||
>کاریز پروژه</RouterLink>
|
||||
<RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
|
||||
<RouterLink to="/cheques" @click="closeMenu">چکها</RouterLink>
|
||||
<RouterLink to="/attachments" @click="closeMenu">پیوستها</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="canSettings"
|
||||
class="nav-fold"
|
||||
:class="{ open: settingsOpen, active: settingsActive }"
|
||||
:class="{ active: settingsActive || openHubKey === 'settings' }"
|
||||
>
|
||||
<button
|
||||
class="nav-item nav-fold-btn"
|
||||
type="button"
|
||||
title="تنظیمات"
|
||||
:class="{ 'router-link-active': settingsActive }"
|
||||
:aria-expanded="settingsOpen"
|
||||
@click="onFoldClick('settings', '/settings/team', $event)"
|
||||
:class="{ 'router-link-active': settingsActive || openHubKey === 'settings', 'hub-on': openHubKey === 'settings' }"
|
||||
:aria-expanded="openHubKey === 'settings'"
|
||||
@click="onHubClick('settings')"
|
||||
>
|
||||
<UiIcon name="settings" :size="collapsed ? 20 : 18" />
|
||||
<span>تنظیمات</span>
|
||||
<i class="chev" aria-hidden="true" />
|
||||
</button>
|
||||
<div v-show="settingsOpen" class="nav-sub">
|
||||
<RouterLink to="/settings/team#settings-org" @click="closeMenu">تنظیمات عمومی</RouterLink>
|
||||
<RouterLink to="/settings/team#settings-team" @click="closeMenu">تیم و نقشها</RouterLink>
|
||||
<RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
|
||||
<RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
|
||||
<RouterLink to="/settings/tahesab" @click="closeMenu">تنظیمات مالی / تهحساب</RouterLink>
|
||||
<RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -655,6 +571,11 @@ onUnmounted(() => {
|
||||
<RouterView />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div v-if="openHub" class="hub-layer">
|
||||
<button class="hub-dim" type="button" aria-label="بستن منو" @click="closeHub" />
|
||||
<NavHubPanel :hub="openHub" @close="closeHub" @go="goHub" />
|
||||
</div>
|
||||
<QuickCreate />
|
||||
</div>
|
||||
</template>
|
||||
@@ -664,6 +585,7 @@ onUnmounted(() => {
|
||||
--sidebar-card: 220px;
|
||||
--sidebar-gutter-start: 14px;
|
||||
--sidebar-gutter-end: 10px;
|
||||
--hub-offset: calc(var(--sidebar-card) + var(--sidebar-gutter-start));
|
||||
display: grid;
|
||||
grid-template-columns: calc(var(--sidebar-card) + var(--sidebar-gutter-start) + var(--sidebar-gutter-end)) minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
@@ -694,6 +616,7 @@ onUnmounted(() => {
|
||||
position: sticky;
|
||||
top: 14px;
|
||||
align-self: start;
|
||||
z-index: 20;
|
||||
height: calc(100dvh - 28px);
|
||||
margin: 14px;
|
||||
margin-inline-end: 10px;
|
||||
@@ -806,6 +729,45 @@ onUnmounted(() => {
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.shell.hub-open .nav-item.router-link-active:not(.hub-on) {
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shell.hub-open .nav-item.router-link-active:not(.hub-on) :deep(.ico) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.shell.hub-open .sidebar {
|
||||
z-index: 70;
|
||||
}
|
||||
|
||||
.hub-layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hub-dim {
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: rgba(15, 23, 42, 0.28);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.hub-layer :deep(.hub) {
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
inset-inline-start: var(--hub-offset);
|
||||
inset-inline-end: auto;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
margin-inline-start: auto;
|
||||
min-width: 1.35rem;
|
||||
@@ -858,13 +820,13 @@ onUnmounted(() => {
|
||||
height: 0.42rem;
|
||||
border-right: 1.6px solid currentColor;
|
||||
border-bottom: 1.6px solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
transform: rotate(135deg);
|
||||
transition: transform 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-fold.open > .nav-fold-btn .chev {
|
||||
transform: rotate(-135deg);
|
||||
.nav-fold-btn.hub-on .chev {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
@@ -1108,6 +1070,7 @@ onUnmounted(() => {
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.shell.collapsed {
|
||||
--hub-offset: 72px;
|
||||
grid-template-columns: 80px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
@@ -1650,6 +1613,28 @@ onUnmounted(() => {
|
||||
box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.hub-layer {
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
.hub-layer :deep(.hub) {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
inset-inline: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
animation: hub-sheet-up 0.28s ease;
|
||||
}
|
||||
|
||||
@keyframes hub-sheet-up {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem 0.85rem 1.4rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,296 @@
|
||||
export type NavHubKey =
|
||||
| 'customers'
|
||||
| 'sales'
|
||||
| 'activities'
|
||||
| 'support'
|
||||
| 'tools'
|
||||
| 'settings';
|
||||
|
||||
export type NavIconName =
|
||||
| 'users'
|
||||
| 'user'
|
||||
| 'building'
|
||||
| 'briefcase'
|
||||
| 'filter'
|
||||
| 'document'
|
||||
| 'box'
|
||||
| 'mail'
|
||||
| 'dollar'
|
||||
| 'target'
|
||||
| 'check'
|
||||
| 'calendar'
|
||||
| 'chat'
|
||||
| 'apps-plus'
|
||||
| 'layers'
|
||||
| 'flag'
|
||||
| 'settings'
|
||||
| 'pencil'
|
||||
| 'chart'
|
||||
| 'lightbulb'
|
||||
| 'plus'
|
||||
| 'user-plus';
|
||||
|
||||
export type NavHubTint = 'mint' | 'violet' | 'peach' | 'sky' | 'rose' | 'amber';
|
||||
|
||||
export type NavHubCard = {
|
||||
to: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
icon: NavIconName;
|
||||
tint: NavHubTint;
|
||||
admin?: boolean;
|
||||
};
|
||||
|
||||
export type NavHubShortcut = {
|
||||
to: string;
|
||||
title: string;
|
||||
icon: NavIconName;
|
||||
admin?: boolean;
|
||||
};
|
||||
|
||||
export type NavHubDef = {
|
||||
key: NavHubKey;
|
||||
title: string;
|
||||
desc: string;
|
||||
icon: NavIconName;
|
||||
tint: NavHubTint;
|
||||
cards: NavHubCard[];
|
||||
shortcuts: NavHubShortcut[];
|
||||
};
|
||||
|
||||
export const NAV_HUBS: NavHubDef[] = [
|
||||
{
|
||||
key: 'customers',
|
||||
title: 'مشتریان',
|
||||
desc: 'اشخاص، شرکتها و پروندههای ارتباطی',
|
||||
icon: 'users',
|
||||
tint: 'mint',
|
||||
shortcuts: [
|
||||
{ to: '/contacts/people/new', title: 'شخص جدید', icon: 'user-plus' },
|
||||
{ to: '/contacts/companies/new', title: 'شرکت جدید', icon: 'building' },
|
||||
],
|
||||
cards: [
|
||||
{
|
||||
to: '/contacts',
|
||||
title: 'اشخاص',
|
||||
desc: 'مخاطبان حقیقی و پروندههای مشتری',
|
||||
icon: 'user',
|
||||
tint: 'mint',
|
||||
},
|
||||
{
|
||||
to: '/contacts?tab=companies',
|
||||
title: 'شرکتها',
|
||||
desc: 'سازمانها و مشتریان حقوقی',
|
||||
icon: 'building',
|
||||
tint: 'violet',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'sales',
|
||||
title: 'فروش',
|
||||
desc: 'مدیریت چرخه فروش و درآمد',
|
||||
icon: 'briefcase',
|
||||
tint: 'mint',
|
||||
shortcuts: [
|
||||
{ to: '/deals/new', title: 'معامله جدید', icon: 'plus' },
|
||||
{ to: '/quotes/new', title: 'پیشفاکتور جدید', icon: 'document' },
|
||||
],
|
||||
cards: [
|
||||
{
|
||||
to: '/pipeline',
|
||||
title: 'کاریز فروش',
|
||||
desc: 'سرنخها، معاملات و مراحل فروش',
|
||||
icon: 'filter',
|
||||
tint: 'mint',
|
||||
},
|
||||
{
|
||||
to: '/settings/products',
|
||||
title: 'محصولات و خدمات',
|
||||
desc: 'مدیریت محصولات، قیمتها و موجودی',
|
||||
icon: 'box',
|
||||
tint: 'peach',
|
||||
admin: true,
|
||||
},
|
||||
{
|
||||
to: '/invoices',
|
||||
title: 'فاکتورها',
|
||||
desc: 'صدور فاکتور و پیگیری پرداختها',
|
||||
icon: 'mail',
|
||||
tint: 'sky',
|
||||
},
|
||||
{
|
||||
to: '/quotes',
|
||||
title: 'پیشفاکتورها',
|
||||
desc: 'پیشنهاد قیمت و پیگیری تایید',
|
||||
icon: 'document',
|
||||
tint: 'amber',
|
||||
},
|
||||
{
|
||||
to: '/commissions',
|
||||
title: 'پورسانت',
|
||||
desc: 'سهم فروشندگان از فاکتورهای صادرشده',
|
||||
icon: 'dollar',
|
||||
tint: 'rose',
|
||||
},
|
||||
{
|
||||
to: '/sales/forecast',
|
||||
title: 'هدف و پیشبینی',
|
||||
desc: 'تعیین اهداف و تحلیل عملکرد فروش',
|
||||
icon: 'target',
|
||||
tint: 'mint',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'activities',
|
||||
title: 'فعالیتها',
|
||||
desc: 'کارها، تماسها و برنامهریزی روزانه',
|
||||
icon: 'check',
|
||||
tint: 'sky',
|
||||
shortcuts: [
|
||||
{ to: '/activities/new', title: 'فعالیت جدید', icon: 'plus' },
|
||||
{ to: '/activities/calendar', title: 'تقویم', icon: 'calendar' },
|
||||
],
|
||||
cards: [
|
||||
{
|
||||
to: '/activities',
|
||||
title: 'فعالیتهای من',
|
||||
desc: 'کارها، تماسها و پیگیریهای جاری',
|
||||
icon: 'check',
|
||||
tint: 'mint',
|
||||
},
|
||||
{
|
||||
to: '/activities/calendar',
|
||||
title: 'تقویم فعالیتها',
|
||||
desc: 'نمای روز، هفته و زمانبندی کارها',
|
||||
icon: 'calendar',
|
||||
tint: 'violet',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'support',
|
||||
title: 'پشتیبانی',
|
||||
desc: 'درخواستها و گفتگو با مشتری',
|
||||
icon: 'chat',
|
||||
tint: 'peach',
|
||||
shortcuts: [
|
||||
{ to: '/tickets/new', title: 'تیکت جدید', icon: 'plus' },
|
||||
{ to: '/tickets', title: 'تیکتها', icon: 'chat' },
|
||||
],
|
||||
cards: [
|
||||
{
|
||||
to: '/tickets',
|
||||
title: 'تیکتها',
|
||||
desc: 'درخواستها و پیامهای پشتیبانی',
|
||||
icon: 'chat',
|
||||
tint: 'peach',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'tools',
|
||||
title: 'ابزارها',
|
||||
desc: 'فرمها، پروژه، انبار و اسناد مالی',
|
||||
icon: 'apps-plus',
|
||||
tint: 'violet',
|
||||
shortcuts: [
|
||||
{ to: '/project-cards/new', title: 'کارت پروژه جدید', icon: 'plus' },
|
||||
{ to: '/cheques', title: 'ثبت چک', icon: 'document' },
|
||||
],
|
||||
cards: [
|
||||
{
|
||||
to: '/settings/lead-forms',
|
||||
title: 'فرمساز سرنخ',
|
||||
desc: 'فرم عمومی برای جذب سرنخ تازه',
|
||||
icon: 'layers',
|
||||
tint: 'mint',
|
||||
admin: true,
|
||||
},
|
||||
{
|
||||
to: '/projects',
|
||||
title: 'کاریز پروژه',
|
||||
desc: 'کارتها و مراحل اجرای کار',
|
||||
icon: 'flag',
|
||||
tint: 'violet',
|
||||
},
|
||||
{
|
||||
to: '/inventory',
|
||||
title: 'انبار',
|
||||
desc: 'موجودی کالا و گردش داخلی',
|
||||
icon: 'box',
|
||||
tint: 'peach',
|
||||
},
|
||||
{
|
||||
to: '/cheques',
|
||||
title: 'چکها',
|
||||
desc: 'چکهای دریافتی و پرداختی',
|
||||
icon: 'document',
|
||||
tint: 'sky',
|
||||
},
|
||||
{
|
||||
to: '/attachments',
|
||||
title: 'پیوستها',
|
||||
desc: 'فایلهای متصل به یادداشتها',
|
||||
icon: 'document',
|
||||
tint: 'amber',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'settings',
|
||||
title: 'تنظیمات',
|
||||
desc: 'سازمان، تیم و پیکربندی سیستم',
|
||||
icon: 'settings',
|
||||
tint: 'sky',
|
||||
shortcuts: [
|
||||
{ to: '/settings/team#settings-team', title: 'تیم و نقشها', icon: 'users' },
|
||||
{ to: '/settings/tahesab', title: 'تهحساب', icon: 'chart' },
|
||||
],
|
||||
cards: [
|
||||
{
|
||||
to: '/settings/team#settings-org',
|
||||
title: 'تنظیمات عمومی',
|
||||
desc: 'نام سازمان و تنظیمات پایه',
|
||||
icon: 'building',
|
||||
tint: 'mint',
|
||||
},
|
||||
{
|
||||
to: '/settings/team#settings-team',
|
||||
title: 'تیم و نقشها',
|
||||
desc: 'اعضا، دسترسی و نقشها',
|
||||
icon: 'users',
|
||||
tint: 'violet',
|
||||
},
|
||||
{
|
||||
to: '/settings/custom-fields',
|
||||
title: 'فیلدهای سفارشی',
|
||||
desc: 'فیلدهای اضافه روی پروندهها',
|
||||
icon: 'pencil',
|
||||
tint: 'peach',
|
||||
},
|
||||
{
|
||||
to: '/settings/currencies',
|
||||
title: 'ارزها',
|
||||
desc: 'ارز پایه و نرخ تبدیل',
|
||||
icon: 'dollar',
|
||||
tint: 'sky',
|
||||
},
|
||||
{
|
||||
to: '/settings/tahesab',
|
||||
title: 'تهحساب',
|
||||
desc: 'اتصال مالی و تنظیمات حسابداری',
|
||||
icon: 'chart',
|
||||
tint: 'amber',
|
||||
},
|
||||
{
|
||||
to: '/settings/faq',
|
||||
title: 'FAQ',
|
||||
desc: 'پرسشهای پرتکرار سازمان',
|
||||
icon: 'lightbulb',
|
||||
tint: 'rose',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -442,6 +442,10 @@ h2 {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.rules ul:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rules li {
|
||||
border: 1px solid #e8eef3;
|
||||
border-radius: 14px;
|
||||
@@ -599,7 +603,14 @@ h2 {
|
||||
|
||||
.rules {
|
||||
grid-area: rules;
|
||||
height: 100%;
|
||||
/* Let the toolbar set the row height; don't let the rules card grow it. */
|
||||
height: 0;
|
||||
min-height: 100%;
|
||||
padding: 0.85rem 1rem;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
gap: 0.35rem;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.studio {
|
||||
|
||||
Reference in New Issue
Block a user