<ul class="_screen">
  <li><label><input type="radio" name="screen" id="small-screen" checked /> Small screen</label></li>
  <li><label><input type="radio" name="screen" id="large-screen" /> Large screen</label></li>
</ul>

<h1>CSS-only header drawer menu</h1>

<h2>Using checkbox</h2>

<div class="_header-1">
  <p class="_header-1_title"><a href="#">Site name</a></p>
  <p class="_header-1_ctrl">
    <input type="checkbox" id="header-1_toggle" aria-controls="header-1_menu" />
    <label for="header-1_toggle">Display menu</label>
  </p>
  <nav id="header-1_menu" class="_header-1_menu">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Topics</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="_header-1_remote-ctrl" aria-hidden="true">
      <label for="header-1_toggle"></label>
    </div>
  </nav>
</div>

<h2>Using dialog</h2>

<div class="_header-2">
  <p class="_header-2_title"><a href="#">Site name</a></p>
  <nav class="_header-2_menu">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Topics</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <p class="_header-2_dialog-show">
    <button type="button" popovertarget="header-2-dialog" popovertargetaction="show">Open menu</button>
  </p>
  <dialog class="_header-2-dialog" id="header-2-dialog" popover="auto">
    <nav class="_header-2-dialog_menu">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Topics</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <p class="_header-2-dialog_hide">
      <button type="button" popovertarget="header-2-dialog" popovertargetaction="hide">Close menu</button>
    </p>
  </dialog>
</div>

*,
::before,
::after {
  box-sizing: border-box;
  letter-spacing: var(--letter-spacing, 0);
  line-height: var(
    --line-height,
    calc(
      var(--rem-size, 1rem) * var(--rem-ratio, 1) * var(--rem-scale, 1) + 1em
    )
  );
}
:where(:focus-visible) {
  outline: solid medium Highlight;
}
html {
  --letter-spacing: calc(1em / 32);
  --rem-ratio: calc(3 / 4);
  background: #f0f0f0;
  color: #202020;
  font-family: "Noto Sans", sans-serif;
}
body {
  margin: 0;
  min-block-size: 200dvb;
  padding: 1rem;
}
:is(h1, h2) {
  --sp-size: 4rem;
}
:is(p, ul, div) {
  --sp-size: 2rem;
}
:is(h1, h2, p, ul, div) {
  --sp: calc(var(--sp-size, 1rem) * var(--sp-ratio, 1) * var(--sp-scale, 1));
  margin: 0;

  :where(&) ~ & {
    margin-block-start: var(--sp);
  }
}
._screen {
  display: flex;
  gap: 1px;
  margin: 0;
  padding: 1px;

  li {
    border: solid 1px #202020;
    display: block;
    flex: 1 0 0%;
    margin: -1px;

    label {
      cursor: pointer;
      display: block;
      padding-block: calc(0.5lh - 0.5em);
      padding-inline: calc(1lh - 1em);
      text-align: center;

      &:has(> :checked) {
        background: #202020;
        color: #fff;
      }
      &:has(> :focus-visible) {
        outline: solid medium Highlight;
      }
      input {
        appearance: none;
        outline: none;
        position: absolute;
      }
    }
  }
}

/**************
 * ._header-1 *
 **************/

._header-1 {
  background: #fff;
  color: #202020;
  box-shadow: 0 1px 4px -2px;
  padding-block: 1rem;
  padding-inline: max(2rem, 50cqi - 30rem);
  display: flex;
  column-gap: 2rem;
  justify-content: space-between;
  align-items: center;
}
._header-1_title {
  font-size: larger;
  font-weight: bolder;
  margin: 0;

  a {
    color: inherit;

    &:not(:hover, :focus-visible) {
      text-decoration: none;
    }
  }
}
/* @media not ((any-hover: hover) and (pointer: fine) and (width > 60rem)) */
:root:has(#small-screen:checked) {
  ._header-1_ctrl {
    margin: 0;

    input {
      appearance: none;
      backdrop-filter: blur(4px);
      background: color-mix(in srgb, transparent, #000 50%);
      margin: 0;
      opacity: 0;
      outline: none;
      position: fixed;
      inset-block: 0 100%;
      inset-inline: 0;
      transition: inset-block 0s calc(1s / 4), opacity calc(1s / 4);
      z-index: 1e5;
    }
    label {
      background: linear-gradient(currentcolor 0 0) no-repeat 50%
          calc(50% - 0.375rem) / 1rem 0.125rem,
        linear-gradient(currentcolor 0 0) no-repeat 50% / 1rem 0.125rem,
        linear-gradient(currentcolor 0 0) no-repeat 50% calc(50% + 0.375rem) /
          1rem 0.125rem,
        color-mix(in srgb, transparent, currentcolor 10%);
      block-size: 2rem;
      border-radius: 50%;
      cursor: pointer;
      display: block;
      inline-size: 2rem;
      overflow: hidden;
      padding-block-start: 2rem;

      &:hover {
        background-color: #202020;
        color: #fff;
      }
    }
  }
  ._header-1_menu {
    --inline-size: min(20rem, 100%);
    background: #fff;
    display: flex;
    flex-flow: column;
    row-gap: 2rem;
    inline-size: var(--inline-size);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 2rem;
    position: fixed;
    inset-block: 0;
    inset-inline: auto calc(var(--inline-size) * -1);
    transition: inset calc(1s / 4);
    z-index: calc(infinity);

    ul {
      display: flex;
      flex-flow: column;
      row-gap: 2rem;
      margin: auto;
      padding: 0;
      text-align: center;
      text-wrap: balance;
      text-wrap: pretty;

      li {
        display: block;

        a {
          color: inherit;
          display: inline-block;
          font-weight: bolder;

          &:not(:hover, :focus-visible) {
            text-decoration: none;
          }
        }
      }
    }
  }
  ._header-1_remote-ctrl {
    inline-size: fit-content;
    margin: 0;
    margin-inline: auto 0;
    order: -1;
    position: sticky;
    inset-block-start: 0;

    label {
      background: linear-gradient(currentcolor 0 0) no-repeat 50% / 1rem
          0.125rem,
        linear-gradient(currentcolor 0 0) no-repeat 50% / 0.125rem 1rem,
        color-mix(in srgb, transparent, currentcolor 10%);
      block-size: 2rem;
      border-radius: 50%;
      cursor: pointer;
      display: block;
      inline-size: 2rem;
      rotate: 45deg;

      &:hover {
        background-color: #202020;
        color: #fff;
      }
    }
  }
  ._header-1:has(#header-1_toggle:checked, #header-1_menu:focus-within) {
    ._header-1_ctrl input {
      inset-block: 0;
      opacity: 1;
      transition: inset-block 0s, opacity calc(1s / 4);
    }
    ._header-1_menu {
      inset-inline: auto 0;
    }
  }
  ._header-1:has(#header-1_menu:focus-within) {
    ._header-1_ctrl input:not(:checked) {
      pointer-events: none;
    }
  }
  ._header-1:has(#header-1_toggle:focus-visible) {
    ._header-1_ctrl label,
    ._header-1_remote-ctrl label {
      outline: solid medium Highlight;
    }
  }
  /* :root:has(#header-1_toggle:checked, #header-1_menu:focus-within) */
  &:has(#header-1_toggle:checked, #header-1_menu:focus-within) {
    overflow: hidden;
    pointer-events: none;
    scrollbar-gutter: stable;

    ._header-1_ctrl,
    ._header-1_menu {
      pointer-events: auto;
    }
  }
}
/* @media (any-hover: hover) and (pointer: fine) and (width > 60rem) */
:root:has(#large-screen:checked) {
  ._header-1_ctrl,
  ._header-1_remote-ctrl {
    display: none;
  }
  ._header-1_menu {
    margin: 0;

    ul {
      display: flex;
      flex-flow: wrap;
      gap: 1rem 2rem;
      justify-content: end;
      margin: 0;
      padding: 0;

      li {
        display: block;
        margin: 0;

        a {
          color: inherit;
          display: inline-block;
          font-weight: bolder;

          &:not(:hover, :focus-visible) {
            text-decoration: none;
          }
        }
      }
    }
  }
}

/**************
 * ._header-2 *
 **************/

._header-2 {
  background: #fff;
  color: #202020;
  box-shadow: 0 1px 4px -2px;
  padding-block: 1rem;
  padding-inline: max(2rem, 50cqi - 30rem);
  display: flex;
  column-gap: 2rem;
  justify-content: space-between;
  align-items: center;
}
._header-2_title {
  font-size: larger;
  font-weight: bolder;
  margin: 0;

  a {
    color: inherit;

    &:not(:hover, :focus-visible) {
      text-decoration: none;
    }
  }
}
._header-2_menu {
  margin: 0;

  ul {
    display: flex;
    flex-flow: wrap;
    gap: 1rem 2rem;
    justify-content: end;
    margin: 0;
    padding: 0;

    li {
      display: block;
      margin: 0;

      a {
        color: inherit;
        display: inline-block;
        font-weight: bolder;

        &:not(:hover, :focus-visible) {
          text-decoration: none;
        }
      }
    }
  }
}
._header-2_dialog-show {
  margin: 0;

  button {
    appearance: none;
    background: linear-gradient(currentcolor 0 0) no-repeat 50%
        calc(50% - 0.375rem) / 1rem 0.125rem,
      linear-gradient(currentcolor 0 0) no-repeat 50% / 1rem 0.125rem,
      linear-gradient(currentcolor 0 0) no-repeat 50% calc(50% + 0.375rem) /
        1rem 0.125rem,
      color-mix(in srgb, transparent, currentcolor 10%);
    block-size: 2rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    inline-size: 2rem;
    overflow: hidden;
    padding: 0;
    padding-block-start: 2rem;

    &:hover {
      background-color: #202020;
      color: #fff;
    }
  }
}
._header-2-dialog {
  --inline-size: min(20rem, 100%);
  block-size: 100%;
  border: none;
  inline-size: var(--inline-size);
  inset-block: 0;
  inset-inline: auto 0;
  margin: 0;
  overflow: auto;
  padding: 2rem;
  transition: display calc(1s / 4) allow-discrete, inset calc(1s / 4);

  &::backdrop {
    background: color-mix(in srgb, transparent, #000 50%);
    backdrop-filter: blur(4px);
    opacity: 1;
  }
  &:popover-open {
    display: flex;
    flex-flow: column;
    row-gap: 2rem;
  }
  &:not(:popover-open) {
    inset-inline: auto calc(var(--inline-size) * -1);
  }
  @starting-style {
    inset-inline: auto calc(var(--inline-size) * -1);
  }
}
._header-2-dialog_menu {
  margin: auto;

  & > ul {
    display: flex;
    flex-flow: column;
    row-gap: 2rem;
    margin: 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    text-wrap: pretty;

    li {
      display: block;

      a {
        color: inherit;
        display: inline-block;
        font-weight: bolder;

        &:not(:hover, :focus-visible) {
          text-decoration: none;
        }
      }
    }
  }
}
._header-2-dialog_hide {
  inline-size: fit-content;
  margin: 0;
  margin-inline: auto 0;
  order: -1;
  position: sticky;
  inset-block-start: 0;

  button {
    appearance: none;
    background: linear-gradient(currentcolor 0 0) no-repeat 50% / 1rem 0.125rem,
      linear-gradient(currentcolor 0 0) no-repeat 50% / 0.125rem 1rem,
      color-mix(in srgb, transparent, currentcolor 10%);
    block-size: 2rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    inline-size: 2rem;
    overflow: hidden;
    padding: 0;
    padding-block-start: 2rem;
    rotate: 45deg;

    &:hover {
      background-color: #202020;
      color: #fff;
    }
  }
}
:root:has(#header-2-dialog:popover-open) {
  overflow: hidden;
  pointer-events: none;
  scrollbar-gutter: stable;

  ._header-2-dialog {
    pointer-events: auto;
  }
}
/* @media not ((any-hover: hover) and (pointer: fine) and (width > 60rem)) */
:root:has(#small-screen:checked) {
  ._header-2_menu {
    display: none;
  }
}
/* @media (any-hover: hover) and (pointer: fine) and (width > 60rem) */
:root:has(#large-screen:checked) {
  ._header-2_dialog-show {
    display: none;
  }
}