Mahdi/CRM_Montzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added modal to menu

Browse Source
This commit is contained in:
Mahdi
2026-09-11 17:37:24 +03:30
parent 103e9b1c50
commit bd63d2ab76
4 changed files with 723 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/layouts/AppLayout.vue
+135 -150
View File
@@ -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;
}