#list {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(-100%);
    opacity: 0;
    -webkit-overflow-scrolling: touch; /* Important for iOS */
    z-index: 1050;

}

#list.show {
    transform: translateX(0);
    opacity: 1;
    z-Index : 1050;
}



@media (max-width: 767.98px) {
    #bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform: translateX(-100%);
        z-index: -1;

    }


    #bar.active {
        z-index: 1050;

        /* Above content only when sidebar is open */
        transform: translateX(0);
    }

    #list {
        height: 100vh;
        width: 100vw;

    }
}




/* Collapse sidebar space on desktop only */
/*Desktop Specific styling*/
@media (min-width: 768px) {
    #bar.collapsed {
        width: 0 !important;
        flex: 0 0 0% !important;

        
    }


   

    #content.expanded {
        transition: transform 0.3s ease;
        transform: translateX(0);
        flex: 1 0 100%;
        max-width: 100%;
        opacity: 1;
    }
}