doctype html
html lang="en"
  meta name="viewport" content="width=device-width, initial-scale=1.0"

  head
    = head
  body
    = turbo_frame_tag "dialog"
    .h-screen.flex data-controller="satis-page"
      / TOPBAR
      .page_bg
        .topbar
          .arrow
            .fa-solid.fa-bars
          / NAVBAR
          .flex-1.px-4.flex.justify-between
            = navbar

        / SIDEBAR
        == sidebar

        / BODY
        .page_body
          main.flex-1.relative.overflow-y-auto.overflow-x-auto.focus:outline-none
            .mt-4
              .max-w.mx-auto.px-4.sm:px-4.md:px-4
                = body


/ Minimize Sidebar
javascript:
  document.addEventListener("DOMContentLoaded", () => {
    let sidebar_collapse = document.querySelector(".sidebar");
    let topbar = document.querySelector(".topbar");
    let page_body = document.querySelector(".page_body");
    let sidebarBtn = document.querySelector(".arrow");

    // Check stored state and apply it
    const isClosed = sessionStorage.getItem('sidebarClosed') === 'true';
    if (isClosed) {
      sidebar_collapse.classList.add("close");
      topbar.classList.add("close");
      page_body.classList.add("close");
    }

    sidebarBtn.addEventListener("click", () => {
      sidebar_collapse.classList.toggle("close");
      topbar.classList.toggle("close");
      page_body.classList.toggle("close");

      // Save the current state to sessionStorage
      const currentState = sidebar_collapse.classList.contains("close");
      sessionStorage.setItem('sidebarClosed', currentState);
    });
  });