Daniels header

by batcave

HTML

<header class="header">
  <button class="hamburger">HAM</button>

  <div class="logo">Stayhard</div>

  <div class="navigation">
    <a href="#0" class="link">Link 1</a>
    <a href="#0" class="link">Link 2</a>
    <a href="#0" class="link">Link 3</a>
    <a href="#0" class="link">Link 4</a>
  </div>

  <div class="cart">
    search
  </div>
</header>


<div class="media-information">
<button class="media-information__action js-toggle-information">Show media information</button>

<table class="media-queries">
  <thead>
    <tr>
      <th>Breakpoint</th>
      <th>CSS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>640px</td>
      <td><code>@media (min-width: 640px) { ... }</code></td>
    </tr>
    <tr>
      <td>768px</td>
      <td><code>@media (min-width: 768px) { ... }</code></td>
    </tr>
    <tr>
      <td>1024px</td>
      <td><code>@media (min-width: 1024px) { ... }</code></td>
    </tr>
    <tr>
      <td>1280px</td>
      <td><code>@media (min-width: 1280px) { ... }</code></td>
    </tr>
    <tr>
      <td>1536px</td>
      <td><code>@media (min-width: 1536px) { ... }</code></td>
    </tr>
  </tbody>
</table>
</div>

CSS

.header {
  padding: 10px 20px;
  background-color: #ebebeb;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .header {
    background-color: red;
  }
}

@media (min-width: 1024px) {
  .header {
    background-color: aqua;
  }
}

.navigation {
  margin-left: 30px;
}

@media (min-width: 768px) {
  .navigation {
    display: block;
  }
}

.hamburger {
  border: 1px solid black;
  background-color: aqua;
  padding: 4px;
}

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

.cart {
  margin-left: auto;
}

.media-information {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #ededed;
  margin-top: 3rem;
  padding: 1rem;
}

.media-information__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem;
  border: 1px solid #000000;
  background-color: #ffffff;
}

.media-information__action:hover {
  cursor: pointer;
  background-color: #f2f2f2;
}

.media-information__action::after {
  content: '+';
  width: 1rem;
  height: 1rem;
  margin-left: 2rem;
  font-size: 1rem;
}

.media-information__action--is-active {
  background-color: #f9f9f9;
}

.media-information__action--is-active::after {
  content: '-';
}

.media-queries {
  display: none;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.media-queries--is-visible {
  display: unset;
}

.media-queries tbody tr:nth-child(odd) {
  background-color: white;
}

.media-queries th {
  padding: .25rem 1rem;
  font-weight: bold;
  text-align: left;
}

.media-queries td {
  padding: .25rem 1rem;
}

JavaScript

const toggler = document.querySelector('.js-toggle-information')

toggler.addEventListener('click', () => {
	/* toggle the media query table */
	const table = document.querySelector('.media-queries')
  table.classList.toggle('media-queries--is-visible')

	/* set active state on the button */
  toggler.classList.toggle('media-information__action--is-active')
})