Setup Web page in rectangle

Who is know as make(setup) web-page in rectangle between top menu bar(Bootstrap Nav) and left-side … Read more 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:

It is menu + sidebar React renderer code:`return (
<>
<IconContext.Provider value={{ color: ‘#fff’ }}>

            {/*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={{ width: "100%" }}>
                                <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>
    </>
)`

Source: React – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *