railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/components/modal/_single_action.html.erb

@@ -0,0 +1,119 @@
+<div id="modal-single-action">
+<%= render layout: example, locals: { heading: "Single action", section: "Modal" } do %>
+<div class="bg-black/80 flex items-center jusity-center p-10 rounded-t-lg dark:bg-neutral-800 dark:border-t dark:border-x dark:border-neutral-600">
+  <div class="rounded-2xl shadow-xl max-w-xs bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 text-center">
+    <div class="flex justify-center">
+      <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
+        <%= icon "rocket-launch", class: "size-6 text-emerald-600 flex-shrink-0" %>
+      </div>
+    </div>
+
+    <h3 id="single-action-modal-title" class="h3 mt-3">Time to launch</h3>
+
+    <div class="prose prose-neutral dark:prose-invert mt-1 mb-6 text-center">
+      <p>Are you ready to deploy your changes to production? This action cannot be undone.</p>
+    </div>
+    <button class="btn btn-primary w-full">Launch away</button>
+  </div>
+</div>
+
+<div data-controller="railsui-modal">
+  <div class="flex justify-center p-6 border-x border-b border-neutral-200 rounded-b-lg relative dark:bg-neutral-700 dark:border-neutral-600 dark:border-t">
+    <div class="absolute top-4 left-4">
+      <%= doc_label :demo %>
+    </div>
+    <button type="button" data-action="click->railsui-modal#open:prevent" class="btn btn-primary" tabindex="0">
+      Open single action modal
+    </button>
+  </div>
+  <div
+    aria-labelledby="single-action-modal-title"
+    aria-modal="true"
+    data-railsui-modal-target="container"
+    class="hidden fixed inset-0 z-50 overflow-y-auto"
+    role="dialog"
+    >
+    <div class="h-screen w-full relative flex items-center justify-center">
+      <div
+      data-railsui-modal-target="content"
+      data-action="keyup@window->railsui-modal#closeWithEsc"
+      data-transition-enter-active="transition ease-out duration-300"
+      data-transition-enter-from="transform opacity-0 scale-95"
+      data-transition-enter-to="transform opacity-100 scale-100"
+      data-transition-leave-active="transition ease-in duration-300"
+      data-transition-leave-from="transform opacity-100 scale-100"
+      data-transition-leave-to="transform opacity-0 scale-95"
+      class="hidden rounded-2xl shadow-xl max-w-xs bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 text-center">
+        <div class="flex justify-center">
+          <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
+            <%= icon "rocket-launch", class: "size-6 text-emerald-600 flex-shrink-0" %>
+          </div>
+        </div>
+
+        <h3 id="single-action-modal-title" class="h3 mt-3">Time to launch</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Are you ready to deploy your changes to production? This action cannot be undone.</p>
+        </div>
+
+        <button type="button" class="btn btn-primary w-full" data-action="click->railsui-modal#close">Launch away</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-modal">
+  <button type="button" data-action="click->railsui-modal#open" class="btn btn-primary" tabindex="0">
+    Open single action modal
+  </button>
+
+  <div
+    aria-labelledby="single-action-modal-title"
+    aria-modal="true"
+    data-railsui-modal-target="container"
+    class="hidden fixed inset-0 z-50 overflow-y-auto"
+    role="dialog"
+    >
+    <div class="h-screen w-full relative flex items-center justify-center">
+      <div
+      data-railsui-modal-target="content"
+      data-action="keyup@window->railsui-modal#closeWithEsc"
+      data-transition-enter-active="transition ease-out duration-300"
+      data-transition-enter-from="transform opacity-0 scale-95"
+      data-transition-enter-to="transform opacity-100 scale-100"
+      data-transition-leave-active="transition ease-in duration-300"
+      data-transition-leave-from="transform opacity-100 scale-100"
+      data-transition-leave-to="transform opacity-0 scale-95"
+      class="hidden rounded-2xl shadow-xl max-w-xs bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 text-center">
+        <div class="flex justify-center">
+          <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
+            <%%= icon "rocket-launch", class: "size-6 text-emerald-600 flex-shrink-0" %>
+          </div>
+        </div>
+
+        <h3 id="single-action-modal-title" class="h3">Time to launch</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Are you ready to deploy your changes to production? This action cannot be undone.</p>
+        </div>
+
+        <button type="button" class="btn btn-primary w-full" data-action="click->railsui-modal#close">Launch away</button>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { RailsuiModal } from 'railsui-stimulus'
+
+application.register('railsui-modal', RailsuiModal)
+<% end %>
+
+<%= render_snippet(js_filename: "index.js") %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/modal/_with_form.html.erb

@@ -0,0 +1,148 @@
+<div id="modal-with-form">
+  <%= render layout: example, locals: { heading: "With form", section: "Modal" } do %>
+
+    <div class="bg-black/80 flex items-center jusity-center p-10 rounded-t-lg dark:bg-neutral-800 dark:border-t dark:border-x dark:border-neutral-600">
+      <div class="rounded-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 relative">
+        <button type="button" class="absolute top-2 right-2 w-8 h-8 bg-transparent hover:bg-neutral-50 flex items-center justify-center rounded-full group dark:hover:bg-neutral-50/50">
+          <%= icon "x-mark", class:  "text-neutral-400 size-6 group-hover:text-neutral-500 pointer-events-none dark:group-hover:text-neutral-800 dark:text-neutral-400" %>
+        </button>
+
+        <h3 id="modal-with-form" class="h3">Subscribe</h3>
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Join our community to get early access to new features, exclusive content, and connect with other developers.</p>
+        </div>
+
+        <form action="#">
+          <div class="form-group">
+            <label for="email_demo" class="form-label">E-mail</label>
+            <input id="email_demo" type="email" class="form-input" placeholder="saasquatch@railsui.com">
+          </div>
+          <div class="form-group">
+            <label for="reason_demo" class="form-label">Reason for joining</label>
+            <textarea name="reason" id="reason_demo" class="form-input" placeholder="In a couple sentences let us know your reason for joining the Rails UI community"></textarea>
+          </div>
+        </form>
+
+        <div class="mt-8 flex justify-start items-center flex-wrap bg-neutral-50 px-8 py-4 -mx-8 -mb-8 border-t border-neutral-300 rounded-b-2xl shadow-inner space-x-4 dark:bg-neutral-700 dark:text-neutral-200 dark:border-neutral-600/70">
+          <button class="btn btn-primary">Subscribe</button>
+          <button class="btn btn-white">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <div data-controller="railsui-modal">
+      <div class="flex justify-center p-6 border-x border-b border-neutral-200 rounded-b-lg relative dark:bg-neutral-700 dark:border-neutral-600 dark:border-t">
+        <div class="absolute top-4 left-4">
+          <%= doc_label :demo %>
+        </div>
+        <button type="button" data-action="click->railsui-modal#open" class="btn btn-primary" tabindex="0">
+          Open modal with form
+        </button>
+      </div>
+
+      <div
+    aria-labelledby="modal-with-form"
+    aria-modal="true"
+    data-railsui-modal-target="container"
+    data-action="keyup@window->railsui-modal#closeWithEsc"
+        class="hidden fixed inset-0 z-50 overflow-y-auto"
+        role="dialog"
+        >
+        <div class="h-screen w-full relative flex items-center justify-center">
+          <div
+      data-railsui-modal-target="content"
+      data-transition-enter-active="transition ease-out duration-300"
+      data-transition-enter-from="transform opacity-0 scale-95"
+      data-transition-enter-to="transform opacity-100 scale-100"
+      data-transition-leave-active="transition ease-in duration-300"
+      data-transition-leave-from="transform opacity-100 scale-100"
+      data-transition-leave-to="transform opacity-0 scale-95"
+      class="hidden rounded-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 relative">
+            <button type="button" class="absolute top-2 right-2 w-8 h-8 bg-transparent hover:bg-neutral-50 flex items-center justify-center rounded-full group dark:hover:bg-neutral-50/50" data-action="click->railsui-modal#close">
+              <%= icon "x-mark", class:  "text-neutral-400 size-6 group-hover:text-neutral-500 pointer-events-none dark:group-hover:text-neutral-800 dark:text-neutral-400" %>
+            </button>
+
+            <h3 id="modal-with-form" class="h3">Subscribe</h3>
+            <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+              <p>Join our community to get early access to new features, exclusive content, and connect with other developers.</p>
+            </div>
+
+            <form action="#">
+              <div class="form-group">
+                <label for="email_demo" class="form-label">E-mail</label>
+                <input id="email_demo" type="email" class="form-input" placeholder="saasquatch@railsui.com">
+              </div>
+              <div class="form-group">
+                <label for="reason_demo" class="form-label">Reason for joining</label>
+                <textarea name="reason" id="reason_demo" class="form-input" placeholder="In a couple sentences let us know your reason for joining the Rails UI community"></textarea>
+              </div>
+            </form>
+
+            <div class="mt-8 flex justify-start items-center flex-wrap bg-neutral-50 px-8 py-4 -mx-8 -mb-8 border-t border-neutral-300 rounded-b-2xl shadow-inner space-x-4 dark:bg-neutral-700 dark:text-neutral-200 dark:border-neutral-600/70">
+              <button class="btn btn-primary">Subscribe</button>
+              <button class="btn btn-white" data-action="click->railsui-modal#close">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-modal">
+  <button type="button" data-action="click->railsui-modal#open" class="btn btn-primary" tabindex="0">
+    Open modal with form
+  </button>
+
+  <div aria-labelledby="modal-with-form" aria-modal="true" data-railsui-modal-target="container" data-action="keyup@window->railsui-modal#closeWithEsc" class="hidden fixed inset-0 z-50 overflow-y-auto" role="dialog">
+    <div class="h-screen w-full relative flex items-center justify-center">
+      <div data-railsui-modal-target="content"
+data-transition-enter-active="transition ease-out duration-300"
+data-transition-enter-from="transform opacity-0 scale-95"
+data-transition-enter-to="transform opacity-100 scale-100"
+data-transition-leave-active="transition ease-in duration-300"
+data-transition-leave-from="transform opacity-100 scale-100"
+data-transition-leave-to="transform opacity-0 scale-95"
+class="hidden rounded-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 relative">
+        <button type="button" class="absolute top-2 right-2 w-8 h-8 bg-transparent hover:bg-neutral-50 flex items-center justify-center rounded-full group dark:hover:bg-neutral-50/50" data-action="click->railsui-modal#close">
+          <%%= icon "x-mark", class:  "text-neutral-400 size-6 group-hover:text-neutral-500 pointer-events-none dark:group-hover:text-neutral-800 dark:text-neutral-400" %>
+        </button>
+
+        <h3 id="modal-with-form" class="h3">Subscribe</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Join our community to get early access to new features, exclusive content, and connect with other developers.</p>
+        </div>
+
+        <form action="#">
+          <div class="form-group">
+            <label for="email_demo" class="form-label">E-mail</label>
+            <input id="email_demo" type="email" class="form-input" placeholder="saasquatch@railsui.com">
+          </div>
+          <div class="form-group">
+            <label for="reason_demo" class="form-label">Reason for joining</label>
+            <textarea name="reason" id="reason_demo" class="form-input" placeholder="In a couple sentences let us know your reason for joining the Rails UI community"></textarea>
+          </div>
+        </form>
+
+        <div class="mt-8 flex justify-start items-center flex-wrap bg-neutral-50 px-8 py-4 -mx-8 -mb-8 border-t border-neutral-300 rounded-b-2xl shadow-inner space-x-4 dark:bg-neutral-700 dark:text-neutral-200 dark:border-neutral-600/70">
+          <button class="btn btn-primary">Subscribe</button>
+          <button class="btn btn-white" data-action="click->railsui-modal#close">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { RailsuiModal } from 'railsui-stimulus'
+
+application.register('railsui-modal', RailsuiModal)
+<% end %>
+
+<%= render_snippet(js_filename: "index.js") %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/navigation/_base.html.erb

@@ -0,0 +1,215 @@
+<div id="navigation-base">
+  <%= render layout: example, locals: { heading: "Base", section: "Navigation" } do %>
+
+    <%= render "railsui/themes/#{Railsui.config.theme.downcase}/components/navigation/nav_preview", flush: true do %>
+  <header class="w-full px-6 py-6 bg-white rounded-t-2xl font-tiktok">
+    <nav data-controller="railsui-toggle">
+      <div class="flex items-center justify-between mx-auto max-w-7xl">
+        <a href="#" class="flex items-center space-x-2">
+          <%= icon "logo", custom_path: "/railsui/logo.svg", class: "size-6 shrink-0 fill-current dark:fill-neutral-100" %>
+          <span class="text-xl font-semibold text-neutral-900 dark:text-white">Corgie</span>
+        </a>
+
+
+        <!-- Desktop Navigation -->
+        <div class="items-center hidden gap-4 md:flex">
+          <a href="#" class="btn btn-muted">Features</a>
+          <a href="#" class="btn btn-ghost">Pricing</a>
+          <a href="#" class="btn btn-ghost">Blog</a>
+          <a href="#" class="btn btn-ghost">About</a>
+          <a href="#" class="btn btn-ghost">Sign in</a>
+          <a href="#" class="btn btn-dark">Try Corgie</a>
+        </div>
+
+        <!-- Mobile Menu Toggle -->
+        <button class="flex flex-col items-center justify-center md:hidden size-8 group"
+          data-action="click->railsui-toggle#toggle" aria-label="Toggle menu" aria-expanded="false">
+          <span
+            class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 group-aria-expanded:rotate-45 group-aria-expanded:translate-y-1.5"></span>
+          <span
+            class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:opacity-0"></span>
+          <span
+            class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-1.5"></span>
+        </button>
+      </div>
+
+      <!-- Mobile Navigation -->
+      <div class="hidden md:hidden relative z-20" data-railsui-toggle-target="toggleable" aria-hidden="true">
+        <div
+          class="px-6 py-4 mt-4 bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700 rounded-xl">
+          <div class="space-y-2">
+            <a href="#"
+              class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Features</a>
+            <a href="#"
+              class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Pricing</a>
+            <a href="#"
+              class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Blog</a>
+            <a href="#"
+              class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">About</a>
+            <div class="pt-2 mt-4 border-t border-neutral-200 dark:border-neutral-700">
+              <a href="#"
+                class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Sign
+                in</a>
+              <a href="#" class="btn btn-primary btn-lg w-full mt-2">Try
+                Corgie</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<header class="w-full px-6 py-6">
+  <nav data-controller="railsui-toggle">
+    <div class="flex items-center justify-between mx-auto max-w-7xl">
+      <a href="#" class="flex items-center space-x-2">
+        <%%= icon "logo", custom_path: "/railsui/logo.svg", class: "size-6 shrink-0 fill-current dark:fill-neutral-100" %>
+        <span class="text-xl font-semibold text-neutral-900 dark:text-white">Corgie</span>
+      </a>
+
+
+      <!-- Desktop Navigation -->
+      <div class="items-center hidden gap-4 md:flex">
+        <a href="#" class="btn btn-muted">Features</a>
+        <a href="#" class="btn btn-ghost">Pricing</a>
+        <a href="#" class="btn btn-ghost">Blog</a>
+        <a href="#" class="btn btn-ghost">About</a>
+        <a href="#" class="btn btn-ghost">Sign in</a>
+        <a href="#" class="btn btn-dark">Try Corgie</a>
+      </div>
+
+      <!-- Mobile Menu Toggle -->
+      <button class="flex flex-col items-center justify-center md:hidden size-8 group"
+        data-action="click->railsui-toggle#toggle" aria-label="Toggle menu" aria-expanded="false">
+        <span
+          class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 group-aria-expanded:rotate-45 group-aria-expanded:translate-y-1.5"></span>
+        <span
+          class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:opacity-0"></span>
+        <span
+          class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-1.5"></span>
+      </button>
+    </div>
+
+    <!-- Mobile Navigation -->
+    <div class="hidden md:hidden relative z-20" data-railsui-toggle-target="toggleable" aria-hidden="true">
+      <div
+        class="px-6 py-4 mt-4 bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700 rounded-xl">
+        <div class="space-y-2">
+          <a href="#"
+            class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Features</a>
+          <a href="#"
+            class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Pricing</a>
+          <a href="#"
+            class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Blog</a>
+          <a href="#"
+            class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">About</a>
+          <div class="pt-2 mt-4 border-t border-neutral-200 dark:border-neutral-700">
+            <a href="#"
+              class="block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors">Sign
+              in</a>
+            <a href="#" class="btn btn-primary btn-lg w-full mt-2">Try
+              Corgie</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<header class="w-full px-6 py-6">
+  <nav data-controller="railsui-toggle">
+    <div class="flex items-center justify-between mx-auto max-w-7xl">
+      <%%= link_to root_path, class: "flex items-center space-x-2" do %>
+        <%%= icon "logo", custom_path: "/railsui/logo.svg", class: "size-6 shrink-0 fill-current dark:fill-neutral-100" %>
+        <span class="text-xl font-semibold text-neutral-900 dark:text-white"><%%= Railsui.config.application_name || "Corgie" %></span>
+      <%% end %>
+
+
+      <!-- Desktop Navigation -->
+      <div class="items-center hidden gap-4 md:flex">
+        <%%= nav_link_to "Features", rui_features_path, class: "btn btn-ghost", active_class: "btn btn-muted" %>
+        <%%= nav_link_to "Pricing", rui_pricing_path, class: "btn btn-ghost", active_class: "btn btn-muted" %>
+        <%%= nav_link_to "Blog", rui_blog_path, class: "btn btn-ghost", active_class: "btn btn-muted" %>
+        <%%= nav_link_to "About", rui_about_path, class: "btn btn-ghost", active_class: "btn btn-muted" %>
+        <%%= nav_link_to "Sign in", rui_signin_path, class: "btn btn-ghost" %>
+        <%%= nav_link_to "Try Corgie", rui_signup_path, class: "btn btn-primary" %>
+      </div>
+
+      <!-- Mobile Menu Toggle -->
+      <button class="flex flex-col items-center justify-center md:hidden size-8 group"
+        data-action="click->railsui-toggle#toggle" aria-label="Toggle menu" aria-expanded="false">
+        <span
+          class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 group-aria-expanded:rotate-45 group-aria-expanded:translate-y-1.5"></span>
+        <span
+          class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:opacity-0"></span>
+        <span
+          class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-1.5"></span>
+      </button>
+    </div>
+
+    <!-- Mobile Navigation -->
+    <div class="hidden md:hidden relative z-20" data-railsui-toggle-target="toggleable" aria-hidden="true">
+      <div
+        class="px-6 py-4 mt-4 bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700 rounded-xl">
+        <div class="space-y-2">
+          <%%= nav_link_to "Features", rui_features_path, class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors", active_class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors bg-neutral-100 dark:bg-neutral-700" %>
+
+          <%%= nav_link_to "Pricing", rui_pricing_path, class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors", active_class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors bg-neutral-100 dark:bg-neutral-700" %>
+
+          <%%= nav_link_to "Blog", rui_blog_path, class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors", active_class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors bg-neutral-100 dark:bg-neutral-700" %>
+
+          <%%= nav_link_to "About", rui_about_path, class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors", active_class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors bg-neutral-100 dark:bg-neutral-700" %>
+
+          <div class="pt-2 mt-4 border-t border-neutral-200 dark:border-neutral-700">
+            <%%= link_to "Sign in", rui_signin_path, class: "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors" %>
+
+            <%%= link_to "Try Corgie", rui_signup_path, class: "btn btn-primary btn-lg w-full mt-2" %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+// app/javascript/controllers/nav_controller.js
+
+import { Controller } from '@hotwired/stimulus'
+import { useTransition } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['nav', 'menuBars', 'menuCross']
+
+  connect() {
+    useTransition(this, {
+      element: this.navTarget
+    })
+  }
+
+  toggle() {
+    this.toggleTransition()
+    this.swapIcon()
+  }
+
+  disconnect() {
+    this.leave()
+  }
+
+  swapIcon() {
+    this.menuBarsTarget.classList.toggle('hidden')
+    this.menuCrossTarget.classList.toggle('hidden')
+  }
+}
+<% end %>
+
+<%= render_snippet(html_filename: "nav.html", erb_filename: "_nav.html.erb", js_filename: "nav_controller.js") %>
+<% end %>
+<% end %>
+</div>