When click on sidebar menu in right side routes page display

Question

I have sideNavbar and when click on side bar menu return menu componetns on the right side.

Below i have mention the image just look same output want.

Sandboxlink:https://m7tqt3.csb.app/

SideNavbar.js

---

import "./SideNavBar.css";

const SideNavBar = () => {
    
    const menuItems = [
        {
            text: "Dashboard",
            icon: "icons/grid.svg",
        },
        {
            text: "Admin Profile",
            icon: "icons/user.svg",
        },
        {
            text: "Messages",
            icon: "icons/message.svg",
        },
        {
            text: "Analytics",
            icon: "icons/pie-chart.svg",
        },
        {
            text: "File Manager",
            icon: "icons/folder.svg",
        },
        {
            text: "Orders",
            icon: "icons/shopping-cart.svg",
        },
        {
            text: "Saved Items",
            icon: "icons/heart.svg",
        },
        {
            text: "Settings",
            icon: "icons/settings.svg",
        },
    ];
    return (
        <div
            className={
                
                     "side-nav-container"
                    
            }
        >
            <div className="nav-upper">
                <div className="nav-heading">
                    (
                        <div className="nav-brand">
                            <img src="icons/Logo.svg" alt="" srcset="" />
                            <h2>Showkart</h2>
                        </div>
                    )
                    
                </div>
                <div className="nav-menu">
                    {menuItems.map(({ text, icon }) => (
                        <a
                            className={  "menu-item"}
                            href="#"
                        >
                            <img className="menu-item-icon" src={icon} alt="" srcset="" />
                            { <p>{text}</p>}
                        </a>
                    ))}
                </div>
            </div>
            
        </div>
    );
};

export default SideNavBar;

SideNavbar.css

/* NX = not expanded */

.side-nav-container {
    background-color: var(--dark);
    width: 300px;
    height: 100vh;
    position: relative;
    color: var(--light);

    transition: 0.4s;
}
.side-nav-container-NX {
    width: 85px;
}

.nav-upper,
.nav-heading,
.nav-menu,
.menu-item,
.nav-footer {
    /* border: 2px solid white; */
    display: grid;
}

.nav-heading {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    height: 75px;
}

.nav-brand {
    display: flex;
    color: var(--light);
}
.nav-brand img {
    width: 40px;
    padding: 0 10px;
}

.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    margin: auto;
}

.hamburger span {
    display: block;
    margin-top: 5px;
    background-color: var(--light);
    border-radius: 15px;
    height: 5px;
    width: 35px;

    transition: 0.4s;
}

.hamburger:hover span {
    background-color: var(--primary);
}

.hamburger-in:hover span:nth-child(1) {
    width: 25px;
    transform: translateY(4px) rotate(-25deg);
}
.hamburger-in:hover span:nth-child(2) {
    width: 40px;
}
.hamburger-in:hover span:nth-child(3) {
    width: 25px;
    transform: translateY(-4px) rotate(25deg);
}
/* ///////////////////// */
/* ///////////////////// */
/* ///////////////////// */
/* ///////////////////// */
.hamburger-out {
    margin-left: 24px;
}
.hamburger-out:hover span:nth-child(1) {
    width: 25px;
    transform: translate(14px, 4px) rotate(-155deg);
}
.hamburger-out:hover span:nth-child(2) {
    width: 40px;
}
.hamburger-out:hover span:nth-child(3) {
    width: 25px;
    transform: translate(14px, -4px) rotate(155deg);
}

.nav-menu {
    grid-template-rows: repeat(7, 1fr);
    margin-top: 50px;
}

.menu-item {
    height: 57px;
    display: flex;
    color: var(--light);
    text-decoration: none;
    text-transform: uppercase;
    margin: auto 20px;
    border-radius: 10px;
}

.menu-item-NX {
    margin: auto;
}
.menu-item:hover {
    background-color: var(--primary);
}
.menu-item img {
    width: 30px;
    padding: 0 20px;
}

.nav-footer {
    width: 100%;
    height: 87px;
    position: absolute;
    bottom: 0;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr;
}

.nav-details {
    display: flex;
}
.nav-details img {
    width: 50px;
    padding: 0 20px;
}

.nav-footer-user-name {
    font-size: 18px;
    font-weight: 900;
}

.nav-footer-user-position {
    margin-top: -15px;
    color: var(--gray);
}
.logout-icon {
    width: 30px;
    margin: auto;
    border-radius: 90px;
    padding: 20px;
    margin-left: 5px;
}
.logout-icon:hover {
    background-color: var(--primary);
}

Notes: React router dom version: 5.3.1.

Output look like: enter image description here

Routes to another components on right side

Answer 1

Firstly, if I undestand your question, you want a side navbar which allows you to navigate to different pages with your react app. If so:

 <div className="nav-menu">
                    {menuItems.map(({ text, icon }) => (
                        <a                  <--- The problem is here
                            className={  "menu-item"}
                            href="#"
                        >
                            <img className="menu-item-icon" src={icon} alt="" srcset="" />
                            { <p>{text}</p>}
                        </a>
                    ))}
                </div>

You are using anchor tag which will redirect you out of react router. You should use Link tag which allows to redirect to different pages within your react app.

 const menuItems = [
    {
        text: "Dashboard",
        icon: "icons/grid.svg",
        navLink:'/dashboard'
    },
    {
        text: "Admin Profile",
        icon: "icons/user.svg",
        navLink:'/admin'
    },...]



 <div className="nav-menu">
       {menuItems.map(({ text, icon, navlink }) => ( 
            <Link                
             className={  "menu-item"}
             to={navlink}
             >
                  <img className="menu-item-icon" src={icon} alt="" 
                   srcset="" 
                    />
                   { <p>{text}</p>}
             </Link>
            ))}
     </div>

Likewise you need to step up your App.js with BrowserRouter, Routes and Route to move between pages.