#navbar {
  z-index:  9999;

  #navbar-router {
    width:            100%;
    display:          flex;
    justify-content:  space-between;
    flex-direction:   row;
    color:            $twitter-color;

    #menu-title {
      font-family:  bebas;
      color:        $hd-color;
      font-size:    $menu-font-size;
      text-align:   center;
    }

    #menu-items {
      display:          flex;
      justify-content:  space-between;
    }

    ldp-route {
      cursor:       pointer;
      font-size:    18px;
    }

    #menu-title[active],
    ldp-route[active] {
      border-bottom:  2px solid $hd-color;
      color:          $hd-color;
    }

    ldp-route:hover {
      border-bottom:  2px solid $hd-color;
    }
  }
}

.vertical-menu {
  position:             fixed;
  z-index:              9998;
  top:                  0px;
  bottom:               0px;
  right:                0px;
  margin:               auto;
  background-color:     white;
  width:                $vertical-menu-width;
  padding-top:          $menu-height;
  display:              flex;
  flex-direction:       column;
  color:                $twitter-color;
  font-size:            $menu-font-size;

  ldp-route {
    text-align:     center;
    cursor:         pointer;
    padding:        6px 0px;
    margin-bottom:  2px;
    border-left:    2px solid transparent;

    &[active] {
      border-left:  2px solid $hd-color;
      color:          $hd-color;
    }

    &:hover {
      border-left:  2px solid $hd-color;
    }
  }
}

.view-with-vertical-menu {
  padding-right:    $vertical-menu-width;
}