#sidebar-section {
    min-width: 248px;
    height: 100vh;
    background-color: #1e1b4b;
    position: fixed;
    transition: ease-in-out 0.5s; /* Transisi lebar dan opacity */
    overflow: hidden; /* Sembunyikan konten yang tidak terlihat saat menyusut */
}

#sidebar-section-mobile {
    display: none;
}

#sidebar-content {
    display: flex;
    padding: 20px;
    flex-direction: column;
    gap: 20px;
    /* align-items: center; */
    width: 100%;
}

.sidebar-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sidebar-nav {
    display: flex;
    padding: 10px;
    background-color: #ffffff30;
    border-radius: 100%;
    cursor: pointer;
    transition: ease-in-out 0.2s;
}

.sidebar-nav:hover {
    background-color: #00bfff;
}

.sidebar-menus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.menu-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 4px;
    border-radius: 0px 24px 24px 0px;
    opacity: 90%;
}

.menu-item.active {
    background-color: #00bfff70;
    opacity: 100%;
}

.menu-item:hover {
    background-color: #00bfff70;
    opacity: 100%;
}

.sidebar-line-menu {
    height: 5px;
    width: 5px;
    background-color: #ffffff20;
    border-radius: 100px;
}

.sidebar-line-menu.active {
    background-color: #00bfff;
}

#sidebar-section.collapsed {
    min-width: 100px; /* Lebar saat sidebar menyusut */
    transition: ease 0.5s;
}

#sidebar-section.collapsed .sidebar-nav {
    rotate: 180deg;
    transition: ease 0.5s;
}

#sidebar-section.collapsed .sidebar-logo {
    justify-content: center;
}

#sidebar-section.collapsed #logo-gse img {
    width: 1px;
    transition: ease 0.3s;
}

#sidebar-section.collapsed .sidebar-menus p {
    width: 1px;
    opacity: 0;
    transition: ease 0.3s;
    white-space: nowrap;
    overflow: hidden;
}

#sidebar-section.collapsed #logo-gse,
#sidebar-section.collapsed .menu-item p {
    width: 1px;
    opacity: 0; /* Sembunyikan elemen <p> dan logo */
    transition: ease 0.3s;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-logo,
.sidebar-menus p {
    transition: opacity 0.5s ease; /* Transisi opacity untuk elemen ini */
}

@media only screen and (max-width: 580px) {
    #sidebar-section {
        display: none;
    }

    #sidebar-section-mobile {
        width: 100%;
        height: 56px;
        position: fixed;
        background-color: #110e36;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        z-index: 10;
        transition: all 0.3s ease-in;
    }

    #sidebar-section-mobile.show {
        height: 100%;
        gap: 16px;
    }

    .sidebar-menus-mobile {
        /* display: none; */
        opacity: 0;
        visibility: hidden;
    }

    .sidebar-menus-mobile.show {
        visibility: visible;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 16px 8px;
        opacity: 100%;
        transition: opacity 0.4s ease-in;
    }

    .sidebar-section-mobile-header {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .menu-item {
        padding: 12px 4px;
    }
}