JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="stackoverflowExample.css">
    
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" charset="UTF-8"></script>
    <!--<title>Dashboard Sidebar Menu</title>--> 
</head>
<body>
    <nav class="sidebar" id="id_sidebar">
            <div class="bottom-content">
                <li class="">
                    <a href="#">
                        <i class='bx bx-log-out icon' ></i>
                        <span class="text nav-text">Logout</span>
                    </a>
                </li>

                <li class="mode">
                    <div class="sun-moon">
                        <i class='bx bx-moon icon moon' id="id_moon_icon"></i>
                        <i class='bx bx-sun icon sun' id="id_sun_icon"></i>
                    </div>
                    <div class="mode-text text" id="id_darkMode">Dark mode</div>
                    <div class="mode-textL text" id="id_lightMode">Light mode</div>

                    <div class="toggle-switch" id="id_toggle-switch">
                        <div class="switch" id="id_switch">
                            <div class="button_switch" id="id_button_switch"></div>
                        </div>
                    </div>
                </li>
                
            </div>
        </div>

    </nav>
    <script src="sidebar.js"></script>



</body>

CSS

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
/*---------------------------------------------------------------------------------------------*/
body{
    min-height: 100vh;
    /*background-color: rgb(30, 29, 29)*/;
    background-color: #000000;
    transition: var(--tran-05);
}

/*----------------------------------SIDE BAR--------------------------------*/
 .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 19%;
    padding: 10px 14px;
    background-color: #202023;
    transition: var(--tran-05);
    z-index: 100;
}
/*----------------------------------SIDEBAR HEADER--------------------------------*/
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
    color: #FFF;
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar .menu{
    margin-top: 40px;
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    text-decoration: none;
    transition: var(--tran-03);
}
.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}
.mode{
    background-color: #303034;
    position: relative;
    transition: var(--tran-05);
}
.sun-moon i.sun,
.mode-textL{
    display:...

JavaScript

var button = document.getElementById("id_switch");
var div2 = document.getElementById("id_sidebar");
var div = document.getElementById("id_button_switch");
var div3 = document.getElementById("id_sun_icon");
var div4 = document.getElementById("id_lightMode");
var div5 = document.getElementById("id_moon_icon");
var div6 = document.getElementById("id_darkMode");

button.addEventListener("click", function() {
  if (div.style.marginLeft === "20px") {
    div.style.marginLeft = "2.5px";
  } else {
    div.style.marginLeft = "20px";
  };
});
button.addEventListener("click", function() {
  if (div2.style.backgroundColor === "#012342") {
    div2.style.backgroundColor = "#202023";
  } else {
    div2.style.backgroundColor = "#012342";
  };
});
button.addEventListener("click", function() {
  if (div3.style.display === "flex") {
    div3.style.display = "none";
  } else {
    div3.style.display = "flex";
  };
});
button.addEventListener("click", function() {
  if (div5.style.display === "none") {
    div5.style.display = "flex";
  } else {
    div5.style.display = "none";
  };
});
button.addEventListener("click", function() {
  if (div4.style.display === "flex") {
    div4.style.display = "none";
  } else {
    div4.style.display = "flex";
  };
});
button.addEventListener("click", function() {
  if (div6.style.display === "none") {
    div6.style.display = "flex";
  } else {
    div6.style.display = "none";
  };
});