astro/examples/snowpack/public/css/components/_nav.scss

@use '../var' as *;

/**
 * Top nav
 * The thing at the top
 */

.snow-nav {
  position: sticky;
  top: 0;
  z-index: map-get($map: $layers, $key: 'nav');
  display: grid;
  grid-template-areas: 
  'mobile logo version'
  'search search search';
  grid-template-rows: $nav-height $nav-height;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  height: $nav-height;
  padding-right: 0.5rem;
  padding-left: 0.625rem;
  color: $white;
  background-color: $dark-blue;

  body.is-nav-open & {
    height: $nav-height * 2;
  }

  @media (min-width: $breakpoint-m) {
    display: flex;
    height: $nav-height;
    padding-left: 0;
  }

  // -----------
  //  Components
  // -----------

  &-link {
    display: inline-block;
    padding: 0.5em;
    color: $white;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 150ms linear;

    &:focus,
    &:hover {
      opacity: 1;
    }

    &__desktop {
      display: none;

      @media (min-width: $breakpoint-m) {
        display: block;
      }
    }
  }

  &-logo {
    display: flex;
    grid-area: logo;
    justify-content: center;
    padding: 0.5rem;
    color: $white;
    font-size: 24px;
    text-decoration: none;

    @media (min-width: $breakpoint-m) {
      justify-content: flex-start;
      padding: 0.5rem 1.25rem;
    }
  }

  &-mobile-open {
    display: flex;
    grid-area: mobile;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: $white;
    font-size: 16px;
    background: none;
    border: none;
    appearance: none;

    @media (min-width: $breakpoint-m) {
      display: none;
    }
  }

  &-version {
    grid-area: version;
    margin-left: 0.5em;
    font-size: 0.8em;
    font-family: $code;
    text-align: right;

    @media (min-width: $breakpoint-m) {
      text-align: left;

      &::after {
        display: inline-block;
        width: 1px;
        height: 1.5em;
        margin-left: 0.5em;
        vertical-align: -25%;
        background-color: rgba($white, 0.25);
        content: '';
      }
    }
  }
}