Navbar.module.sass

@import "../../assets/main"

$menubarHeight: 60px

.bar
  z-index: 10
  width: 100%
  height: $menubarHeight
  background-color: #000000
  position: sticky
  top: 0
  display: flex
  align-items: center

.logoLink
  margin-left: 40px
  margin-right: auto

.logo
  height: 30px
  cursor: pointer

.navbarLink
  text-decoration: none
  color: $yellowAccent
  padding-left: 15px
  padding-right: 15px
  font-weight: bold
  font-size: 18px
  line-height: $menubarHeight
  height: $menubarHeight
  display: inline-block
  -webkit-transition: all .17s ease-in-out
  -moz-transition: all .17s ease-in-out
  -o-transition: all .17s ease-in-out
  -ms-transition: all .17s ease-in-out
  transition: all .17s ease-in-out
  &.highlighted
    background-color: $yellowAccentHighlighted
    color: #000000
    padding-left: 20px
    padding-right: 20px
    margin-right: 15px
  &.selected
    color: #ffffff
  &:hover
    &:not(.highlighted)
      color: #ffffff
    &.highlighted
      background-color: #ffffff
  //
  //&:last-child
  //  margin-right: 40px

.avatar
  height: 40px
  margin-right: 40px
  margin-left: 15px
  display: inline-block

.rightWrapper
  display: flex
  align-items: center