fix: Fix tables
+ add open navigation
This commit is contained in:
@ -16,6 +16,7 @@ interface NavigationItemProps {
|
||||
open: boolean;
|
||||
onClick?: () => void;
|
||||
isNested?: boolean;
|
||||
onDrawerOpen?: () => void;
|
||||
}
|
||||
|
||||
export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
||||
@ -23,6 +24,7 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
||||
open,
|
||||
onClick,
|
||||
isNested = false,
|
||||
onDrawerOpen,
|
||||
}) => {
|
||||
const Icon = item.icon;
|
||||
const navigate = useNavigate();
|
||||
@ -32,6 +34,9 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
||||
const isActive = item.path ? location.pathname.startsWith(item.path) : false;
|
||||
|
||||
const handleClick = () => {
|
||||
if (item.id === "all" && !open) {
|
||||
onDrawerOpen?.();
|
||||
}
|
||||
if (item.nestedItems) {
|
||||
setIsExpanded(!isExpanded);
|
||||
} else if (onClick) {
|
||||
|
@ -3,7 +3,12 @@ import Divider from "@mui/material/Divider";
|
||||
import { NAVIGATION_ITEMS } from "@shared";
|
||||
import { NavigationItem, NavigationItemComponent } from "@entities";
|
||||
|
||||
export const NavigationList = ({ open }: { open: boolean }) => {
|
||||
interface NavigationListProps {
|
||||
open: boolean;
|
||||
onDrawerOpen?: () => void;
|
||||
}
|
||||
|
||||
export const NavigationList = ({ open, onDrawerOpen }: NavigationListProps) => {
|
||||
const primaryItems = NAVIGATION_ITEMS.primary;
|
||||
const secondaryItems = NAVIGATION_ITEMS.secondary;
|
||||
|
||||
@ -15,6 +20,7 @@ export const NavigationList = ({ open }: { open: boolean }) => {
|
||||
key={item.id}
|
||||
item={item as NavigationItem}
|
||||
open={open}
|
||||
onDrawerOpen={onDrawerOpen}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
@ -26,6 +32,7 @@ export const NavigationList = ({ open }: { open: boolean }) => {
|
||||
item={item as NavigationItem}
|
||||
open={open}
|
||||
onClick={item.onClick ? item.onClick : undefined}
|
||||
onDrawerOpen={onDrawerOpen}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
|
@ -10,7 +10,6 @@ import {
|
||||
GitBranch,
|
||||
// Car,
|
||||
Table,
|
||||
Notebook,
|
||||
Split,
|
||||
Newspaper,
|
||||
PersonStanding,
|
||||
@ -36,9 +35,39 @@ export const NAVIGATION_ITEMS: {
|
||||
secondary: NavigationItem[];
|
||||
} = {
|
||||
primary: [
|
||||
{
|
||||
id: "snapshots",
|
||||
label: "Снапшоты",
|
||||
icon: GitBranch,
|
||||
path: "/snapshot",
|
||||
},
|
||||
{
|
||||
id: "map",
|
||||
label: "Карта",
|
||||
icon: Map,
|
||||
path: "/map",
|
||||
},
|
||||
{
|
||||
id: "devices",
|
||||
label: "Устройства",
|
||||
icon: Cpu,
|
||||
path: "/devices",
|
||||
},
|
||||
// {
|
||||
// id: "vehicles",
|
||||
// label: "Транспорт",
|
||||
// icon: Car,
|
||||
// path: "/vehicle",
|
||||
// },
|
||||
{
|
||||
id: "users",
|
||||
label: "Пользователи",
|
||||
icon: Users,
|
||||
path: "/user",
|
||||
},
|
||||
{
|
||||
id: "all",
|
||||
label: "Все сущности",
|
||||
label: "Справочник",
|
||||
icon: Table,
|
||||
nestedItems: [
|
||||
{
|
||||
@ -71,64 +100,28 @@ export const NAVIGATION_ITEMS: {
|
||||
icon: Split,
|
||||
path: "/route",
|
||||
},
|
||||
|
||||
{
|
||||
id: "reference",
|
||||
label: "Справочник",
|
||||
icon: Notebook,
|
||||
nestedItems: [
|
||||
{
|
||||
id: "countries",
|
||||
label: "Страны",
|
||||
icon: Earth,
|
||||
path: "/country",
|
||||
},
|
||||
{
|
||||
id: "cities",
|
||||
label: "Города",
|
||||
icon: Building2,
|
||||
path: "/city",
|
||||
},
|
||||
{
|
||||
id: "carriers",
|
||||
label: "Перевозчики",
|
||||
// @ts-ignore
|
||||
icon: CarrierSvg,
|
||||
path: "/carrier",
|
||||
},
|
||||
],
|
||||
id: "countries",
|
||||
label: "Страны",
|
||||
icon: Earth,
|
||||
path: "/country",
|
||||
},
|
||||
{
|
||||
id: "cities",
|
||||
label: "Города",
|
||||
icon: Building2,
|
||||
path: "/city",
|
||||
},
|
||||
{
|
||||
id: "carriers",
|
||||
label: "Перевозчики",
|
||||
// @ts-ignore
|
||||
icon: CarrierSvg,
|
||||
path: "/carrier",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "snapshots",
|
||||
label: "Снапшоты",
|
||||
icon: GitBranch,
|
||||
path: "/snapshot",
|
||||
},
|
||||
{
|
||||
id: "map",
|
||||
label: "Карта",
|
||||
icon: Map,
|
||||
path: "/map",
|
||||
},
|
||||
{
|
||||
id: "devices",
|
||||
label: "Устройства",
|
||||
icon: Cpu,
|
||||
path: "/devices",
|
||||
},
|
||||
// {
|
||||
// id: "vehicles",
|
||||
// label: "Транспорт",
|
||||
// icon: Car,
|
||||
// path: "/vehicle",
|
||||
// },
|
||||
{
|
||||
id: "users",
|
||||
label: "Пользователи",
|
||||
icon: Users,
|
||||
path: "/user",
|
||||
},
|
||||
],
|
||||
secondary: [
|
||||
{
|
||||
|
@ -55,10 +55,20 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
)}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<NavigationList open={open} />
|
||||
<NavigationList open={open} onDrawerOpen={handleDrawerOpen} />
|
||||
</Drawer>
|
||||
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
width: "100%",
|
||||
flexGrow: 1,
|
||||
p: 3,
|
||||
overflow: "auto",
|
||||
maxWidth: "100vw",
|
||||
}}
|
||||
>
|
||||
<DrawerHeader />
|
||||
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
|
Reference in New Issue
Block a user