"use client";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
import {
Box,
Divider,
Drawer,
IconButton,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
styled,
useMediaQuery
} from "@mui/material";
import { theme } from "@/app/theme";
import { ReactNode } from "react";
import HomeIcon from "@mui/icons-material/Home";
import Link from "next/link";
export interface NavigationItem {
icon: ReactNode;
title: string;
link: string;
}
export const DRAWER_WIDTH = 320;
export const NAVIGATION_ITEMS: NavigationItem[] = [
{ icon: , title: "首页", link: "/" }
];
export const AppNavigationHeader = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
justifyContent: "flex-start",
height: 64,
...theme.mixins.toolbar
}));
export function AppNavigation({ showClose, onClose }: {
showClose?: boolean,
onClose: () => void
}) {
return (
<>
{
showClose &&
{theme.direction === "rtl" ? : }
}
{NAVIGATION_ITEMS.map((item, idx) => (
{item.icon}
))}
>
);
}
export const isMobileQuery = theme.breakpoints.down("md");
export default function NavigationDrawer({ open, onClose }: {
open: boolean,
onClose: () => void,
}) {
const isMobile = useMediaQuery(isMobileQuery);
return isMobile ? (
<>
>
) : (
);
}