# blockspare/3.0.0/admin/layout/Layout.js

BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites, version 3.0.0. 46 lines.

- Page: https://pluginprobe.com/plugins/blockspare/3.0.0/code/admin/layout/Layout.js
- Raw: https://pluginprobe.com/plugins/blockspare/3.0.0/raw/admin/layout/Layout.js
- Modified: 2023-09-07T10:20:36+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/blockspare/3.0.0/code/admin/layout/Layout.js#L10-L20`.

```javascript
import React, { useState, useEffect } from 'react'
import Home from '../pages/Home'
import Blocks from '../pages/Blocks'
import Settings from '../pages/Settings'
import Colors from '../pages/Colors'
import GlobalTypography from '../pages/Global-Typography'
import Designs from '../pages/demo/Designs'
import Header from '../components/Header'
import Container from '../components/Container'

const Layout = () => {
    const [current, setCurrent] = useState(0)
    const activeNavHandler = (activeNavItem) => {
        sessionStorage.setItem('main-nav', activeNavItem);
        setCurrent(activeNavItem);
    };
    useEffect(() => {
        
        const active = sessionStorage.getItem('main-nav');
        if(active) {
            setCurrent(+active)
        }
    }, [])
    const content = [
        <Home />,
        // <Blocks />,
        <Designs />,
        // <Settings />,
        // <Colors />,
        // <GlobalTypography />,

    ]
    return (
        <>
            <Header current={current} activeNavHandler={activeNavHandler} />
            <main>
                <Container>
                    {content[current]}
                </Container>
            </main>
        </>
    )
}

export default Layout

```