The header

Talking of mobile-first vs. desktop-first, our header and navigation have some very big differences between small and large screen sizes.

We'll explore the mobile version of in a future lesson, and for now, we'll simply use an intrinsic layout instead.

I actually prefer this approach for simple navigations most of the time anyway!

<header class="site-header">
  <div class="wrapper" data-type="wide">
    <div class="site-header__inner">
      <a href="/">
        <img class="logo" src="/assets/fungi-finders.svg" />
      </a>

      <nav class="primary-navigation">
        <ul>
          <li><a href="#">Discover</a></li>
          <li><a href="#">Mushroom guide</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

.site-header {
  padding-block: 1rem;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

.primary-navigation {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }

  a {
    text-decoration: none;
  }
}

What layer does this go in?

You could easily make an argument that everything here should go in the layout layer.

Personally, I tread the layout layer as more of a "reusable layouts" area though.

When things become more one-off, I like to put them in a components layer instead.