$font-size-menu: calc(1rem + 0.3vh)

#topbar
  background: #222
  height: 4rem
  width: 100%
  position: fixed
  padding: 1.2rem 2rem
  top: 0
  z-index: 3000
  box-shadow: 10px 0px 15px
  display: flex
  align-items: center

  i
    color: white
    font-size: 1.2rem
    padding: 0 1rem
    position: absolute
    right: 1rem

  i:hover, i:focus
    outline: none

  img
    height: 1.3rem

.show div
  width: 250px

@media (min-width: 900px)
  #page-container
    margin-left: 15rem
    min-height: 100vh
    margin-top: 0 !important

  #topbar
    display: none !important

  #sidebar .logo
    display: block !important

  #filter-bar
    top: 0 !important

.show
  display: flex !important

#sidebar
  display: none
  align-items: center
  justify-content: center
  width: 16rem
  min-height: 100vh
  height: 100%
  position: fixed
  background-color: #37474F
  box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2)
  z-index: 5000
  overflow-y: auto

  div
    width: 100%

  .logo
    background-image: url("../public/logo_light.png")
    background-size: contain
    background-position: center
    background-repeat: no-repeat
    height: 25vh
    display: none

  .menu
    margin: 5vh 0rem

    .menu-item
      display: flex
      padding: 0.6rem
      color: white
      text-decoration: none
      font-size: $font-size-menu
      font-weight: 900

      img
        width: calc(1.2rem + 0.5vw)
        height: calc(1.2rem + 0.5vw)
        margin-right: 0.5rem

    .menu-item[aria-current="page"]
      background: #0097a7!important
      color: white!important
    .menu-item:hover, .menu-item:focus
      background: #ffc107
      color: black
      outline: none
      img
        transition-duration: 1s
        display: none!important

  .social-menu
    display: flex
    align-items: center
    justify-content: center

    .social-icon
      padding: 0.3rem
      display: flex
      align-items: center
      justify-content: center

      img
        width: 2rem

@media (max-width: 700px)
  #sidebar
    width: 100% !important
    padding: 0 10vw
    align-items: baseline
