.sideMenu {
    /* width: 300px; */
    width: 100%;
    overflow: auto;
    box-shadow: 1px 0 0 rgb(0 0 0 / 10%);
    height: calc(100vh);
    padding: 40px 30px;
    transition: 0.9s ease-in-out;
    -webkit-transition: 0.9s ease-in-out;
}

    .sideMenu::-webkit-scrollbar {
        width: 10px;
    }

    .sideMenu::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }

    .sideMenu::-webkit-scrollbar-track {
        background-color: #eee;
    }

    .sideMenu > ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .sideMenu > ul > li {
            width: 100%;
        }

            .sideMenu > ul > li button {
                outline: none;
                border: none;
                width: 100%;
                cursor: pointer;
                text-align: left;
                display: flex;
                font-weight: bold;
                align-items: center;
                gap: 0 15px;
                margin-bottom: 5px;
                font-size: 20px;
                padding: 5px 0;
                background-color: transparent;
            }

                .sideMenu > ul > li button i {
                    font-size: 10px;
                }

    .sideMenu ul > ul {
        transition: 200ms ease;
        list-style: none;
        margin-left: 3px;
        overflow: hidden;
        padding: 0;
        margin-bottom: 10px;
    }

        .sideMenu ul > ul > li {
            border-left: 2px solid #ccc;
            width: 100%;
            transition: 200ms ease;
        }

            .sideMenu ul > ul > li a {
                text-decoration: none;
                transition: 100ms ease;
                display: inline-block;
                width: 100%;
                padding: 10px 20px;
                color: #777;
                font-size: 17px;
                text-transform: capitalize;
            }

            .sideMenu ul > ul > li:hover {
                border-left: 2px solid dodgerblue;
            }

                .sideMenu ul > ul > li:hover > a {
                    color: #000;
                }

    .sideMenu.open {
        width: 285px;
    }

button.active {
    color: dodgerblue;
}


.toggle-btn {
    position: absolute;
    top: 10px;
    left: 250px; /* Position the button half outside the sidebar */
    width: 30px;
    height: 30px;
    color: #eeeeee;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 50%; /* Make the button circular */
    z-index: 1000; /* Ensure the button stays on top */
}

    .toggle-btn i {
        position: relative;
        top: 1px;
    }

    .toggle-btn:hover {
        background-color: #cccccc;
        color: #212121;
    }