<script setup lang="ts">
import { DocsHeader, DocsSidebar } from "@/components/docs";
</script>

<template>
  <div class="components">
    <DocsHeader id="docs-header" />
    <main>
      <DocsSidebar id="docs-sidebar" />
      <div style="width: 100%;">
        <router-view />
      </div>
    </main>
  </div>
</template>
<style lang="scss" scoped>
.components {
  display: grid;
  overflow: scroll;
  height: 100vh;
  overflow-x: hidden;
  @media (max-width: 768px) {
    grid-template-rows: auto 1fr;
  }
}

main {
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    position: relative;
    > div > section {
      padding: var(--spacing-5) var(--spacing-6);
    }
  }
}

#docs-sidebar {
  @media (max-width: 768px) {
    position: absolute;
    height: 100%;
    margin-left: calc(var(--w-44) * -1);
    transition: .3s;
    z-index: 1001;
  }
}

#docs-header:has(#open-side-on-focus:focus-within) + main > #docs-sidebar {
  margin-left: 0;
}

#docs-header {
  @media (max-width: 768px) {
    height: fit-content;
    grid-template-rows: auto 1fr;
  }
}
</style>
