layout.tsx

"use client";
import Sidebar from "@/components/client/sidebar";
import React from "react";
import clsx from "clsx";
import Header from "@/components/client/header";

// This inline script runs before react hydration
// It reads the sidebar state from local storage and applies it to the body.
// This prevents sidebar related flicker on initial render.
function InlineScript() {
  return (
    <script
      dangerouslySetInnerHTML={{
        __html: `(${(() => {
          const showSidebar = localStorage.getItem("movie-app-sidebar") === "true";

          // Get layout and sidebar elements
          const layout = document.querySelector("[data-layout]");
          const sidebar = document.querySelector("[data-sidebar]");

          if (layout && sidebar) {
            if (showSidebar) {
              // Apply sidebar open styles
              layout.classList.add("sm:ml-64");
              sidebar.classList.add("left-0", "opacity-100");
            } else {
              // Apply sidebar closed styles
              layout.classList.remove("sm:ml-64");
              sidebar.classList.remove("left-0", "opacity-100");
            }
          }
          // Store sidebar state for react to read later
          window._INITIAL_SIDEBAR_STATE_ = showSidebar;
        }).toString()})()`,
      }}
    />
  );
}

export default function Layout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [showSidebar, setShowSideBar] = React.useState(() => {
    // During server side rendering there is no window
    if (typeof window === "undefined") {
      return false;
    }
    // Read the sidebar state that we used during the inline script.
    // We stored the sidebar state in window._INITIAL_SIDEBAR_STATE_ because it is considered pure imho
    // to read from it here because window._INITIAL_SIDEBAR_STATE_ will not be modified after we read it
    // (see here also: https://gist.github.com/sebmarkbage/75f0838967cd003cd7f9ab938eb1958f#forbidden).
    // I am not sure if reading local storage instead here would also be considered pure.
    // This way now the rendered page after inline script and what react expects during hydration match.
    return window._INITIAL_SIDEBAR_STATE_;
  });

  // Function to update sidebar state and persist it to local storage
  const updateSidebarState = (state: boolean) => {
    setShowSideBar(state);
    window.localStorage.setItem("movie-app-sidebar", state.toString());
  };

  return (
    <div lang="en" className="h-full flex">
      <Sidebar isOpen={showSidebar} close={() => updateSidebarState(false)} />

      <div
        data-layout
        className={clsx("flex-1 flex flex-col h-full transition-[margin-left] duration-300 ease-in-out", {
          "sm:ml-64": showSidebar,
        })}
      >
        <Header
          toggleSideBar={() => {
            updateSidebarState(!showSidebar);
          }}
        />
        <div className="flex-1 min-h-0">{children}</div>
      </div>
      <InlineScript />
    </div>
  );
}