|
|
@ -4,7 +4,8 @@ import {
|
|
|
|
Container,
|
|
|
|
Container,
|
|
|
|
Flex,
|
|
|
|
Flex,
|
|
|
|
Box,
|
|
|
|
Box,
|
|
|
|
useBreakpointValue
|
|
|
|
useBreakpointValue,
|
|
|
|
|
|
|
|
Link
|
|
|
|
} from "@chakra-ui/react";
|
|
|
|
} from "@chakra-ui/react";
|
|
|
|
|
|
|
|
|
|
|
|
import Sidebar from "../components/Layout/Sidebar"
|
|
|
|
import Sidebar from "../components/Layout/Sidebar"
|
|
|
@ -47,7 +48,11 @@ export default function DashboardLayout(props) {
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Flex flexShrink>
|
|
|
|
<Flex flexShrink>
|
|
|
|
<Sidebar isOpen={isSidebarOpen} variant={variants?.navigation} onClose={toggleSidebar}/>
|
|
|
|
<Sidebar
|
|
|
|
|
|
|
|
isOpen={isSidebarOpen}
|
|
|
|
|
|
|
|
variant={variants?.navigation}
|
|
|
|
|
|
|
|
onClose={toggleSidebar}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<Box ml={!variants?.navigationButton && 200} flex="1">
|
|
|
|
<Box ml={!variants?.navigationButton && 200} flex="1">
|
|
|
|
<Header
|
|
|
|
<Header
|
|
|
|
showSidebarButton={variants?.navigationButton}
|
|
|
|
showSidebarButton={variants?.navigationButton}
|
|
|
@ -55,9 +60,14 @@ export default function DashboardLayout(props) {
|
|
|
|
onLogout={handleLogout}
|
|
|
|
onLogout={handleLogout}
|
|
|
|
user={user}
|
|
|
|
user={user}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<Container maxW={{base: "80rem", xl: "110rem"}} py="10" bg="gray.100" minH={{ base: "38rem", sm: "40rem", xl: "53.5rem"}}>
|
|
|
|
<Container
|
|
|
|
|
|
|
|
maxW={{ base: '80rem', xl: '110rem' }}
|
|
|
|
|
|
|
|
py="10"
|
|
|
|
|
|
|
|
bg="gray.100"
|
|
|
|
|
|
|
|
minH={{ base: '38rem', sm: '40rem', xl: '53.5rem' }}
|
|
|
|
|
|
|
|
>
|
|
|
|
{/* Content */}
|
|
|
|
{/* Content */}
|
|
|
|
<Suspense fallback={<Loading/>}>
|
|
|
|
<Suspense fallback={<Loading />}>
|
|
|
|
<Switch>
|
|
|
|
<Switch>
|
|
|
|
{routes.map((route, index) => {
|
|
|
|
{routes.map((route, index) => {
|
|
|
|
return route.component ? (
|
|
|
|
return route.component ? (
|
|
|
@ -65,20 +75,28 @@ export default function DashboardLayout(props) {
|
|
|
|
name={route.name}
|
|
|
|
name={route.name}
|
|
|
|
path={route.path}
|
|
|
|
path={route.path}
|
|
|
|
exact={route.exact}
|
|
|
|
exact={route.exact}
|
|
|
|
render={props => <route.component {...props} />}
|
|
|
|
render={(props) => <route.component {...props} />}
|
|
|
|
key={index}
|
|
|
|
key={index}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
) : null
|
|
|
|
) : null;
|
|
|
|
})}
|
|
|
|
})}
|
|
|
|
<Redirect from="/" exact={true} to="/dashboard" />
|
|
|
|
<Redirect from="/" exact={true} to="/dashboard" />
|
|
|
|
<Route path="*" component={NotFound}/>
|
|
|
|
<Route path="*" component={NotFound} />
|
|
|
|
</Switch>
|
|
|
|
</Switch>
|
|
|
|
</Suspense>
|
|
|
|
</Suspense>
|
|
|
|
</Container>
|
|
|
|
</Container>
|
|
|
|
<Box bg="red" minH="1" maxW={{base: "90rem", xl: "110rem"}} p="4" color="white">
|
|
|
|
<Box
|
|
|
|
© {(new Date()).getFullYear()} kasirAja dev
|
|
|
|
bg="red"
|
|
|
|
|
|
|
|
minH="1"
|
|
|
|
|
|
|
|
maxW={{ base: '90rem', xl: '110rem' }}
|
|
|
|
|
|
|
|
p="4"
|
|
|
|
|
|
|
|
color="white"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<Link href="https://github.com/ajikamaludin/" target="_blank">
|
|
|
|
|
|
|
|
© {new Date().getFullYear()} kasirAja dev
|
|
|
|
|
|
|
|
</Link>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
</Flex>
|
|
|
|
</Flex>
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|