---
import BaseLayout from "./BaseLayout.astro";
import { SidebarNav } from "../components/SidebarNav";
import { ThemeToggle } from "../components/ThemeToggle";

interface Props {
  title?: string;
  description?: string;
}

const { title, description } = Astro.props;
const currentPath = Astro.url.pathname;
---

<BaseLayout title={title} description={description}>
  <div class="isolate">
    <SidebarNav currentPath={currentPath} client:load />

    <!-- Theme toggle: fixed in top right corner -->
    <div
      class="pointer-events-auto fixed top-0 right-2 z-50 flex h-[49px] items-center"
    >
      <ThemeToggle client:only="react" />
    </div>

    <!-- Main content area - margin controlled by CSS :has() based on sidebar state -->
    <div
      id="main-content"
      class="main-content mt-[49px] md:mt-0 md:ml-12 h-screen overflow-y-auto overscroll-y-none transition-[margin] duration-300"
    >
      <slot />
    </div>
  </div>
</BaseLayout>

<style is:global>
  /* Use CSS :has() to detect sidebar state and adjust main content margin */
  @media (min-width: 768px) {
    /* When sidebar is open, add full margin */
    body:has(aside[data-sidebar-open="true"]) .main-content {
      margin-left: 304px; /* 48px rail + 256px sidebar panel */
    }
    
    /* When sidebar is closed, only rail margin */
    body:has(aside[data-sidebar-open="false"]) .main-content {
      margin-left: 48px; /* w-12 = 3rem = 48px */
    }
  }
</style>
