JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">
<main>
  <nav>
    <ul>
      <li><strong>Acme Corp</strong></li>
      <li role="separator">
        <label for="checkbox-navigation">&#9776;</label>
      </li>
    </ul>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </nav>
</main>

<input type="checkbox" id="checkbox-navigation" hidden>
<dialog>
  <article>
    <header>
      <nav>
        <ul>
          <li>Acme Corp</li>
        </ul>
        <ul>
          <li><label for="checkbox-navigation">&times;</label></li>
        </ul>
      </nav>
    </header>
    <aside>
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Products</a></li>
        </ul>
      </nav>
    </aside>
  </article>
</dialog>

CSS

main > nav > ul > li[role=separator] {
  display: block;
}

main > nav > ul:not(:first-of-type) {
  display: none;
}

@media (min-width: 768px) {
  main > nav > ul > li[role=separator] {
    display: none;
  }
  main > nav > ul:not(:first-of-type) {
    display: block;
  }
}

#checkbox-navigation + dialog {
  display: none;
}

#checkbox-navigation:checked + dialog {
  display: block;
}