/* This creates a skinny side bar fixed to the left of the page */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5rem;
    padding: 2rem 1rem;
    /* background-color: #cbd3dd; */
    z-index: 1050;
    transition: width 0.1s ease-in-out;
    border-right: 1px solid lightgray;
}

/* when the user hovers on the sidebar, expand it */
.sidebar:hover {
    width: 16rem;
}

/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar .nav-link {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* fix the width of the icons */
.sidebar .nav-link i {
    width: 1rem;
}

/* hide the navlink labels by default */
.sidebar .nav-link span {
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}

/* when the sidebar is hovered, reveal the labels */
.sidebar:hover .nav-link span {
    visibility: visible;
    opacity: 1;
    color: black;
}

/* container for the sidebar header. make sure the contents don't wrap when
 * the sidebar is collapsed.
 */
.sidebar-header {
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

/* position the header relative to the logo and hide by default */
.sidebar-header h2 {
    opacity: 0;
    margin-left: 1rem;
    margin-bottom: 0;
    transition: opacity 0.1s ease-in-out;
}

/* reveal the header when the sidebar is hovered */
.sidebar:hover .sidebar-header h2 {
    opacity: 1;
}

/* main page margin to avoid overlap */
#main_page {
    margin-left: 6rem; /* matches the default width of the sidebar */
    margin-right: 1rem;
    transition: margin-left 0.1s ease-in-out;
}

/* when the sidebar is hovered, shift the main page */
.sidebar:hover + #main_page {
    margin-left: 17rem; /* matches the expanded width of the sidebar */
}

/* Collapsed state (default)
.sidebar img {
    max-width: 3rem;
    transition: all 0.2s ease-in-out;
} */

/* Expanded (hover) state */
.sidebar:hover img {
    /* max-width: 10rem; */
    /* justify-content: center; */
}

/* Hide the expanded logo by default */
.expanded-logo {
    display: none;
}

/* When the sidebar is hovered, show expanded logo and hide collapsed logo */
.sidebar:hover .expanded-logo {
    display: block;
    max-width: 50rem;
}
.sidebar:hover .collapsed-logo {
    display: none;
}