fix: Fix tables + add open navigation

This commit is contained in:
2025-06-15 15:03:36 +03:00
parent 2117a6836e
commit 481385c2f4
4 changed files with 74 additions and 59 deletions

View File

@ -16,6 +16,7 @@ interface NavigationItemProps {
open: boolean; open: boolean;
onClick?: () => void; onClick?: () => void;
isNested?: boolean; isNested?: boolean;
onDrawerOpen?: () => void;
} }
export const NavigationItemComponent: React.FC<NavigationItemProps> = ({ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
@ -23,6 +24,7 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
open, open,
onClick, onClick,
isNested = false, isNested = false,
onDrawerOpen,
}) => { }) => {
const Icon = item.icon; const Icon = item.icon;
const navigate = useNavigate(); const navigate = useNavigate();
@ -32,6 +34,9 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
const isActive = item.path ? location.pathname.startsWith(item.path) : false; const isActive = item.path ? location.pathname.startsWith(item.path) : false;
const handleClick = () => { const handleClick = () => {
if (item.id === "all" && !open) {
onDrawerOpen?.();
}
if (item.nestedItems) { if (item.nestedItems) {
setIsExpanded(!isExpanded); setIsExpanded(!isExpanded);
} else if (onClick) { } else if (onClick) {

View File

@ -3,7 +3,12 @@ import Divider from "@mui/material/Divider";
import { NAVIGATION_ITEMS } from "@shared"; import { NAVIGATION_ITEMS } from "@shared";
import { NavigationItem, NavigationItemComponent } from "@entities"; 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 primaryItems = NAVIGATION_ITEMS.primary;
const secondaryItems = NAVIGATION_ITEMS.secondary; const secondaryItems = NAVIGATION_ITEMS.secondary;
@ -15,6 +20,7 @@ export const NavigationList = ({ open }: { open: boolean }) => {
key={item.id} key={item.id}
item={item as NavigationItem} item={item as NavigationItem}
open={open} open={open}
onDrawerOpen={onDrawerOpen}
/> />
))} ))}
</List> </List>
@ -26,6 +32,7 @@ export const NavigationList = ({ open }: { open: boolean }) => {
item={item as NavigationItem} item={item as NavigationItem}
open={open} open={open}
onClick={item.onClick ? item.onClick : undefined} onClick={item.onClick ? item.onClick : undefined}
onDrawerOpen={onDrawerOpen}
/> />
))} ))}
</List> </List>

View File

@ -10,7 +10,6 @@ import {
GitBranch, GitBranch,
// Car, // Car,
Table, Table,
Notebook,
Split, Split,
Newspaper, Newspaper,
PersonStanding, PersonStanding,
@ -36,9 +35,39 @@ export const NAVIGATION_ITEMS: {
secondary: NavigationItem[]; secondary: NavigationItem[];
} = { } = {
primary: [ 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", id: "all",
label: "Все сущности", label: "Справочник",
icon: Table, icon: Table,
nestedItems: [ nestedItems: [
{ {
@ -71,64 +100,28 @@ export const NAVIGATION_ITEMS: {
icon: Split, icon: Split,
path: "/route", path: "/route",
}, },
{ {
id: "reference", id: "countries",
label: "Справочник", label: "Страны",
icon: Notebook, icon: Earth,
nestedItems: [ path: "/country",
{ },
id: "countries", {
label: "Страны", id: "cities",
icon: Earth, label: "Города",
path: "/country", icon: Building2,
}, path: "/city",
{ },
id: "cities", {
label: "Города", id: "carriers",
icon: Building2, label: "Перевозчики",
path: "/city", // @ts-ignore
}, icon: CarrierSvg,
{ path: "/carrier",
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: [ secondary: [
{ {

View File

@ -55,10 +55,20 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
)} )}
</IconButton> </IconButton>
</DrawerHeader> </DrawerHeader>
<NavigationList open={open} /> <NavigationList open={open} onDrawerOpen={handleDrawerOpen} />
</Drawer> </Drawer>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}> <Box
component="main"
sx={{
width: "100%",
flexGrow: 1,
p: 3,
overflow: "auto",
maxWidth: "100vw",
}}
>
<DrawerHeader /> <DrawerHeader />
{children} {children}
</Box> </Box>
</Box> </Box>