<div class="page-wrap">
  <header>
      <button popovertarget="flyout" class="menu-trigger" href="#">
        <svg viewBox="0 0 448 512" width="100" title="bars">
      <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" />
  </svg>
        <span>Menu</span>
      </button>
</header>
  <main>
    <h1>Headline</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, molestiae, quasi unde animi nihil porro, voluptatibus sequi corporis dicta sed delectus nam. Nihil repellendus ab beatae soluta laborum modi sequi.</p>
  </main>
</div>

<nav popover id="flyout">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

@import "https://unpkg.com/open-props";

.page-wrap {
  transition: translate .5s;
}

header {
  display: flex;
  justify-content: end;
}

.menu-trigger {
  background: transparent;
  border: 1px solid currentcolor;
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 1rem;
  padding: .5rem 1rem;
  place-items: center;
  text-decoration: none;
  transition: background .25s filter .25s;
  
  svg {
    fill: #fff;
    max-inline-size: 30px;
  }
  
  &:has(:hover, :focus-visible) {
    background: #000;
    filter: brightness(50%);
  }
}

#flyout {
  background-color: var(--gray-0);
  box-shadow: var(--shadow-6);
  height: 100vh;
  position: fixed;
  inset: unset;
  top: 0;
  left: 100%;
  translate: 0;
  transition: translate 5s ease-in;
  width: 250px;
  z-index: 2;
}

nav ul {
  display: flex;
  flex-direction: column;
  line-height: 1;
  list-style: "";
  margin: 0;
  padding: 0;
  
  li {
    display: flex;
    flex: 1;
    margin: 0;
    padding: 1rem 0;
    transition: background .25s;
    
    a {
      color: var(--orange-8);
      margin-inline-start: 5px;
      text-decoration: none;
      text-transform: uppercase;
      transition: translate .25s;
      
      &:is(:hover, :focus) {
        color: #fff;
        translate: 1ch 0;
      }
    }
    
    &:not(:last-of-type) {
      border-block-end: 1px solid var(--orange-8);
    }
    
    &:has(:hover, :focus-visible) {
      background: var(--orange-10);
    }
  }
}

body:has(#flyout:popover-open) .page-wrap {
  translate: -250px 0;
}

[popover] {
  overflow: hidden;
}

#flyout:popover-open {
  animation: slide .5s forwards;
  border: 0;
  opacity: 1;
}

#flyout::backdrop {
  background: hsl(0 0% 15% / 0.5);
  backdrop-filter: blur(8px);
  transition: opacity 0.5s, display 0.5s, overlay 0.5s;
}

@keyframes slide {
  to { translate: -250px; }
}

@layer base {
  * { box-sizing: border-box; }
  
  html {
    background-color: var(--surface-2);
    background-position: top center;
    background-repeat: no-repeat;
    background-image: radial-gradient(50% 50% at top center,rgba(0,0,0,.66), #262626),linear-gradient(180deg,#fff, #262626);
    background-size: 120% 2000px,100% 2000px;
  }
  
  body {
    color: #fff;
    font-family: "Freeman", sans-serif;
    font-size: 2rem;
    max-inline-size: 100%;
    overflow-x: hidden;
  }
  
  main {
    padding-inline: 3rem;
  }
}