.sidebar-content
    top: 64px
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important

.sidebar-user-card
    text-align: left
    padding: 2rem 1.5rem
    margin: 0.125rem 0.5rem
    display: block
    border: 0

.sidebar-user-avatar
    width: 80px
    height: 80px
    margin: 0
    display: block

.sidebar-user-name
    line-height: var(--mdui-typescale-headline-medium-line-height)
    font-size: var(--mdui-typescale-headline-medium-size)
    letter-spacing: var(--mdui-typescale-headline-medium-tracking)
    font-weight: var(--mdui-typescale-headline-medium-weight)

.sidebar-user-slogen
    line-height: var(--mdui-typescale-title-medium-line-height)
    font-size: var(--mdui-typescale-title-medium-size)
    letter-spacing: var(--mdui-typescale-title-medium-tracking)
    font-weight: var(--mdui-typescale-title-medium-weight)

.nav-list
    padding: 0.5rem

.nav-item
    margin: 0.1rem 0.5rem
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)

@media (max-width: 840px)
    .sidebar-content::before
        content: ""
        position: fixed
        top: 0
        left: 0
        right: 0
        bottom: 0
        background: transparent
        backdrop-filter: blur(5px)
        -webkit-backdrop-filter: blur(5px)
        z-index: -1
        opacity: 0
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
    
    .sidebar-content[open]::before
        opacity: 1
    
    .sidebar-content
        backdrop-filter: none