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

  #mobile-sidebar-menus
    position: fixed
    top: 0
    right: -250px
    z-index: 103
    overflow-x: hidden
    overflow-y: auto
    width: 250px
    height: 100%
    background: #f6f8fa
    transition: all .5s

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

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

        &:hover
          transform: rotate(360deg)

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

      .mobile_data_item
        display: table-cell

        .mobile_data_link
          & > a > div
            @extend .limit-one-line

          .length_num
            color: $dark-black
            font-size: .9rem

          .headline
            display: block
            color: $font-black
            font-size: .7rem

    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: $font-black
        font-size: .8rem
        cursor: pointer

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

        span
          width: 70%

          &:hover
            color: $light-blue

      .menus-expand
        position: absolute
        right: 0
        padding: .4rem
        transition: all .3s
        transform: rotate(0)

        &.menus-closed
          transform: rotate(90deg) !important

      .menus_item_child
        margin: 0
        list-style: none