#sidebar
  #menu-mask
    position: fixed
    z-index: 102
    display: none
    width: 100%
    height: 100%
    background: alpha($dark-black, .8)

  #sidebar-menus
    position: fixed
    top: 0
    right: -($sidebar-width)
    z-index: 103
    overflow-x: hidden
    overflow-y: auto
    width: $sidebar-width
    height: 100%
    background: var(--sidebar-bg)
    transition: all .5s

    &.open
      transform: translate3d(-100%, 0, 0)

    & > .author-avatar
      padding: 1.3rem 1.5rem 0
      text-align: center

      img
        width: 110px
        height: 110px
        border-radius: 70px
        transition: all .5s

        &:hover
          transform: rotate(360deg)

    .site-data
      display: table
      padding: .6rem .5rem 0
      width: 100%
      table-layout: fixed

      .data-item
        display: table-cell

        .data-item-link
          & > a > div
            @extend .limit-one-line

          .length-num
            color: var(--text-highlight-color)
            font-size: 1.28em

          .headline
            color: var(--font-color)

    hr
      margin: 1rem auto

    .menus_items
      padding: 0 .5rem 2rem

      .site-page
        @extend .limit-one-line
        position: relative
        display: block
        padding: .3rem 1.5rem
        color: var(--font-color)
        font-size: 1.15em
        cursor: pointer

        i:first-child
          width: 25%
          text-align: left

        span
          width: 75%

          &:hover
            color: $light-blue

      .expand
        position: absolute
        top: .78em
        right: .4rem
        transition: transform .3s

        &.hide
          transform: rotate(90deg) !important

      .menus_item_child
        margin: 0
        list-style: none

        if hexo-config('hide_sidebar_menu_child')
          display: none