removed unused component
parent
134b9b3f9d
commit
9d1d27da0c
|
|
@ -1,192 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { Drawer, IconButton, List, withStyles } from "@material-ui/core";
|
|
||||||
import {
|
|
||||||
Home as HomeIcon,
|
|
||||||
NotificationsNone as NotificationsIcon,
|
|
||||||
FormatSize as TypographyIcon,
|
|
||||||
FilterNone as UIElementsIcon,
|
|
||||||
BorderAll as TableIcon,
|
|
||||||
QuestionAnswer as SupportIcon,
|
|
||||||
LibraryBooks as LibraryIcon,
|
|
||||||
HelpOutline as FAQIcon,
|
|
||||||
ArrowBack as ArrowBackIcon
|
|
||||||
} from "@material-ui/icons";
|
|
||||||
import classNames from "classnames";
|
|
||||||
|
|
||||||
import SidebarLink from "./components/SidebarLink/SidebarLinkContainer";
|
|
||||||
import Dot from "./components/Dot";
|
|
||||||
|
|
||||||
const structure = [
|
|
||||||
{ id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
label: "Typography",
|
|
||||||
link: "/app/typography",
|
|
||||||
icon: <TypographyIcon />
|
|
||||||
},
|
|
||||||
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
label: "Notifications",
|
|
||||||
link: "/app/notifications",
|
|
||||||
icon: <NotificationsIcon />
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
label: "UI Elements",
|
|
||||||
link: "/app/ui",
|
|
||||||
icon: <UIElementsIcon />,
|
|
||||||
children: [
|
|
||||||
{ label: "Icons", link: "/app/ui/icons" },
|
|
||||||
{ label: "Charts", link: "/app/ui/charts" },
|
|
||||||
{ label: "Maps", link: "/app/ui/maps" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{ id: 5, type: "divider" },
|
|
||||||
{ id: 6, type: "title", label: "HELP" },
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
label: "Library",
|
|
||||||
link: "https://flatlogic.com/templates",
|
|
||||||
icon: <LibraryIcon />
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
label: "Support",
|
|
||||||
link: "https://flatlogic.com/forum/",
|
|
||||||
icon: <SupportIcon />
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
label: "FAQ",
|
|
||||||
link: "https://flatlogic.com/forum/",
|
|
||||||
icon: <FAQIcon />
|
|
||||||
},
|
|
||||||
{ id: 10, type: "divider" },
|
|
||||||
{ id: 11, type: "title", label: "PROJECTS" },
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
label: "My recent",
|
|
||||||
link: "",
|
|
||||||
icon: <Dot size="small" color="secondary" />
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 13,
|
|
||||||
label: "Starred",
|
|
||||||
link: "",
|
|
||||||
icon: <Dot size="small" color="primary" />
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 14,
|
|
||||||
label: "Background",
|
|
||||||
link: "",
|
|
||||||
icon: <Dot size="small" color="secondary" />
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const SidebarView = ({
|
|
||||||
classes,
|
|
||||||
theme,
|
|
||||||
toggleSidebar,
|
|
||||||
isSidebarOpened,
|
|
||||||
isPermanent,
|
|
||||||
location
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<Drawer
|
|
||||||
variant={isPermanent ? "permanent" : "temporary"}
|
|
||||||
className={classNames(classes.drawer, {
|
|
||||||
[classes.drawerOpen]: isSidebarOpened,
|
|
||||||
[classes.drawerClose]: !isSidebarOpened
|
|
||||||
})}
|
|
||||||
classes={{
|
|
||||||
paper: classNames(classes.drawer, {
|
|
||||||
[classes.drawerOpen]: isSidebarOpened,
|
|
||||||
[classes.drawerClose]: !isSidebarOpened
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
open={isSidebarOpened}
|
|
||||||
>
|
|
||||||
<div className={classes.mobileBackButton}>
|
|
||||||
<IconButton onClick={toggleSidebar}>
|
|
||||||
<ArrowBackIcon
|
|
||||||
classes={{
|
|
||||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
<List className={classes.sidebarList}>
|
|
||||||
{structure.map((link) => (
|
|
||||||
<SidebarLink
|
|
||||||
key={link.id}
|
|
||||||
location={location}
|
|
||||||
isSidebarOpened={isSidebarOpened}
|
|
||||||
{...link}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Drawer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const drawerWidth = 240;
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
|
||||||
menuButton: {
|
|
||||||
marginLeft: 12,
|
|
||||||
marginRight: 36
|
|
||||||
},
|
|
||||||
hide: {
|
|
||||||
display: "none"
|
|
||||||
},
|
|
||||||
drawer: {
|
|
||||||
width: drawerWidth,
|
|
||||||
flexShrink: 0,
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
top: theme.spacing.unit * 8,
|
|
||||||
[theme.breakpoints.down("sm")]: {
|
|
||||||
top: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
drawerOpen: {
|
|
||||||
width: drawerWidth,
|
|
||||||
transition: theme.transitions.create("width", {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.enteringScreen
|
|
||||||
})
|
|
||||||
},
|
|
||||||
drawerClose: {
|
|
||||||
transition: theme.transitions.create("width", {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.leavingScreen
|
|
||||||
}),
|
|
||||||
overflowX: "hidden",
|
|
||||||
width: theme.spacing.unit * 7 + 40,
|
|
||||||
[theme.breakpoints.down("sm")]: {
|
|
||||||
width: drawerWidth
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
...theme.mixins.toolbar,
|
|
||||||
[theme.breakpoints.down("sm")]: {
|
|
||||||
display: "none"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
flexGrow: 1,
|
|
||||||
padding: theme.spacing.unit * 3
|
|
||||||
},
|
|
||||||
mobileBackButton: {
|
|
||||||
marginTop: theme.spacing.unit * 0.5,
|
|
||||||
marginLeft: theme.spacing.unit * 3,
|
|
||||||
[theme.breakpoints.only("sm")]: {
|
|
||||||
marginTop: theme.spacing.unit * 0.625
|
|
||||||
},
|
|
||||||
[theme.breakpoints.up("md")]: {
|
|
||||||
display: "none"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default withStyles(styles, { withTheme: true })(SidebarView);
|
|
||||||
Loading…
Reference in New Issue