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 {
|
||||
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";
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
// components
|
||||
import Header from "../Header";
|
||||
import Sidebar from "../Sidebar";
|
||||
import Content from "./Content";
|
||||
|
||||
// pages
|
||||
import Dashboard from "../../pages/dashboard";
|
||||
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";
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
|
||||
function Layout(props) {
|
||||
var classes = useStyles();
|
||||
|
||||
// global
|
||||
var layoutState = useLayoutState();
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<>
|
||||
<Header history={props.history} />
|
||||
<Sidebar />
|
||||
<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>
|
||||
</>
|
||||
<>
|
||||
<Header history={props.history} />
|
||||
<Sidebar />
|
||||
<Content />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue