navigation extension for static starter

navigation.css

.NavigationWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.NavigationSpacer {
  display: block;
  width: 100%;
  height: 64px;
}

.Navigation {
  display: flex;
  flex-direction: column;
}

.Navigation-logo {
  padding: var(--space-xs) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Navigation-logoLink {
  display: block;
  width: 100%;
  max-width: 150px;
}

.Navigation-logoLinkImage {
  width: 100%;
  display: block;
}

.Navigation-logoToggle {
  display: block;
  height: 50px;
  width: 50px;
  background: lightsalmon;
}

.Navigation-menu {
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 0;
  transition: max-height 350ms ease-in-out;
}

.Navigation-menu.is-open {
  max-height: calc(100vh - 50px - 2 * var(--space-xs));
}

.Navigation-menuList {
  display: flex;
  flex-direction: column;
}

.Navigation-menuList > li {
  margin-bottom: var(--space-xs);
}

.Navigation-menuList > li > a {
  padding: var(--space-sm) 0;
  display: block;
}

@media (--md-viewport) {

  .NavigationSpacer {
    display: block;
    width: 100%;
    height: 56px;
  }

  .Navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .Navigation-logoToggle {
    display: none;
  }

  .Navigation-menu {
    overflow: hidden;
    max-height: none;
  }

  .Navigation-menuList {
    flex-direction: row;
  }

  .Navigation-menuList > li {
    margin-bottom: 0;
    margin-left: var(--space-xs);
  }

  .Navigation-menuList > li > a {
    padding: var(--space-xs);
  }
}

@media (--lg-viewport) {

  .NavigationSpacer {
    height: 70px;
  }

  .Navigation-logoLink {
    max-width: 200px;
  }
}

navigation.html

<div class="NavigationWrapper">
    <div class="Content">
        <div class="Navigation">
            <div class="Navigation-logo">
                <a class="Navigation-logoLink" href="./">
                    <img class="Navigation-logoLinkImage" src="./img/logo/logo.png" alt="company logo">
                </a>
                <div class="Navigation-logoToggle"></div>
            </div>
            <div class="Navigation-menu">
                <ul class="Navigation-menuList">
                    <li><a href="https://google.de">Home</a></li>
                    <li><a href="https://google.de">Services</a></li>
                    <li><a href="https://google.de">Expertise</a></li>
                    <li><a href="https://google.de">Domains</a></li>
                    <li><a href="https://google.de">Team</a></li>
                    <li><a href="https://google.de">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="NavigationSpacer"></div>