120 lines
3.0 KiB
JavaScript
120 lines
3.0 KiB
JavaScript
import { Outlet, useLocation } from "react-router";
|
|
import List from "../../md-components/List";
|
|
import ListItem from "../../md-components/ListItem";
|
|
import { Link } from "react-router-dom";
|
|
import Icon from "../../md-components/Icon";
|
|
|
|
const AccountPage = () => {
|
|
const location = useLocation();
|
|
const menuRoutes = [
|
|
{
|
|
name: "Главная",
|
|
path: "/",
|
|
icon: "home",
|
|
},
|
|
{
|
|
name: "Коллекции",
|
|
path: "/collections",
|
|
icon: "collections_bookmark",
|
|
},
|
|
{
|
|
name: "Полка",
|
|
path: "/shelve",
|
|
icon: "shelves",
|
|
},
|
|
{
|
|
name: "Загрузить книгу",
|
|
path: "/upload",
|
|
icon: "upload",
|
|
},
|
|
// {
|
|
// name: "Настройки",
|
|
// path: "/settings",
|
|
// icon: "settings",
|
|
// },
|
|
// {
|
|
// name: "Безопасность",
|
|
// path: "/security",
|
|
// icon: "security",
|
|
// },
|
|
// {
|
|
// name: "Администрирование",
|
|
// path: "/admin",
|
|
// icon: "admin_panel_settings",
|
|
// },
|
|
];
|
|
return (
|
|
<>
|
|
<div className="main_page_container">
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
paddingTop: 50,
|
|
color: "white",
|
|
}}
|
|
>
|
|
<List
|
|
style={{
|
|
border: "0px solid gray",
|
|
borderRadius: 15,
|
|
padding: 10,
|
|
gap: 10,
|
|
width: 240,
|
|
}}
|
|
className="main_side_menu"
|
|
>
|
|
{menuRoutes.map((route) => (
|
|
<Link
|
|
to={route.path}
|
|
style={{ textDecoration: "none" }}
|
|
key={route.path}
|
|
>
|
|
<ListItem
|
|
type="button"
|
|
style={{
|
|
borderRadius: 15,
|
|
background:
|
|
location.pathname == route.path
|
|
? "var(--md-sys-color-primary-container)"
|
|
: "",
|
|
}}
|
|
onClick={() => {} /*navigate(route.path)*/}
|
|
>
|
|
<Icon slot="start">{route.icon}</Icon>
|
|
{route.name}
|
|
</ListItem>
|
|
</Link>
|
|
))}
|
|
</List>
|
|
</div>
|
|
<div style={{ paddingTop: 20, width: "100%" }}>
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
<div className="main_down_menu">
|
|
{menuRoutes.map((route, i) => (
|
|
<Link
|
|
className="main_down_menu_item"
|
|
to={route.path}
|
|
id={"route" + i}
|
|
key={i}
|
|
>
|
|
<div
|
|
className={
|
|
"icon " + (location.pathname == route.path ? "active" : "")
|
|
}
|
|
>
|
|
<md-ripple for={"route" + i} />
|
|
<Icon>{route.icon}</Icon>
|
|
</div>
|
|
<span>{route.name}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AccountPage;
|