<nav>tur? Blanditiis,
        quibusdam.
      </p>
      <button
        class="nav-control"
        aria-haspopup="true"
        aria-expanded="false"
        aria-controls="nav"
        aria-pressed="false"
      >
        <span>Menu Collapsed</span><span>Menu Expanded</span
        ><svg class="nav__icon" viewBox="0 0 24 24" role="img">
          <title>Menu icon</title>
          <path
            d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
            fill="var(--color)"
          ></path>
          <path
            d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
            fill="var(--color)"
          ></path>
        </svg>
      </button>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Writing</li>
      </ul>
    </nav>
    <header>
      <h1>Some Awesome Site</h1>
    </header>
    <main>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam,
        quidem sunt dolorem earum facere modi aliquam laboriosam quos vitae
        ducimus laudantium quo cupiditate iste delectus. Sunt tenetur, est
        eligendi!
      </p>
      <p>
        Id molestias modi sunt, voluptatum omnis, deleniti quis dolores a non
        repudiandae, consectetur soluta nihil natus amet. Vitae sint maxime,
        quidem nam. Ab fugiat nostrum, aperiam consequatur dignissimos totam
        fugit?
      </p>
      <p>
        Odio facilis culpa nostrum, omnis nam quod cum architecto beatae
        cupiditate eaque asperiores, recusandae, ea esse odit porro accusantium
        earum ipsa possimus voluptas molestias et impedit. Illo cum deleniti
        necessitatibus?
      </p>
      <p>
        Possimus vel dicta, aut ad nulla nisi numquam a atque dolorum aliquid
        labore sunt velit neque alias. Harum cumque veniam numquam, explicabo,
        laborum magni voluptatibus deleniti molestias omnis recusandae quidem!
      </p>
      <p>
        Unde, delectus! Totam vero animi cum libero accusamus numquam minima
        culpa quam nesciunt omnis quae sapiente aliquid nemo nostrum earum alias
        asperiores illo, neque, delectus vel aliquam tene
    </main>

:root {
  --open: 0;
  --bg: var(--gray-9);
  --text-1: var(--gray-1);
  --text-2: var(--gray-1);
  --color: var(--gray-1);
  --header-gradient: var(--gradient-2);
  --hover-action: var(--gray-7);
  --nav-color: var(--gray-8);
  --link: var(--red-3);
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	font-family: 'Google Sans', sans-serif, system-ui;
	background: var(--bg);
  display: grid;
  color: var(--color);
  align-items: start;
  justify-items: center;
  min-height: 100vh;
  grid-auto-rows: min-content;
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease-1);
  overflow-x: hidden;
  transform: translateX(calc(var(--open, 0) * -200px));
}

[aria-pressed] {
  background: none;
  border-radius: 50%;
}

[aria-pressed]:hover {
  background: var(--hover-action);
}

nav {
  padding: var(--size-fluid-3) 0;
  width: 100vw;
  background: var(--nav-color);
  position: fixed;
  top: 0;
  width: 200px;
  left: 100%;
  bottom: 0;
  box-shadow: var(--inner-shadow-4);
}

header {
  padding: var(--size-12) 0;
  background: var(--header-gradient);
  width: 100%;
  display: grid;
  place-items: center;
}

h1 {
  text-align: center;
  width: 100%;
  font-size: var(--font-size-fluid-3);
  margin: 0;
}

:where(p, ul) {
  font-size: var(--font-size-fluid-0);
  max-inline-size: var(--size-content-2);
}

nav ul {
  list-style-type: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0;
  margin: 0;
  width: var(--size-xl);
  gap: var(--size-4);
  display: none;
}

nav li:hover {
  text-decoration: underline var(--size-1) var(--color);
}

button {
  height: 48px;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
}

button span {
  position: absolute;
  inset: 0;
  opacity: 0;
  color: transparent;
}

main {
	padding: var(--size-4);
}

* + p {
  margin-top: var(--size-4);
}

[aria-pressed] :is(span, svg title, svg path) {
  display: none;
}

[aria-pressed="false"] :is(span:nth-of-type(1), title:nth-of-type(1), path:nth-of-type(1)),
[aria-pressed="true"] :is(span:nth-of-type(2), title:nth-of-type(2), path:nth-of-type(2)){
  display: block;
}
/*
:root:has(.theme-toggle[aria-pressed="true"]) {
  --bg: var(--gray-1);
  --color: var(--gray-9);
  --nav-color: var(--gray-2);
  --hover-action: var(--gray-3);
  --header-gradient: var(--gradient-6);
}*/

button svg {
  height: 75%;
  stroke: none;
}

[aria-expanded] {
  position: absolute;
  top: var(--size-4);
  right: calc(100% + var(--size-4));
}

:root:has([aria-expanded="true"]) {
  --open: 1;
}

:root:has([aria-expanded="true"]) nav ul {
	display: flex;
}

const NAV_CONTROL = document.querySelector('.nav-control');

const CONTROL_NAV = () => {
  NAV_CONTROL.setAttribute('aria-expanded', NAV_CONTROL.matches('[aria-expanded="false"]') ? true : false);
  NAV_CONTROL.setAttribute('aria-pressed', NAV_CONTROL.matches('[aria-expanded="false"]') ? true : false);
};

NAV_CONTROL.addEventListener('click', CONTROL_NAV);