/* Based on this tutorial: https://www.youtube.com/watch?v=dAIVbLrAb_U */


/* Example HTML:
    <label class="hamburger-menu-button">
      <input type="checkbox">
    </label>
    <aside class="sidebar">
      <nav>
        <div id="navHome">Home</div>
        <div id="navPage1">Page1</div>
        <div id="navPage2">Page2</div>
      </nav>
    </aside>
*/


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

:root {
  --bar-width: 40px;
  --bar-height: 8px;
  --hamburger-gap: 6px;
  --hamburger-margin: 20px;
  --foreground: #333;
  --background: white;
  --inverted-foreground: var(--background);
  --inverted-background: var(--foreground);
  --animation-timing: 400ms ease-in-out;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu-button {
  --x-width: calc(var(--hamburger-height) * sqrt(2)); /* diagonal of right angle */

  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  width: max-content;
  position: absolute;
  top: var(--hamburger-margin);
  left: var(--hamburger-margin);
  z-index: 2;
  cursor: pointer;
}



/* invert colors for X */
.hamburger-menu-button:has(input:checked) {
  --foreground: var(--inverted-foreground);
  --background: var(--inverted-background);

}

/* hamburger menu button */
.hamburger-menu-button::before,
.hamburger-menu-button::after,
.hamburger-menu-button input {
  content: ""; /* adds empty content to before and after elements */
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--foreground);
  border-radius: 9999px;
  transform-origin: left center;
  transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing);
}

.hamburger-menu-button input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}

.hamburger-menu-button:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2); /* makes X appear symmetrical */
}

.hamburger-menu-button input:checked {
  opacity: 0;
  width: 0;
}

.hamburger-menu-button:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2); /* makes X appear symmetrical */
}

.sidebar {
  transition: translate var(--animation-timing);
  translate: -100%; /* stash sidebar off left side */
  padding: 0.5rem 1rem;
  /*padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1em);*/
  background-color: var(--inverted-background);
  color: var(--inverted-foreground);
  max-width: 8rem;
  min-height: 100vh;
}

.hamburger-menu-button:has(input:checked) + .sidebar {
  translate: 0;
  position: fixed;
  z-index: 2;
}

.sidebar nav div {
  cursor: pointer; /* Makes navigation links appear clickable */
  font-weight: bold;
}