{
  "name": "scroll-sidebar-nav-item",
  "type": "registry:component",
  "description": "Navigation item for Scroll Sidebar sections",
  "files": [
    {
      "path": "ui/ScrollSidebarNavItem.astro",
      "type": "registry:component",
      "content": "---\nexport interface Props {\n  id: string;\n  class?: string;\n  defaultOpen?: boolean;\n}\n\nconst { id, class: className = '', defaultOpen = false } = Astro.props;\n---\n\n<button\n  type=\"button\"\n  class={`scroll-sidebar-nav-item relative flex flex-col py-4 pr-6 text-left transition-opacity duration-300 hover:opacity-80 ${className}`}\n  data-scroll-sidebar-nav-item={id}\n  data-state={defaultOpen ? \"active\" : \"inactive\"}\n>\n  <div class=\"scroll-sidebar-nav-item-header\">\n    <slot name=\"header\" />\n  </div>\n\n  <div\n    class=\"scroll-sidebar-nav-item-content grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-300 ease-in-out\"\n  >\n    <div class=\"min-h-0\">\n      <slot name=\"content\" />\n    </div>\n  </div>\n</button>\n\n<style>\n  .scroll-sidebar-nav-item[data-state=\"active\"] {\n    opacity: 1;\n  }\n\n  .scroll-sidebar-nav-item[data-state=\"inactive\"] {\n    opacity: 0.5;\n  }\n\n  .scroll-sidebar-nav-item[data-state=\"active\"]\n    .scroll-sidebar-nav-item-content {\n    grid-template-rows: 1fr;\n  }\n</style>\n"
    }
  ],
  "category": "ui"
}