m9sh 0.2.1 → 0.2.2

data/app/views/docs/components/navbar.html.erb

@@ -0,0 +1,394 @@
+<%= render Docs::ComponentPageComponent.new(title: "Navbar") do |page| %>
+  <% page.with_header(
+    name: "Navbar",
+    description: "A responsive navigation header component with logo, navigation links, and action buttons."
+  ) %>
+
+  <% page.with_installation(component_name: "navbar") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: navbar_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <div class="space-y-8">
+      <div>
+        <h3 class="text-lg font-semibold mb-3">Live Example</h3>
+        <p class="text-muted-foreground mb-4">
+          The NavbarComponent is currently used throughout this application. You can see it in action at the top of this page!
+        </p>
+      </div>
+
+      <%= render Docs::ComponentPreviewComponent.new(
+        title: "Transparent Navbar",
+        code: navbar_transparent_code,
+        mobile_optimized: true
+      ) do %>
+        <div class="w-full bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-blue-950 dark:via-purple-950 dark:to-pink-950 p-8">
+          <%= render M9sh::NavbarComponent.new(transparent: true, sticky: false) do |navbar| %>
+            <% navbar.with_brand do %>
+              <a href="#" class="flex items-center space-x-2">
+                <span class="font-bold text-xl text-foreground">Brand</span>
+              </a>
+            <% end %>
+
+            <% navbar.with_navigation do %>
+              <nav class="flex items-center gap-6">
+                <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">Home</a>
+                <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">About</a>
+                <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">Services</a>
+              </nav>
+            <% end %>
+
+            <% navbar.with_actions do %>
+              <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :sm) do %>
+                Get Started
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= render Docs::ComponentPreviewComponent.new(
+        title: "Full Width Navbar",
+        code: navbar_full_width_code,
+        mobile_optimized: true
+      ) do %>
+        <div class="w-full">
+          <%= render M9sh::NavbarComponent.new(container: false, sticky: false) do |navbar| %>
+            <% navbar.with_brand do %>
+              <a href="#" class="font-bold text-xl">Full Width</a>
+            <% end %>
+
+            <% navbar.with_navigation do %>
+              <nav class="flex items-center gap-6">
+                <a href="#" class="text-sm font-medium">Features</a>
+                <a href="#" class="text-sm font-medium">Docs</a>
+              </nav>
+            <% end %>
+
+            <% navbar.with_actions do %>
+              <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+                Sign Up
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= render Docs::ComponentPreviewComponent.new(
+        title: "Different Sizes",
+        code: navbar_sizes_code,
+        mobile_optimized: true
+      ) do %>
+        <div class="w-full space-y-4">
+          <div class="rounded-lg border border-border overflow-hidden">
+            <%= render M9sh::NavbarComponent.new(size: :sm, sticky: false) do |navbar| %>
+              <% navbar.with_brand do %>
+                <a href="#" class="font-bold">Small</a>
+              <% end %>
+              <% navbar.with_actions do %>
+                <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+                  Action
+                <% end %>
+              <% end %>
+            <% end %>
+          </div>
+
+          <div class="rounded-lg border border-border overflow-hidden">
+            <%= render M9sh::NavbarComponent.new(sticky: false) do |navbar| %>
+              <% navbar.with_brand do %>
+                <a href="#" class="font-bold text-xl">Default</a>
+              <% end %>
+              <% navbar.with_actions do %>
+                <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+                  Action
+                <% end %>
+              <% end %>
+            <% end %>
+          </div>
+
+          <div class="rounded-lg border border-border overflow-hidden">
+            <%= render M9sh::NavbarComponent.new(size: :lg, sticky: false) do |navbar| %>
+              <% navbar.with_brand do %>
+                <a href="#" class="font-bold text-2xl">Large</a>
+              <% end %>
+              <% navbar.with_actions do %>
+                <%= render M9sh::ButtonComponent.new do %>
+                  Action
+                <% end %>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+
+      <%= render Docs::ComponentPreviewComponent.new(
+        title: "Blur Effect",
+        code: navbar_blur_code,
+        mobile_optimized: true
+      ) do %>
+        <div class="w-full bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-950 dark:to-blue-950 p-8">
+          <%= render M9sh::NavbarComponent.new(blur: true, sticky: false) do |navbar| %>
+            <% navbar.with_brand do %>
+              <a href="#" class="font-bold text-xl">Blur Effect</a>
+            <% end %>
+
+            <% navbar.with_navigation do %>
+              <nav class="flex items-center gap-6">
+                <a href="#" class="text-sm font-medium">Home</a>
+                <a href="#" class="text-sm font-medium">Products</a>
+              </nav>
+            <% end %>
+
+            <% navbar.with_actions do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+                Contact
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= render Docs::ComponentPreviewComponent.new(
+        title: "No Border",
+        code: navbar_no_border_code,
+        mobile_optimized: true
+      ) do %>
+        <div class="w-full">
+          <%= render M9sh::NavbarComponent.new(border: false, sticky: false) do |navbar| %>
+            <% navbar.with_brand do %>
+              <a href="#" class="font-bold text-xl">No Border</a>
+            <% end %>
+
+            <% navbar.with_navigation do %>
+              <nav class="flex items-center gap-4">
+                <a href="#" class="text-sm">Link 1</a>
+                <a href="#" class="text-sm">Link 2</a>
+              </nav>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= render Docs::ComponentPreviewComponent.new(
+        title: "Combined Options",
+        code: navbar_combined_options_code,
+        mobile_optimized: true
+      ) do %>
+        <div class="w-full bg-gradient-to-br from-orange-50 via-red-50 to-pink-50 dark:from-orange-950 dark:via-red-950 dark:to-pink-950 p-8">
+          <%= render M9sh::NavbarComponent.new(
+            sticky: false,
+            transparent: true,
+            container: false,
+            size: :lg,
+            border: false
+          ) do |navbar| %>
+            <% navbar.with_brand do %>
+              <a href="#" class="flex items-center space-x-2">
+                <span class="font-bold text-2xl">Custom</span>
+              </a>
+            <% end %>
+
+            <% navbar.with_navigation do %>
+              <nav class="flex items-center gap-6">
+                <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Home</a>
+                <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Features</a>
+                <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Pricing</a>
+                <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Contact</a>
+              </nav>
+            <% end %>
+
+            <% navbar.with_actions do %>
+              <%= render M9sh::ButtonComponent.new(variant: :ghost) do %>
+                Login
+              <% end %>
+            <% end %>
+
+            <% navbar.with_actions do %>
+              <%= render M9sh::ButtonComponent.new do %>
+                Get Started
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= render Docs::ComponentPreviewComponent.new(
+        title: "Mobile Menu",
+        code: navbar_mobile_menu_code,
+        mobile_optimized: true
+      ) do %>
+        <div class="w-full">
+          <%= render M9sh::NavbarComponent.new(sticky: false) do |navbar| %>
+            <% navbar.with_brand do %>
+              <a href="#" class="font-bold text-xl">Brand</a>
+            <% end %>
+
+            <% navbar.with_navigation do %>
+              <nav class="flex items-center gap-6">
+                <a href="#" class="text-sm font-medium">Home</a>
+                <a href="#" class="text-sm font-medium">About</a>
+                <a href="#" class="text-sm font-medium">Services</a>
+              </nav>
+            <% end %>
+
+            <% navbar.with_actions do %>
+              <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :sm) do %>
+                Login
+              <% end %>
+            <% end %>
+
+            <% navbar.with_actions do %>
+              <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+                Sign Up
+              <% end %>
+            <% end %>
+
+            <% navbar.with_mobile_menu do %>
+              <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+                Home
+              <% end %>
+              <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+                About
+              <% end %>
+              <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+                Services
+              <% end %>
+              <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+              <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+                Login
+              <% end %>
+              <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+                Sign Up
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div class="mt-6">
+        <h3 class="text-lg font-semibold mb-3">More Examples</h3>
+        <p class="text-muted-foreground">
+          For complex real-world examples, check the layout files:
+        </p>
+        <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1 ml-4 mt-2">
+          <li><code class="text-xs bg-muted px-1 py-0.5 rounded">app/views/layouts/application.html.erb</code> - Homepage navbar</li>
+          <li><code class="text-xs bg-muted px-1 py-0.5 rounded">app/views/layouts/docs.html.erb</code> - Documentation navbar (this page)</li>
+          <li><code class="text-xs bg-muted px-1 py-0.5 rounded">app/views/layouts/blocks.html.erb</code> - Blocks navbar</li>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">NavbarComponent</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "sticky",
+          type: "Boolean",
+          default: "true",
+          description: "Whether the navbar should stick to the top of the viewport"
+        },
+        {
+          name: "transparent",
+          type: "Boolean",
+          default: "false",
+          description: "Whether to use a transparent backdrop-blur effect (glassmorphism)"
+        },
+        {
+          name: "container",
+          type: "Boolean",
+          default: "true",
+          description: "Whether to constrain content width with container class. Set to false for full width."
+        },
+        {
+          name: "size",
+          type: "Symbol",
+          default: ":default",
+          description: "Navbar height - :sm (48px), :default (64px), or :lg (80px)"
+        },
+        {
+          name: "border",
+          type: "Boolean",
+          default: "true",
+          description: "Whether to show bottom border"
+        },
+        {
+          name: "blur",
+          type: "Boolean",
+          default: "false",
+          description: "Add subtle blur effect without transparency"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Slots</h3>
+
+    <div class="mt-4 space-y-4">
+      <div>
+        <h4 class="text-base font-semibold">brand</h4>
+        <p class="text-sm text-muted-foreground mt-1">
+          Logo or brand section, typically on the left side. Use <code class="text-xs bg-muted px-1 py-0.5 rounded">with_brand</code> to define the brand content.
+        </p>
+      </div>
+
+      <div>
+        <h4 class="text-base font-semibold">navigation</h4>
+        <p class="text-sm text-muted-foreground mt-1">
+          Main navigation area, can contain links or a NavigationMenuComponent. Use <code class="text-xs bg-muted px-1 py-0.5 rounded">with_navigation</code> to define navigation content.
+        </p>
+      </div>
+
+      <div>
+        <h4 class="text-base font-semibold">actions</h4>
+        <p class="text-sm text-muted-foreground mt-1">
+          Action buttons on the right side (login, theme toggle, etc.). Use <code class="text-xs bg-muted px-1 py-0.5 rounded">with_actions</code> multiple times for multiple buttons.
+        </p>
+      </div>
+
+      <div>
+        <h4 class="text-base font-semibold">mobile_menu</h4>
+        <p class="text-sm text-muted-foreground mt-1">
+          Optional mobile menu content. Use <code class="text-xs bg-muted px-1 py-0.5 rounded">with_mobile_menu</code> to define mobile-specific navigation.
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Usage Notes</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li>The navbar uses a container with responsive padding by default</li>
+        <li>The brand and navigation are grouped on the left</li>
+        <li>Actions appear on the right side</li>
+        <li>Three height options: 48px (sm), 64px (default), 80px (lg)</li>
+        <li>Navigation is automatically hidden on mobile (md breakpoint)</li>
+        <li>Desktop actions are automatically hidden on mobile (md breakpoint)</li>
+        <li>When <code class="text-xs bg-muted px-1 py-0.5 rounded">mobile_menu</code> is provided, a hamburger button appears on mobile</li>
+        <li>The hamburger button opens a dropdown menu below it with the mobile menu content</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">DropdownMenuItemComponent</code> inside the mobile menu for menu items</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">sticky: true</code> to make the navbar stick to the top</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">transparent: true</code> for a glassmorphism effect</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">blur: true</code> for a subtle blur without transparency</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">container: false</code> to span the full viewport width</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">border: false</code> to remove the bottom border</li>
+        <li>Combine with NavigationMenuComponent for dropdown menus</li>
+        <li>All options can be combined to create custom navbar styles</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Related Components</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li><a href="/docs/navigation_menu" class="text-primary hover:underline">NavigationMenuComponent</a> - For dropdown navigation menus</li>
+        <li><a href="/docs/dropdown_menu" class="text-primary hover:underline">DropdownMenuComponent</a> - Automatically used for mobile menu dropdown</li>
+        <li><a href="/docs/button" class="text-primary hover:underline">ButtonComponent</a> - For action buttons</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

data/app/views/docs/components/navigation_menu.html.erb

@@ -0,0 +1,226 @@
+<%= render Docs::ComponentPageComponent.new(title: "Navigation Menu") do |page| %>
+  <% page.with_header(
+    name: "Navigation Menu",
+    description: "A collection of links for navigating websites."
+  ) %>
+
+  <% page.with_installation(component_name: "navigation_menu") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: navigation_menu_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example with Dropdowns -->
+    <% default_html = capture do %>
+      <div class="flex justify-center w-full py-8" style="min-height: 400px;">
+        <%= render M9sh::NavigationMenuComponent.new do |nav| %>
+          <% nav.with_item do |item| %>
+            <% item.with_trigger do %>
+              Getting started
+            <% end %>
+            <% item.with_menu_content do %>
+              <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-[.75fr_1fr] lg:w-[600px]">
+                <li class="row-span-3">
+                  <div class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
+                    <div class="mb-2 mt-4 text-lg font-medium">
+                      m9sh/ui
+                    </div>
+                    <p class="text-sm leading-tight text-muted-foreground">
+                      Beautifully designed components built with ViewComponent and Tailwind CSS.
+                    </p>
+                  </div>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Introduction</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Re-usable components built using ViewComponent and Tailwind CSS.
+                    </p>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Installation</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      How to install dependencies and structure your app.
+                    </p>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Typography</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Styles for headings, paragraphs, lists...etc
+                    </p>
+                  </a>
+                </li>
+              </ul>
+            <% end %>
+          <% end %>
+
+          <% nav.with_item do |item| %>
+            <% item.with_trigger do %>
+              Components
+            <% end %>
+            <% item.with_menu_content do %>
+              <ul class="grid w-[600px] gap-3 p-6 md:grid-cols-2 lg:w-[800px]">
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Alert Dialog</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      A modal dialog that interrupts the user with important content.
+                    </p>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Hover Card</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      For sighted users to preview content available behind a link.
+                    </p>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Progress</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Displays an indicator showing the completion progress.
+                    </p>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Scroll-area</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Visually or semantically separates content.
+                    </p>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Tabs</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      A set of layered sections of content.
+                    </p>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div class="text-sm font-medium leading-none">Tooltip</div>
+                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      A popup that displays information related to an element.
+                    </p>
+                  </a>
+                </li>
+              </ul>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: navigation_menu_default_code,
+      ai_command: navigation_menu_default_code
+    ) %>
+
+    <!-- Simple Links Example -->
+    <% links_html = capture do %>
+      <div class="flex justify-center w-full py-8">
+        <%= render M9sh::NavigationMenuComponent.new do |nav| %>
+          <% nav.with_item do |item| %>
+            <% item.with_link(href: "#docs") do %>
+              Documentation
+            <% end %>
+          <% end %>
+
+          <% nav.with_item do |item| %>
+            <% item.with_link(href: "#components") do %>
+              Components
+            <% end %>
+          <% end %>
+
+          <% nav.with_item do |item| %>
+            <% item.with_link(href: "#examples") do %>
+              Examples
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Simple Links",
+      preview_content: links_html,
+      code: navigation_menu_simple_links_code,
+      ai_command: navigation_menu_simple_links_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold mb-4">NavigationMenuComponent</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "items",
+          type: "renders_many",
+          default: "[]",
+          description: "Collection of navigation menu items (ItemComponent instances)"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mb-4 mt-8">ItemComponent</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "trigger",
+          type: "renders_one",
+          default: "nil",
+          description: "Button trigger for dropdown menu with text/block content"
+        },
+        {
+          name: "menu_content",
+          type: "renders_one",
+          default: "nil",
+          description: "Dropdown menu content panel"
+        },
+        {
+          name: "link",
+          type: "renders_one",
+          default: "nil",
+          description: "Simple navigation link (alternative to trigger+menu_content)"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Usage Notes</h3>
+      <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">trigger</code> and <code class="text-xs bg-muted px-1 py-0.5 rounded">menu_content</code> together for dropdown menus</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">link</code> alone for simple navigation links</li>
+        <li>The component uses Stimulus.js for interactive dropdown behavior</li>
+        <li>Clicking outside an open dropdown will automatically close it</li>
+        <li>The dropdown content includes smooth animations for opening/closing</li>
+        <li>The trigger button shows a chevron icon that rotates when the menu opens</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+      <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+        <li>Uses semantic <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;nav&gt;</code> element</li>
+        <li>Trigger buttons have proper <code class="text-xs bg-muted px-1 py-0.5 rounded">type="button"</code> attribute</li>
+        <li>Chevron icon has <code class="text-xs bg-muted px-1 py-0.5 rounded">aria-hidden="true"</code> to prevent screen reader announcement</li>
+        <li>Focus states are styled with <code class="text-xs bg-muted px-1 py-0.5 rounded">focus:outline-none</code> and custom focus styling</li>
+        <li>Links use proper <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;a&gt;</code> tags with href attributes</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>