update: combine menu and sidebar paths
This commit is contained in:
@@ -4,93 +4,10 @@ import { useUserProfileStore } from "../context/zustand-store/userStore";
|
||||
import { getFaPermissions } from "../utils/getFaPermissions";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
UsersIcon,
|
||||
DocumentTextIcon,
|
||||
ChartBarIcon,
|
||||
ChevronDownIcon,
|
||||
UserIcon,
|
||||
GlobeAsiaAustraliaIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { ItemWithSubItems } from "../types/userPermissions";
|
||||
import { checkMenuPermission } from "../utils/checkMenuPermission";
|
||||
|
||||
const getInspectionMenuItems = (
|
||||
permissions: string[] = []
|
||||
): ItemWithSubItems[] => {
|
||||
const items: ItemWithSubItems[] = [];
|
||||
|
||||
if (checkMenuPermission("nationalinfo", permissions)) {
|
||||
items.push({
|
||||
en: "nationalinfo",
|
||||
fa: "اطلاعات",
|
||||
icon: () => <UserIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "nationalinfo",
|
||||
path: "/nationalinfo",
|
||||
component: () => import("./NationalInfo"),
|
||||
},
|
||||
{
|
||||
name: "ladinginfo",
|
||||
path: "/ladinginfo",
|
||||
component: () => import("./LadingInfo"),
|
||||
},
|
||||
{
|
||||
name: "veterinarytransfer",
|
||||
path: "/veterinarytransfer",
|
||||
component: () => import("./VeterinaryTransfer"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("users", permissions)) {
|
||||
items.push({
|
||||
en: "users",
|
||||
fa: "کاربران",
|
||||
icon: () => <UsersIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "users",
|
||||
path: "/users",
|
||||
component: () => import("./Users"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("inspections", permissions)) {
|
||||
items.push({
|
||||
en: "inspections",
|
||||
fa: "سوابق بازرسی",
|
||||
icon: () => <DocumentTextIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "inspections",
|
||||
path: "/inspections",
|
||||
component: () => import("./UserInspections"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("statics", permissions)) {
|
||||
items.push({
|
||||
en: "statics",
|
||||
fa: "آمار",
|
||||
icon: () => <ChartBarIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "statics",
|
||||
path: "/statics",
|
||||
component: () => import("./Statics"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
import { getInspectionMenuItems } from "../config/menuItems";
|
||||
|
||||
export const Menu = () => {
|
||||
const { profile } = useUserProfileStore();
|
||||
|
||||
86
src/config/menuItems.tsx
Normal file
86
src/config/menuItems.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import {
|
||||
UsersIcon,
|
||||
DocumentTextIcon,
|
||||
ChartBarIcon,
|
||||
UserIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { ItemWithSubItems } from "../types/userPermissions";
|
||||
import { checkMenuPermission } from "../utils/checkMenuPermission";
|
||||
|
||||
export const getInspectionMenuItems = (
|
||||
permissions: string[] = [],
|
||||
): ItemWithSubItems[] => {
|
||||
const items: ItemWithSubItems[] = [];
|
||||
|
||||
if (checkMenuPermission("nationalinfo", permissions)) {
|
||||
items.push({
|
||||
en: "nationalinfo",
|
||||
fa: "اطلاعات",
|
||||
icon: () => <UserIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "nationalinfo",
|
||||
path: "/nationalinfo",
|
||||
component: () => import("../Pages/NationalInfo"),
|
||||
},
|
||||
{
|
||||
name: "ladinginfo",
|
||||
path: "/ladinginfo",
|
||||
component: () => import("../Pages/LadingInfo"),
|
||||
},
|
||||
{
|
||||
name: "veterinarytransfer",
|
||||
path: "/veterinarytransfer",
|
||||
component: () => import("../Pages/VeterinaryTransfer"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("users", permissions)) {
|
||||
items.push({
|
||||
en: "users",
|
||||
fa: "کاربران",
|
||||
icon: () => <UsersIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "users",
|
||||
path: "/users",
|
||||
component: () => import("../Pages/Users"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("inspections", permissions)) {
|
||||
items.push({
|
||||
en: "inspections",
|
||||
fa: "سوابق بازرسی",
|
||||
icon: () => <DocumentTextIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "inspections",
|
||||
path: "/inspections",
|
||||
component: () => import("../Pages/UserInspections"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("statics", permissions)) {
|
||||
items.push({
|
||||
en: "statics",
|
||||
fa: "آمار",
|
||||
icon: () => <ChartBarIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "statics",
|
||||
path: "/statics",
|
||||
component: () => import("../Pages/Statics"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
@@ -4,21 +4,16 @@ import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/solid";
|
||||
import { useUserProfileStore } from "../context/zustand-store/userStore";
|
||||
import { ItemWithSubItems } from "../types/userPermissions";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { getFaPermissions } from "../utils/getFaPermissions";
|
||||
import { useSideBarStore } from "../context/zustand-store/appStore";
|
||||
import SVGImage from "../components/SvgImage/SvgImage";
|
||||
import { checkMenuPermission } from "../utils/checkMenuPermission";
|
||||
import { getInspectionMenuItems } from "../config/menuItems";
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
MagnifyingGlassIcon,
|
||||
BuildingOfficeIcon,
|
||||
UsersIcon,
|
||||
DocumentTextIcon,
|
||||
ChartBarIcon,
|
||||
UserIcon,
|
||||
GlobeAsiaAustraliaIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
@@ -69,91 +64,10 @@ const sidebarVariants = {
|
||||
},
|
||||
};
|
||||
|
||||
export const getInspectionMenuItems = (
|
||||
permissions: string[] = []
|
||||
): ItemWithSubItems[] => {
|
||||
const items: ItemWithSubItems[] = [];
|
||||
|
||||
if (checkMenuPermission("nationalinfo", permissions)) {
|
||||
items.push({
|
||||
en: "nationalinfo",
|
||||
fa: "اطلاعات",
|
||||
icon: () => <UserIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "nationalinfo",
|
||||
path: "/nationalinfo",
|
||||
component: () => import("../Pages/NationalInfo"),
|
||||
},
|
||||
|
||||
{
|
||||
name: "ladinginfo",
|
||||
path: "/ladinginfo",
|
||||
component: () => import("../Pages/LadingInfo"),
|
||||
},
|
||||
{
|
||||
name: "veterinarytransfer",
|
||||
path: "/veterinarytransfer",
|
||||
component: () => import("../Pages/VeterinaryTransfer"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("users", permissions)) {
|
||||
items.push({
|
||||
en: "users",
|
||||
fa: "کاربران",
|
||||
icon: () => <UsersIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "users",
|
||||
path: "/users",
|
||||
component: () => import("../Pages/Users"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("inspections", permissions)) {
|
||||
items.push({
|
||||
en: "inspections",
|
||||
fa: "سوابق بازرسی",
|
||||
icon: () => <DocumentTextIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "inspections",
|
||||
path: "/inspections",
|
||||
component: () => import("../Pages/UserInspections"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (checkMenuPermission("statics", permissions)) {
|
||||
items.push({
|
||||
en: "statics",
|
||||
fa: "آمار",
|
||||
icon: () => <ChartBarIcon className="w-6 h-6" />,
|
||||
subItems: [
|
||||
{
|
||||
name: "statics",
|
||||
path: "/statics",
|
||||
component: () => import("../Pages/Statics"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
export const SideBar = () => {
|
||||
const isMobile = checkIsMobile();
|
||||
const { profile } = useUserProfileStore();
|
||||
const menuItems: ItemWithSubItems[] = getInspectionMenuItems(
|
||||
profile?.permissions || []
|
||||
);
|
||||
const menuItems = getInspectionMenuItems(profile?.permissions || []);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const { isSideBarOpen, toggleSideBar } = useSideBarStore();
|
||||
@@ -161,7 +75,7 @@ export const SideBar = () => {
|
||||
const getOpenedItem = () => {
|
||||
if (window.location.pathname !== "/") {
|
||||
const matchedIndex = menuItems.findIndex((item) =>
|
||||
item.subItems.some((sub) => sub.path === window.location.pathname)
|
||||
item.subItems.some((sub) => sub.path === window.location.pathname),
|
||||
);
|
||||
return matchedIndex;
|
||||
} else {
|
||||
@@ -180,7 +94,7 @@ export const SideBar = () => {
|
||||
getFaPermissions(subItem.name)
|
||||
.toLowerCase()
|
||||
.includes(search.toLowerCase()) ||
|
||||
subItem.path.toLowerCase().includes(search.toLowerCase())
|
||||
subItem.path.toLowerCase().includes(search.toLowerCase()),
|
||||
);
|
||||
|
||||
return {
|
||||
@@ -191,7 +105,7 @@ export const SideBar = () => {
|
||||
.filter(
|
||||
(item) =>
|
||||
item.subItems.length > 0 ||
|
||||
item.fa.toLowerCase().includes(search.toLowerCase())
|
||||
item.fa.toLowerCase().includes(search.toLowerCase()),
|
||||
);
|
||||
|
||||
if (isMobile) return null;
|
||||
|
||||
Reference in New Issue
Block a user