Menu is "Block" style - pushes all other content downward.

[brentarias]

To represent my page content, I appended to your HTML the following:

<main>hello</main>

Unfortunately, the "hello" then appears far down the page regardless of whether the menu is open or closed. I presume there should be additional styling that indicates that the menu should be floating over other content. I would expect the "hello" to appear near the top of the page, and the menu simply covers it when it pops-out.

I made a quick and dirty "fix", by adjusting relative/absolute positioning...

      .sidebar {
        transition: translate var(--animation-timing);
        translate: -100% -5%;                 <====== With my new settings, the '-5%' became necessary. Don't know why.
        position: absolute;                      <====== I ADDED THIS.
        padding: 0.5rem 1rem;
        padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
        background-color: var(--foreground);
        color: var(--background);
        max-width: 10rem;
        min-height: 100vh;
      }

Since I am a beginner with CSS...I'm not sure if that is the proper way to solve this. Indeed, my "hello" was no longer pushed down the page...but now my hamburger 'X' symbol would disappear behind the sidebar. So to fix that next problem, I made this other change...(which also allowed me to have content above the hamburger icon)...

    .hamburger-menu {
        --x-width: calc(var(--hamburger-height) * 1.41421356237);
      
        display: flex;
        flex-direction: column;
        gap: var(--hamburger-gap);
        width: max-content;
        position: relative;         <<====now relative instead of absolute.
        top: var(--hamburger-margin);
        left: var(--hamburger-margin);
        z-index: 2;
        cursor: pointer;
      }

For what its worth, my entire experiment with your hamburger menu was on a page that had margins on either side. Definitely not the scenario you were addressing, but...

Incidentally, I'd love to see you do a follow-on video for this "hamburger menu" that shows how to:

• Incorporate responsive design so that the hamburger expands into a normal "in-line" menu across the top on screens with a wider display.
• Quickly re-configure the hamburger menu, using CSS variables(?), to obey margins that were set on the page.
• Quickly re-configure the hamburger menu, using CSS variables(?), to attach to the right margin/aside rather than the left margin/aside.