Setup Web page in rectangle

Who is know as make(setup) web-page in rectangle between top menu bar(Bootstrap Nav) and left-side side panel (nav or Bootstrap Nav) ? Video about this question:

Menu + Sidebar render code: (It looks like your post is mostly code; please add some more details., It looks like your post is mostly code; please add some more details.,It looks like your post is mostly code; please add some more details. ,It looks like your post is mostly code; please add some more details.)

Webpage content:

export default function NavigationBar() {

//call 'Logout' etc
const {store} = useContext(Context);

//hide-show sidebar nav
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);

return (
    <>
        <IconContext.Provider value=>

            {/*Sidebar*/}
            <Nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
                {/*<ul className='nav-menu-items' onClick={showSidebar}>*/}
                <ul className='nav-menu-items'>
                    <li className='navbar-toggle'>
                        <Link to='#' className='menu-bars'>
                            <AiIcons.AiOutlineClose />
                        </Link>
                    </li>
                    {SidebarData.map((item, index) => {
                        return (
                            <li key={index} className={item.cName}>
                                <Link to={item.path}>
                                    {item.icon}
                                    <span>{item.title}</span>
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            </Nav>

            {/*Top menu bar*/}
            <Styles>
                <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">

                    <Link to='#' className='menu-bars'>
                        <FaIcons.FaBars onClick={showSidebar} />
                    </Link>

                    <Container>
                        <Navbar.Brand>FloresCRM</Navbar.Brand>
                        <Navbar.Toggle aria-controls="responsive-navbar-nav"></Navbar.Toggle>
                        <Navbar.Collapse id="responsive-navbar-nav">

                            <Nav className="mr-auto">
                                <Nav.Link><Link to={"/"}>Home</Link></Nav.Link>
                                <Nav.Link><Link to={"/store"}>Store</Link></Nav.Link>
                                <Nav.Link><Link to={"/users"}>Users</Link></Nav.Link>
                                <Nav.Link><Link to={"/about"}>About</Link></Nav.Link>

                                {/*DEBUG ONLY, NO ROUTING*/}
                                {/*<Nav.Link>Home</Nav.Link>*/}
                                {/*<Nav.Link>Store</Nav.Link>*/}
                                {/*<Nav.Link>Users</Nav.Link>*/}
                                {/*<Nav.Link>About</Nav.Link>*/}
                            </Nav>
                            {/*setup buttons at right side of Nav*/}
                            <Nav className="justify-content-end" style=>
                                <Button variant={"outline-light"} className="me-2">Login</Button>
                                <Button variant="outline-light" className="me-2" onClick={() => {store.logout()}}>Logout</Button>
                                <Button variant="outline-light" className="me-2">Other</Button>
                            </Nav>
                        </Navbar.Collapse>
                    </Container>
                </Navbar>
            </Styles>

        </IconContext.Provider>
    </>
)

}

Full web page render code: (It looks like your post is mostly code; please add some more details., It looks like your post is mostly code; please add some more details., It looks like your post is mostly code; please add some more details., It looks like your post is mostly code; please add some more details.)

export default function MainPage() {
const {store} = useContext(Context);

return (
    <>
        <div>
            <Router>
                <NavigationBar />
                <Switch>
                    <Route exact path={"/"} component={Home} />
                    <Route exact path={"/store"} component={Store} />
                    <Route exact path={"/users"} component={Users} />
                    <Route exact path={"/about"} component={About} />
                </Switch>
            </Router>
        </div>

        <div>
            <Button variant="dark" className="me-2" onClick={() => {store.logout()}}>Logout</Button>
        </div>
    </>
)

}