bramw_baserow/web-frontend/src/scss/components/_menu.scss

.menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: $color-primary-600;
  color: $white;
}

.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  margin: 10px;
}

.menu-link {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 3px;
  color: $white;

  @include center-text(32px, 16px);

  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    text-decoration: none;
  }

  &.active {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

.menu-link-text {
  display: none;
  position: absolute;
  left: 36px;
  top: 50%;
  margin-top: -10.5px;
  background-color: $color-neutral-900;
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
  font-weight: 400;

  @include center-text(auto, 11px, 21px);

  a:hover & {
    display: block;
  }
}

.menu-user-item {
  border-radius: 100%;
  background-color: $color-primary-500;
  color: $white;
  font-weight: 700;

  @include center-text(32px, 18px);
}