content component
parent
9d1d27da0c
commit
b075d31ee8
|
|
@ -0,0 +1,110 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Route, Switch, Redirect } from "react-router-dom";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { Box, IconButton, Link } from "@material-ui/core";
|
||||||
|
import Icon from "@mdi/react";
|
||||||
|
|
||||||
|
//icons
|
||||||
|
import {
|
||||||
|
mdiFacebook as FacebookIcon,
|
||||||
|
mdiTwitter as TwitterIcon,
|
||||||
|
mdiGithub as GithubIcon
|
||||||
|
} from "@mdi/js";
|
||||||
|
|
||||||
|
// pages
|
||||||
|
import Dashboard from "../../pages/dashboard/Dashboard";
|
||||||
|
import Typography from "../../pages/typography/Typography";
|
||||||
|
import Notifications from "../../pages/notifications/Notifications";
|
||||||
|
import Maps from "../../pages/maps/Maps";
|
||||||
|
import Tables from "../../pages/tables/Tables";
|
||||||
|
import Icons from "../../pages/icons/Icons";
|
||||||
|
import Charts from "../../pages/charts/Charts";
|
||||||
|
|
||||||
|
// context
|
||||||
|
import { useLayoutState } from "../../context/LayoutContext";
|
||||||
|
|
||||||
|
// styles
|
||||||
|
import useStyles from "./styles";
|
||||||
|
|
||||||
|
const Content = () => {
|
||||||
|
// global
|
||||||
|
var layoutState = useLayoutState();
|
||||||
|
var classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classnames(classes.content, {
|
||||||
|
[classes.contentShift]: layoutState.isSidebarOpened
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div className={classes.fakeToolbar} />
|
||||||
|
<Switch>
|
||||||
|
<Route path="/app/dashboard" component={Dashboard} />
|
||||||
|
<Route path="/app/typography" component={Typography} />
|
||||||
|
<Route path="/app/tables" component={Tables} />
|
||||||
|
<Route path="/app/notifications" component={Notifications} />
|
||||||
|
<Route
|
||||||
|
exact
|
||||||
|
path="/app/ui"
|
||||||
|
render={() => <Redirect to="/app/ui/icons" />}
|
||||||
|
/>
|
||||||
|
<Route path="/app/ui/maps" component={Maps} />
|
||||||
|
<Route path="/app/ui/icons" component={Icons} />
|
||||||
|
<Route path="/app/ui/charts" component={Charts} />
|
||||||
|
</Switch>
|
||||||
|
<Box
|
||||||
|
mt={5}
|
||||||
|
width={"100%"}
|
||||||
|
display={"flex"}
|
||||||
|
alignItems={"center"}
|
||||||
|
justifyContent="space-between"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
color={"primary"}
|
||||||
|
href={"https://flatlogic.com/"}
|
||||||
|
target={"_blank"}
|
||||||
|
className={classes.link}
|
||||||
|
>
|
||||||
|
Flatlogic
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
color={"primary"}
|
||||||
|
href={"https://flatlogic.com/about"}
|
||||||
|
target={"_blank"}
|
||||||
|
className={classes.link}
|
||||||
|
>
|
||||||
|
About Us
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
color={"primary"}
|
||||||
|
href={"https://flatlogic.com/blog"}
|
||||||
|
target={"_blank"}
|
||||||
|
className={classes.link}
|
||||||
|
>
|
||||||
|
Blog
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Link href={"https://www.facebook.com/flatlogic"} target={"_blank"}>
|
||||||
|
<IconButton aria-label="facebook">
|
||||||
|
<Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
|
||||||
|
</IconButton>
|
||||||
|
</Link>
|
||||||
|
<Link href={"https://twitter.com/flatlogic"} target={"_blank"}>
|
||||||
|
<IconButton aria-label="twitter">
|
||||||
|
<Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
|
||||||
|
</IconButton>
|
||||||
|
</Link>
|
||||||
|
<Link href={"https://github.com/flatlogic"} target={"_blank"}>
|
||||||
|
<IconButton aria-label="github" style={{ marginRight: -12 }}>
|
||||||
|
<Icon path={GithubIcon} size={1} color="#6E6E6E99" />
|
||||||
|
</IconButton>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Content;
|
||||||
|
|
@ -1,148 +1,24 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import {
|
import { withRouter } from "react-router-dom";
|
||||||
Route,
|
|
||||||
Switch,
|
|
||||||
Redirect,
|
|
||||||
withRouter,
|
|
||||||
} from "react-router-dom";
|
|
||||||
import classnames from "classnames";
|
|
||||||
import {Box, IconButton, Link} from '@material-ui/core'
|
|
||||||
import Icon from '@mdi/react'
|
|
||||||
|
|
||||||
//icons
|
|
||||||
import {
|
|
||||||
mdiFacebook as FacebookIcon,
|
|
||||||
mdiTwitter as TwitterIcon,
|
|
||||||
mdiGithub as GithubIcon,
|
|
||||||
} from '@mdi/js'
|
|
||||||
|
|
||||||
// styles
|
|
||||||
import useStyles from "./styles";
|
|
||||||
|
|
||||||
// components
|
// components
|
||||||
import Header from "../Header";
|
import Header from "../Header";
|
||||||
import Sidebar from "../Sidebar";
|
import Sidebar from "../Sidebar";
|
||||||
|
import Content from "./Content";
|
||||||
|
|
||||||
// pages
|
// styles
|
||||||
import Dashboard from "../../pages/dashboard";
|
import useStyles from "./styles";
|
||||||
import Typography from "../../pages/typography";
|
|
||||||
import Notifications from "../../pages/notifications";
|
|
||||||
import Maps from "../../pages/maps";
|
|
||||||
import Tables from "../../pages/tables";
|
|
||||||
import Icons from "../../pages/icons";
|
|
||||||
import Charts from "../../pages/charts";
|
|
||||||
|
|
||||||
// context
|
|
||||||
import { useLayoutState } from "../../context/LayoutContext";
|
|
||||||
|
|
||||||
function Layout(props) {
|
function Layout(props) {
|
||||||
var classes = useStyles();
|
var classes = useStyles();
|
||||||
|
|
||||||
// global
|
|
||||||
var layoutState = useLayoutState();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.root}>
|
<div className={classes.root}>
|
||||||
<>
|
<>
|
||||||
<Header history={props.history} />
|
<Header history={props.history} />
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<div
|
<Content />
|
||||||
className={classnames(classes.content, {
|
</>
|
||||||
[classes.contentShift]: layoutState.isSidebarOpened,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div className={classes.fakeToolbar} />
|
|
||||||
<Switch>
|
|
||||||
<Route path="/app/dashboard" component={Dashboard} />
|
|
||||||
<Route path="/app/typography" component={Typography} />
|
|
||||||
<Route path="/app/tables" component={Tables} />
|
|
||||||
<Route path="/app/notifications" component={Notifications} />
|
|
||||||
<Route
|
|
||||||
exact
|
|
||||||
path="/app/ui"
|
|
||||||
render={() => <Redirect to="/app/ui/icons" />}
|
|
||||||
/>
|
|
||||||
<Route path="/app/ui/maps" component={Maps} />
|
|
||||||
<Route path="/app/ui/icons" component={Icons} />
|
|
||||||
<Route path="/app/ui/charts" component={Charts} />
|
|
||||||
</Switch>
|
|
||||||
<Box
|
|
||||||
mt={5}
|
|
||||||
width={"100%"}
|
|
||||||
display={"flex"}
|
|
||||||
alignItems={"center"}
|
|
||||||
justifyContent="space-between"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color={'primary'}
|
|
||||||
href={'https://flatlogic.com/'}
|
|
||||||
target={'_blank'}
|
|
||||||
className={classes.link}
|
|
||||||
>
|
|
||||||
Flatlogic
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
color={'primary'}
|
|
||||||
href={'https://flatlogic.com/about'}
|
|
||||||
target={'_blank'}
|
|
||||||
className={classes.link}
|
|
||||||
>
|
|
||||||
About Us
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
color={'primary'}
|
|
||||||
href={'https://flatlogic.com/blog'}
|
|
||||||
target={'_blank'}
|
|
||||||
className={classes.link}
|
|
||||||
>
|
|
||||||
Blog
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
href={'https://www.facebook.com/flatlogic'}
|
|
||||||
target={'_blank'}
|
|
||||||
>
|
|
||||||
<IconButton aria-label="facebook">
|
|
||||||
<Icon
|
|
||||||
path={FacebookIcon}
|
|
||||||
size={1}
|
|
||||||
color="#6E6E6E99"
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href={'https://twitter.com/flatlogic'}
|
|
||||||
target={'_blank'}
|
|
||||||
>
|
|
||||||
<IconButton aria-label="twitter">
|
|
||||||
<Icon
|
|
||||||
path={TwitterIcon}
|
|
||||||
size={1}
|
|
||||||
color="#6E6E6E99"
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href={'https://github.com/flatlogic'}
|
|
||||||
target={'_blank'}
|
|
||||||
>
|
|
||||||
<IconButton
|
|
||||||
aria-label="github"
|
|
||||||
style={{marginRight: -12}}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
path={GithubIcon}
|
|
||||||
size={1}
|
|
||||||
color="#6E6E6E99"
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</Box>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue