funkwhale/front/src/style/components/_sidebar.scss

.ui.wide.left.sidebar {
    @include media(">desktop") {
        width: $desktop-sidebar-width;
    }
    @include media(">widedesktop") {
        width: $widedesktop-sidebar-width;
    }
}

.sidebar {
    .logo {
        &.bordered.icon {
            padding: .5em .41em !important;
        }
        path {
            fill: white;
        }
    }
    .tab {
        flex-direction: column;
    }
}

.component-sidebar {
    .ui.search .input {
        flex: 1;
        .prompt {
            border-radius: 0;
        }
    }
    .ui.search .results {
        vertical-align: middle;
    }
    .ui.search .name {
        vertical-align: middle;
    }
    &.sidebar {
        z-index: 10000 !important;
        overflow-y: visible !important;
        background: var(--sidebar-background);
        z-index: 1;
        @include media(">desktop") {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 4em;
        }
        >nav {
            flex-grow: 1;
            overflow-y: auto;
        }
        @include media(">desktop") {
            .menu .item.collapse-button-wrapper {
                padding: 0;
            }
            .collapse.button {
                display: none !important;
            }
        }
        @include media("<=desktop") {
            position: static !important;
            width: 100% !important;
            &.collapsed {
                .player-wrapper,
                .search,
                .signup.segment,
                nav.secondary {
                    display: none;
                }
            }
        }
        >div {
            margin: 0;
            background-color: var(--sidebar-background);
        }
        .menu.vertical {
            background: transparent;
        }
    }
    .ui.vertical.menu {
        .item .item {
            font-size: 1em;
            >i.icon {
                float: none;
                margin: 0 0.5em 0 0;
            }
        }
        .item.router-link-exact-active {
            border-right: 5px solid var(--vibrant-color);
            border-radius: 0 !important;
            background: var(--sidebar-active-item-background) !important;
        }
        .item.collapsed {
            &:not(:focus)>.menu {
                display: none;
            }
            .header {
                margin-bottom: 0;
            }
        }
        .collapsible.item .header {
            cursor: pointer;
        }
    }
    .ui.secondary.menu {
        margin-left: 0;
        margin-right: 0;
    }
    .tabs {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        justify-content: space-between;
        @include media("<=desktop") {
            max-height: 500px;
        }
    }
    .ui.tab.active {
        display: flex;
    }
    .tab[data-tab="queue"] {
        flex-direction: column;
        tr {
            cursor: pointer;
        }
        td:nth-child(2) {
            width: 55px;
        }
    }
    .item .header .angle.icon {
        float: right;
        margin: 0;
    }
    .tab[data-tab="library"] {
        flex-direction: column;
        flex: 1 1 auto;
        >.menu {
            flex: 1;
            flex-grow: 1;
        }
        >.player-wrapper {
            width: 100%;
        }
    }
    .sidebar .segment {
        margin: 0;
        border-radius: 0;
    }
    .ui.menu .item.inline.admin-dropdown.dropdown>.menu {
        left: 0;
        right: auto;
    }
    .ui.segment.header-wrapper {
        background: var(--sidebar-header-background);
        color: var(--sidebar-header-color);
        box-shadow: var(--sidebar-header-box-shadow);
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 4em;
        margin-bottom: 0;
        nav {
            >.item,
            >.menu>.item>.item {
                &:hover {
                    background-color: transparent;
                }
            }
        }
    }
    nav.top.title-menu {
        flex-grow: 1;
        .item {
            font-size: 1.5em;
        }
    }
    .logo {
        cursor: pointer;
        display: inline-block;
        margin: 0px;
    }
    &.collapsed .search-wrapper {
        @include media("<desktop") {
            padding: 0;
        }
    }
    .ui.search {
        display: flex;
    }
    .ui.message.black {
        background: var(--sidebar-background);
    }
    .ui.mini.image {
        width: 100%;
    }
    nav.top {
        align-items: self-end;
        padding: 0.5em 0;
        >.item,
        >.right.menu>.item {
            // color: rgba(255, 255, 255, 0.9) !important;
            font-size: 1.2em;
            &:hover,
            >.dropdown>.icon {
                // color: rgba(255, 255, 255, 0.9) !important;
            }
            >.label,
            >.dropdown>.label {
                font-size: 0.5em;
                right: 1.7em;
                bottom: -0.5em;
                z-index: 0 !important;
            }
        }
    }
    .ui.user-dropdown .ui.menu {
        left: auto;
        right: 0;
    }
    .ui.user-dropdown>.text>.label {
        margin-right: 0;
    }
    .logo-wrapper {
        display: inline-block;
        margin: 0 auto;
        @include media("<desktop") {
            margin: 0;
        }
        img {
            height: 1em;
            display: inline-block;
            margin: 0 auto;
        }
        @include media(">tablet") {
            img {
                height: 1.5em;
            }
        }
    }
}