fix: Fix tables
+ add open navigation
This commit is contained in:
@ -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) {
|
||||||
|
@ -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>
|
||||||
|
@ -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,11 +100,7 @@ export const NAVIGATION_ITEMS: {
|
|||||||
icon: Split,
|
icon: Split,
|
||||||
path: "/route",
|
path: "/route",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: "reference",
|
|
||||||
label: "Справочник",
|
|
||||||
icon: Notebook,
|
|
||||||
nestedItems: [
|
|
||||||
{
|
{
|
||||||
id: "countries",
|
id: "countries",
|
||||||
label: "Страны",
|
label: "Страны",
|
||||||
@ -98,38 +123,6 @@ export const NAVIGATION_ITEMS: {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
|
||||||
{
|
|
||||||
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: [
|
||||||
{
|
{
|
||||||
id: "logout",
|
id: "logout",
|
||||||
|
@ -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>
|
||||||
|
Reference in New Issue
Block a user