/* Default styles for larger screens */
#sidebar {
    width: 16rem; /* Expanded width */
}

/* Collapsed sidebar styles */
#sidebar.collapsed {
    width: 4rem; /* Collapsed width */
}

#sidebar.collapsed span {
    display: none; /* Hide text when collapsed */
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    #sidebar {
        width: 4rem; /* Collapse sidebar by default on small screens */
    }

    #sidebar span {
        display: none; /* Hide text when collapsed */
    }

    #sidebar.collapsed {
        width: 16rem; /* Expand sidebar when toggled */
    }

    #sidebar.collapsed span {
        display: inline; /* Show text when expanded */
    }
}