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 {
    html[data-mode='dark'] & {
      border-color: $lbry-gray-5;
    }

    // Main navigation collapses into a menu button
    // at smaller screen widths

    @media (min-width: 601px) {
      /* @if TARGET='app' */
      width: 250px;
      /* @endif */
      /* @if TARGET='web' */
      // width: 170px;
      /* @endif */
    }

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

.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--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;
  padding-left: var(--spacing-vertical-large);

  .button__content {
    text-align: left;
  }
}

// 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: calc(100% - (var(--header-height) * 3));

  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;
  }
}