A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available.

Link to the Example

The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes.

To ensure the sidebar remains consistent across all pages, a component needs to be passed to render inside the content area.

For instance, the component SidebarColors.js will include another component like this:

<Route exact path="/rendertune" element={ <SidebarColors> <myOtherComponent/> </SidebarColors> } />

In the code below, the imported component will be rendered as {children} on the webpage.

However, issues arise in getting the state management to function correctly within the file.

import React from 'react'
import '../css/SidebarColors.css';

var isSidebarOpen = false;

function sideNavClicked() {
    isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
    isSidebarOpen = true;
    //this.setShowSidebar(true)
    //document.getElementById('mySidebar').classList.add('sidebar-show');
    //this.setMainShow(true)
    //document.getElementById('main').classList.add('main-show');
}

function closeNav() {
    isSidebarOpen = false;
    //this.setShowSidebar(false)
    //document.getElementById('mySidebar').classList.remove('sidebar-show');
    //this.setMainShow(false)
    //document.getElementById('main').classList.remove('main-show');
}

function toggleMenuItem(element) {
    //console.log('toggleMenuItem')
    //this.setSidebarMenuToggle(false)
    // document.getElementById(element.dataset.ulid).classList.toggle("ul-show");
}


const SidebarColors = ({ children }) => {

    const [showSidebar, setShowSidebar] = React.useState(true);
    const [mainShow, setMainShow] = React.useState(true);

    return (
        <>
            <div>
                <button onClick={() => setShowSidebar(true)}>debug button: open sidebar</button>

                <div className="main-content">
                    <div id="mySidebar" className={"sidebar super-animation " + (showSidebar ? "sidebar-show" : "")}>
                        <a href="" className="closebtn" onClick={closeNav}>x</a>
                        <a href="#">About</a>
                        <a data-ulid="expand_this" onClick={toggleMenuItem(this)} href="#">Expand This ▼</a>
                        <ul id="expand_this">
                            <li><a href="#">Coffee</a></li>
                            <li><a href="#">Coverage</a></li>
                        </ul>

                        <a href="#">Clients</a>
                        <a href="#">Contact</a>
                    </div>

                    <div id="main" className={"super-animation" + (mainShow ? "main-show" : "")}>
                        
                        <p>Below is a button to open sidebar</p>
                        <button className="openbtn" onClick={sideNavClicked}>☰</button>

                        <p>main content below</p>
                        {children}
                    
                    </div>
                </div>


            </div>


        </>
    )
}

export default SidebarColors

The use of a constructor was not possible, prompting the need for React.useState. However, invoking functions such as setShowSidebar(true) to add or remove classes from an element did not show any changes on the page.

If there are suggestions on how to utilize state variables effectively to manage CSS classes, input would be appreciated. Thanks.

edit1 Following feedback, updated the code but encountered an error when trying to call openNav() due to Assignment To Constant Variable.

import React from 'react'
import '../css/SidebarColors.css';

const SidebarColors = ({ children }) => {

    const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
    const [showSidebar, setShowSidebar] = React.useState(true);
    const [mainShow, setMainShow] = React.useState(true);

    function sideNavClicked() {
        console.log('isSidebarOpen = ', isSidebarOpen)
        isSidebarOpen ? closeNav() : openNav();
    }

    function openNav() {
        console.log('openNav')
        isSidebarOpen = true;
        this.setShowSidebar(true)
        //document.getElementById('mySidebar').classList.add('sidebar-         show');
        //this.setMainShow(true)
        //document.getElementById('main').classList.add('main-show');
    }

    function closeNav() {
        console.log('closeNav')
        isSidebarOpen = false;
        this.setShowSidebar(false)
        //document.getElementById('mySidebar').classList.remove('sidebar-         show');
        //this.setMainShow(false)
        //document.getElementById('main').classList.remove('main-show');
    }

    function toggleMenuItem(element) {
        //console.log('toggleMenuItem')
        //this.setSidebarMenuToggle(false)
        // 
        //document.getElementById(element.dataset.ulid).classList.toggle("ul-show");
    }

    return (
        <>
            <div>
                <button onClick={() => setShowSidebar(true)}>debug button: open sidebar</button>

                <div className="main-content">
                    <div id="mySidebar" className={"sidebar super-animation " + (showSidebar ? "sidebar-show" : "")}>
                        <a href="" className="closebtn" onClick={closeNav}>x</a>
                        <a href="#">About</a>
                        <a data-ulid="expand_this" onClick={toggleMenuItem(this)} href="#">Expand This ▼</a>
                        <ul id="expand_this">
                            <li><a href="#">Coffee</a></li>
                            <li><a href="#">>Coverage</a></li>
                        </ul>

                        <a href="#">Clients</a>
                        <a href="#"&t;Contact</a>
                    </div>

                    <div id="main" className={"super-animation" + (mainShow ? "main-show" : "&tquot;")}>
                        
                        <p>Below is a button to open sidebar</p>
                        <button className="openbtn" onClick={sideNavClicked}>⮞</button>

                        <p>t;main content below&t;/p>
                        {children}
                    
                    </div>
                </div>


            </div>


        </>
    )
}

export default SidebarColors