"use client";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import {
Box, Collapse,
Divider,
Drawer,
IconButton,
List,
ListItemButton,
ListItemIcon,
ListItemText,
styled,
useMediaQuery
} from "@mui/material";
import { theme } from "@/app/theme";
import { Fragment, ReactNode, useState } from "react";
import HomeIcon from "@mui/icons-material/Home";
import ArticleIcon from "@mui/icons-material/Article";
import FeedIcon from "@mui/icons-material/RssFeed";
import InfoIcon from '@mui/icons-material/Info';
import GavelIcon from '@mui/icons-material/Gavel';
import PolicyIcon from '@mui/icons-material/Policy';
import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import Link from "next/link";
export interface NavigationItem {
icon?: ReactNode;
title?: string;
link?: string;
divider?: boolean;
children?: NavigationItem[];
}
export const DRAWER_WIDTH = 320;
export const NAVIGATION_ITEMS: NavigationItem[] = [
{ icon: , title: "首页", link: "/" },
{ icon: , title: "新闻", link: "/posts" },
{
icon: , title: "信息中心", children: [
{ icon: , title: "用户协议", link: "/i/user-agreement" },
{ icon: , title: "隐私协议", link: "/i/privacy-policy" },
{ icon: , title: "社区准则", link: "/i/community-guidelines" }
]
},
{ divider: true },
{ icon: , title: "订阅源", link: "/feed" }
];
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) => {
if (item.divider) {
return ;
} else if (item.children) {
const [open, setOpen] = useState(false);
return (
setOpen(!open)}>
{item.icon}
{open ? : }
{item.children.map((item, idx) => item.divider ? (
) : (
{item.icon}
))}
);
} else {
return
{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 ? (
<>
>
) : (
);
}