{"success":true,"data":{"block":{"id":"faq-sidebar-navigation","name":"Sidebar Navigation FAQ","title":"FAQ Sidebar Navigation","category":"Faq","categorySlug":"faq","description":"An interactive FAQ layout with a sticky sidebar navigation for category filtering. Clicking a category smoothly scrolls to that section while highlighting the active category in the sidebar. Ideal for extensive FAQ pages with many categories where quick navigation is essential.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289185/mb4mh8wawy3qi5s5gexhghjw3g6v/cleanshot-2026-01-29-at-15-12-39.png","mobile":"https://cdn.ing/assets/i/r/289183/8xore7yfz3m03ns5w3e7p1var114/blocks-faq-sidebar-navigation-mobile.png"},"componentPath":"blocks/faq/faq-sidebar-navigation.tsx","code":"import { FaqSidebarNavigation } from \"@opensite/ui/blocks/faq/faq-sidebar-navigation\";\n\nexport default function Demo() {\n  return (\n    <FaqSidebarNavigation\n      heading=\"Knowledge Base\"\n      description=\"Navigate through our comprehensive FAQ sections using the sidebar menu.\"\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.5}\n      background=\"gray\"\n      categories={[\n        {\n          id: \"getting-started\",\n          title: \"Getting Started\",\n          items: [\n            {\n              id: \"signup\",\n              question: \"How do I create an account?\",\n              answer:\n                \"Click 'Sign Up' in the top right corner, enter your details, and verify your email. You can also sign up using Google, Microsoft, or GitHub single sign-on.\",\n            },\n            {\n              id: \"first-project\",\n              question: \"How do I create my first project?\",\n              answer:\n                \"After logging in, click '+ New Project', choose a template or start from scratch, name your project, and invite team members. You'll be guided through setup.\",\n            },\n          ],\n        },\n        {\n          id: \"account-management\",\n          title: \"Account Management\",\n          items: [\n            {\n              id: \"profile\",\n              question: \"How do I update my profile?\",\n              answer:\n                \"Go to Settings > Profile. Update your name, photo, email, timezone, and notification preferences. Changes are saved automatically.\",\n            },\n            {\n              id: \"delete-account\",\n              question: \"Can I delete my account?\",\n              answer:\n                \"Yes, go to Settings > Account > Delete Account. You'll be asked to confirm, and all your data will be permanently deleted within 30 days.\",\n            },\n          ],\n        },\n        {\n          id: \"collaboration\",\n          title: \"Team Collaboration\",\n          items: [\n            {\n              id: \"mentions\",\n              question: \"How do mentions work?\",\n              answer:\n                \"Type @ followed by a team member's name in comments or descriptions. They'll receive a notification and can respond directly in context.\",\n            },\n            {\n              id: \"sharing\",\n              question: \"How do I share projects externally?\",\n              answer:\n                \"Click Share on any project, generate a public link, or invite specific guests via email. Control whether guests can view only or also comment.\",\n            },\n          ],\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"categories":{"type":"array","description":"Array of FAQ categories","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"items":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"question":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"answer":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"FaqItem"},"typeLabel":"FaqItem[]","required":true}},"typeLabel":"FaqCategory"},"typeLabel":"FaqCategory[]","required":false},"categoriesSlot":{"type":"object","description":"Custom slot for rendering categories (overrides categories array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"navClassName":{"type":"string","description":"Additional CSS classes for the navigation","required":false},"navButtonClassName":{"type":"string","description":"Additional CSS classes for navigation buttons","required":false},"navButtonActiveClassName":{"type":"string","description":"Additional CSS classes for active navigation button","required":false},"categoriesWrapperClassName":{"type":"string","description":"Additional CSS classes for the categories wrapper","required":false},"categoryTitleClassName":{"type":"string","description":"Additional CSS classes for category titles","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"accordionItemClassName":{"type":"string","description":"Additional CSS classes for accordion items","required":false},"accordionTriggerClassName":{"type":"string","description":"Additional CSS classes for accordion triggers","required":false},"accordionContentClassName":{"type":"string","description":"Additional CSS classes for accordion content","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","sidebar","navigation","categories","sticky","interactive","scroll"],"performance":{},"importantUsageNotes":"Organize questions into 3-5 'categories' since the sidebar renders one navigation button per category. Each category requires a unique 'id', a 'title', and 2-4 'items'. Each item requires a unique 'id', a 'question', and an 'answer'. Lock the category count to what the content genuinely supports — the sidebar navigation becomes cluttered beyond 5 categories. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:24.763Z"}