| 1 |
import React, { useState, useEffect } from 'react' |
| 2 |
import Home from '../pages/Home' |
| 3 |
import Blocks from '../pages/Blocks' |
| 4 |
import Settings from '../pages/Settings' |
| 5 |
import Colors from '../pages/Colors' |
| 6 |
import GlobalTypography from '../pages/Global-Typography' |
| 7 |
import Designs from '../pages/demo/Designs' |
| 8 |
import Header from '../components/Header' |
| 9 |
import Container from '../components/Container' |
| 10 |
|
| 11 |
const Layout = () => { |
| 12 |
const [current, setCurrent] = useState(0) |
| 13 |
const activeNavHandler = (activeNavItem) => { |
| 14 |
sessionStorage.setItem('main-nav', activeNavItem); |
| 15 |
setCurrent(activeNavItem); |
| 16 |
}; |
| 17 |
useEffect(() => { |
| 18 |
|
| 19 |
const active = sessionStorage.getItem('main-nav'); |
| 20 |
if(active) { |
| 21 |
setCurrent(+active) |
| 22 |
} |
| 23 |
}, []) |
| 24 |
const content = [ |
| 25 |
<Home />, |
| 26 |
// <Blocks />, |
| 27 |
<Designs />, |
| 28 |
// <Settings />, |
| 29 |
// <Colors />, |
| 30 |
// <GlobalTypography />, |
| 31 |
|
| 32 |
] |
| 33 |
return ( |
| 34 |
<> |
| 35 |
<Header current={current} activeNavHandler={activeNavHandler} /> |
| 36 |
<main> |
| 37 |
<Container> |
| 38 |
{content[current]} |
| 39 |
</Container> |
| 40 |
</main> |
| 41 |
</> |
| 42 |
) |
| 43 |
} |
| 44 |
|
| 45 |
export default Layout |
| 46 |
|
