.sidebar {
    width: 250px;
    position: fixed;
    left: 0;
    top: 50px; /* Adjust based on your navbar height */
    bottom: 0;
    background-color: #f8f8f8;
    border-right: 1px solid #ddd;
    padding: 15px;
    transition: width 0.3s ease;
    overflow-y: auto;
}

.sidebar.collapsed {
    width: 0;
    padding: 0;
    display: none!important; /* Hide when collapsed */
}

/* Main content adjustment */
#page-wrapper {
    margin-left: 250px;
    transition: margin-left 0.3s ease;
    padding: 20px; /* Optional padding */
}

#page-wrapper.collapsed {
    margin-left: 0;
}

/* Collapse button style */
.navbar-header .collapse-button {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 20px;
    padding: 10px 15px;
    color: #333;
}

.navbar-header .collapse-button:focus {
    outline: none;
}

/* Ensure the toggle button is visible on smaller screens */
@media (max-width: 768px) {
    .sidebar {
        width: 0;
        display: none;
    }

    #page-wrapper {
        margin-left: 0;
    }

    #sidebar.collapsed {
        display: block;
        width: 250px;
        position: fixed;
        left: 0;
        top: 50px;
        height: 100%;
        z-index: 1030;
    }

    #page-wrapper.collapsed {
        margin-left: 0;
    }
}