lbry-desktop/src/ui/scss/component/_header.scss

.header {
  width: 100%;
  height: var(--header-height);

  align-items: center;
  background-color: $lbry-white;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 1;

  html[data-mode='dark'] & {
    background-color: rgba($lbry-black, 0.9);
    color: $lbry-white;
  }
}

.header__navigation {
  display: flex;

  &:first-of-type {
    // Main navigation collapses into a menu button
    // at smaller screen widths
    @media (min-width: 601px) {
      width: 170px;
    }

    @media (max-width: 600px) {
      width: calc(var(--header-height) * 3 + 1px);
    }
  }
}

.header__navigation-app {
  flex: 1;
  display: flex;
  justify-content: space-between;

  // LBRY logo in the top left corner
  .lbry-icon {
    height: 1rem;
    width: 1rem;
    padding-left: 3.5rem;
    padding-top: 1.5rem;
    margin-right: 3.6rem;
    overflow: visible;
  }

  .header__navigation-arrows {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    border-left: 1px solid $lbry-gray-1;
  }
}

.header__navigation-item {
  height: var(--header-height);
  display: flex;
  justify-content: center;
  align-items: center;

  &:not(:disabled):hover {
    background-color: $lbry-gray-1;

    html[data-mode='dark'] & {
      background-color: $lbry-gray-5;
    }
  }

  &:disabled {
    opacity: 0.3;
  }

  .button__content {
    line-height: var(--header-height);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    width: 100%;
  }
}

.header__navigation-item--active {
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    mix(transparent, $lbry-teal-3, 70%) 90%
  );
}

.header__navigation-item--back,
.header__navigation-item--forward,
.header__navigation-item--home,
.header__navigation-item--menu {
  width: var(--header-height);

  svg {
    &:only-child {
      // Header icons are a little different because they are larger
      top: 0.25rem;
    }

    html[data-mode='dark'] & {
      stroke: $lbry-white;
    }
  }
}

.header__navigation-item--lbry {
  flex: 1;
  font-weight: 800;
  font-size: 1.2rem;
  margin-left: -1.25rem; // Needed because the lbry icon overflows it's parent so the centering is off

  svg {
    overflow: visible;
    color: $lbry-white;
    opacity: 1;
    top: -0.8rem;
  }
}

// Publish button
.header__navigation-item--right-action {
  position: relative;

  .button__content {
    display: flex;
    padding: 0 var(--spacing-vertical-large);
  }

  .button__label {
    line-height: 1.4;
    padding-left: 0.5rem;
  }

  svg {
    top: 0.1em;
  }

  &:not(:last-child) {
    border-right: 1px solid $lbry-gray-1;
  }

  html[data-mode='dark'] & {
    svg {
      stroke: $lbry-white;
    }
  }
}

.header__navigation-item--wallet {
  border-right: 1px solid $lbry-gray-1;
  width: 10rem;

  html[data-mode='dark'] & {
    border-color: $lbry-gray-5;
  }
}

.header__navigation-item--menu {
  @media (min-width: 601px) {
    display: none;
  }
}

// Hide links that will live in the menu bar
@media (max-width: 601px) {
  .header__navigation-item--back,
  .header__navigation-item--forward,
  .header__navigation-item--home,
  .header__navigation-item--right-action {
    display: none;
  }

  .header__navigation:first-child {
    display: none;
  }
}