Components
Navigation
Navigation
A collection of links for navigating websites.
Base
<header class="relative dark:bg-slate-900 py-1" data-controller="nav">
<div class="container mx-auto px-4">
<div class="md:flex items-center flex-wrap md:space-x-2">
<div class="md:block flex items-center justify-between">
<a href="/" class="w-12 h-12 flex justify-center">
<!-- Hound logo -->
<svg class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out dark:hover:text-primary-500" width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
</a>
<button id="base-nav-toggle" data-action="click->nav#toggle" class="md:hidden block p-1 rounded focus:ring-4 focus:ring-slate-100 active:bg-white group focus:bg-white/50 dark:focus:bg-slate-800 dark:focus:ring-slate-700">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
</button>
</div>
<div id="base-navigation" class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top p-4 md:p-0 lg:p-0 rounded-b md:shadow-none shadow-xl z-40" data-nav-target="nav"
data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95">
<div class="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base text-lg md:leading-normal leading-relaxed space-y-1 md:space-y-0 sm:mb-0 mb-4">
<li>
<a href="#" class="rui-nav-link">Product</a>
</li>
<li>
<a href="#" class="rui-nav-link">Pricing</a>
</li>
<li>
<a href="#" class="rui-nav-link rui-nav-link-active">Company</a>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="md:flex flex-wrap items-center justify-center grid grid-cols-2 md:gap-0 gap-4 md:mt-0 mt-6">
<li class="md:pr-5">
<a href="#" class="group md:border-none border rounded md:bg-transparent dark:bg-slate-900 dark:border-slate-700 bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:focus:ring-slate-800">
<%= icon "question-mark-circle", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
</a>
</li>
<li class="md:pr-3">
<a href="#" class="group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800">
<%= icon "book-open", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
</a>
</li>
<li class="md:block hidden md:pr-3 md:pl-2">
<span class="h-6 w-px bg-slate-200 block dark:bg-slate-600"></span>
</li>
<li class="w-full md:w-auto md:mb-0 col-span-2">
<a href="#" class="btn btn-transparent md:w-auto w-full">Sign in</a>
</li>
<li class="md:pl-3 w-full md:w-auto col-span-2">
<a href="#" class="btn btn-dark md:w-auto w-full">Sign up</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header><header class="relative dark:bg-slate-900 py-1" data-controller="nav">
<div class="container mx-auto px-4">
<div class="md:flex items-center flex-wrap md:space-x-2">
<div class="md:block flex items-center justify-between">
<%= link_to root_path, class: "size-12 flex justify-center" do %>
<!-- Hound logo -->
<svg class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out dark:hover:text-primary-500" width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
<% end %>
<button id="base-nav-toggle" data-action="click->nav#toggle" class="md:hidden block p-1 rounded focus:ring-4 focus:ring-slate-100 active:bg-white group focus:bg-white/50 dark:focus:bg-slate-800 dark:focus:ring-slate-700">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
</button>
</div>
<div id="base-navigation" class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top p-4 md:p-0 lg:p-0 rounded-b md:shadow-none shadow-xl z-40"
data-nav-target="nav"
data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95">
<div class="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base text-lg md:leading-normal leading-relaxed space-y-1 md:space-y-0 sm:mb-0 mb-4">
<li>
<%= nav_link_to "Product", "#", class: "rui-nav-link" %>
</li>
<li>
<%= nav_link_to "Pricing", "#", class: "rui-nav-link" %>
</li>
<li>
<%= nav_link_to "Company", "#", class: "rui-nav-link" %>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="md:flex flex-wrap items-center justify-center grid grid-cols-2 md:gap-0 gap-4 md:mt-0 mt-6">
<li class="md:pr-5">
<%= link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do %>
<%= icon "question-mark-circle", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
<% end %>
</li>
<li class="md:pr-3">
<%= link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do %>
<%= icon "book-open", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
<% end %>
</li>
<li class="md:block hidden md:pr-3 md:pl-2">
<span class="h-6 w-px bg-slate-200 block dark:bg-slate-600"></span>
</li>
<li class="w-full md:w-auto md:mb-0 col-span-2">
<%= link_to "Sign in", new_user_session_path, class: "btn btn-transparent md:w-auto w-full" %>
</li>
<li class="md:pl-3 w-full md:w-auto col-span-2">
<%= link_to "Sign up", new_user_registration_path, class: "btn btn-dark md:w-auto w-full" %>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>%header.relative.dark:bg-slate-900.py-1{"data-controller" => "nav"}
.container.mx-auto.px-4
.md:flex.items-center.flex-wrap.md:space-x-2
.md:block.flex.items-center.justify-between
= link_to root_path, class: "size-12 flex justify-center" do
/ Hound logo
%svg.fill-current.w-5.h-auto.text-primary-600.hover:text-primary-700.duration-300.transition.ease-in-out.dark:hover:text-primary-500{fill: "none", height: "50", viewbox: "0 0 39 50", width: "39", xmlns: "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", d: "M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z", "fill-rule" => "evenodd"}
%span.sr-only Hound
%button#base-nav-toggle.md:hidden.block.p-1.rounded.focus:ring-4.focus:ring-slate-100.active:bg-white.group.dark:focus:bg-slate-800.dark:focus:ring-slate-700{class: "focus:bg-white/50", "data-action" => "click->nav#toggle"}
%div{"data-nav-target" => "menuBars", role: "none"}
= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100"
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100"
#base-navigation.md:flex-1.md:block.hidden.md:static.absolute.top-14.left-0.w-full.bg-white.dark:bg-slate-900.md:bg-transparent.transform.origin-top.p-4.md:p-0.lg:p-0.rounded-b.md:shadow-none.shadow-xl.z-40{"data-nav-target" => "nav", "data-transition-enter-active" => "transition ease-out duration-200", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-active" => "transition ease-in duration-200", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
.md:flex-1.md:flex.flex-wrap.items-center.justify-between.lg:text-left.text-center
%nav{role: "Primary navigation"}
%ul.md:flex.block.items-center.flex-wrap.space-x-0.md:space-x-3.md:text-base.text-lg.md:leading-normal.leading-relaxed.space-y-1.md:space-y-0.sm:mb-0.mb-4
%li
= nav_link_to "Product", "#", class: "rui-nav-link"
%li
= nav_link_to "Pricing", "#", class: "rui-nav-link"
%li
= nav_link_to "Company", "#", class: "rui-nav-link"
%nav{role: "Secondary navigation"}
%ul.md:flex.flex-wrap.items-center.justify-center.grid.grid-cols-2.md:gap-0.gap-4.md:mt-0.mt-6
%li.md:pr-5
= link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do
= icon "question-mark-circle", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid
%li.md:pr-3
= link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do
= icon "book-open", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid
%li.md:block.hidden.md:pr-3.md:pl-2
%span.h-6.w-px.bg-slate-200.block.dark:bg-slate-600
%li.w-full.md:w-auto.md:mb-0.col-span-2
= link_to "Sign in", new_user_session_path, class: "btn btn-transparent md:w-auto w-full"
%li.md:pl-3.w-full.md:w-auto.col-span-2
= link_to "Sign up", new_user_registration_path, class: "btn btn-dark md:w-auto w-full"// 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')
}
}With search
<header class="relative bg-slate-900" data-controller="nav">
<div class="container mx-auto px-4">
<div class="sm:flex items-center flex-wrap sm:space-x-2">
<div class="sm:block flex items-center justify-between">
<a href="/" class="w-12 h-12 flex justify-center">
<!-- Hound logo -->
<svg class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out dark:hover:text-primary-500" width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
</a>
<button id="search-nav-toggle" data-action="click->nav#toggle" class="sm:hidden block p-1 rounded focus:ring-4 group focus:bg-slate-800 focus:ring-slate-700">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "size-8 text-slate-300 group-focus:text-slate-200" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "size-8 text-slate-300 group-focus:text-slate-200" %>
</div>
</button>
</div>
<div id="search-navigation" class="sm:flex-1 sm:block hidden sm:static absolute top-14 left-0 w-full bg-slate-900 sm:bg-transparent transform origin-top sm:p-0 p-4 rounded-b sm:shadow-none shadow-xl z-30"
data-nav-target="nav"
data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95">
<div class="sm:flex-1 sm:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul class="sm:flex block items-center flex-wrap space-x-0 sm:space-x-3 sm:text-base text-lg sm:leading-normal leading-relaxed space-y-1 sm:space-y-0 sm:mb-0 mb-4">
<li>
<a href="#" class="rui-nav-link">Product</a>
</li>
<li>
<a href="#" class="rui-nav-link">Pricing</a>
</li>
<li>
<a href="#" class="rui-nav-link rui-nav-link-active">Company</a>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="sm:flex flex-wrap items-center justify-center grid grid-cols-2 sm:gap-0 gap-4 sm:mt-0 mt-6">
<li class="sm:pr-5">
<a href="#" class="group sm:border-none border rounded sm:bg-transparent bg-slate-900 border-slate-700 flex justify-center items-center sm:py-0 py-2 sm:px-0 px-3 sm:block sm:focus:ring-none focus:ring-4 focus:ring-slate-800">
<%= icon "question-mark-circle", class: "fill-current size-5 text-primary-500 group-hover:text-primary-600 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-600", variant: :solid %>
</a>
</li>
<li class="sm:pr-3">
<a href="#" class="group sm:border-none border rounded sm:bg-transparent bg-slate-900 border-slate-700 flex justify-center items-center sm:py-0 py-2 sm:px-0 px-3 sm:block sm:focus:ring-none focus:ring-4 focus:ring-slate-800">
<%= icon "book-open", class: "fill-current size-5 text-primary-500 group-hover:text-primary-600 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-600", variant: :solid %>
</a>
</li>
<li class="sm:block hidden sm:px-2">
<span class="h-6 w-px block bg-slate-600"></span>
</li>
<li class="w-full sm:w-auto sm:mb-0 col-span-2">
<a href="#" class="btn btn-dark sm:w-auto w-full">Sign in</a>
</li>
<li class="sm:pl-3 w-full sm:w-auto col-span-2">
<a href="#" class="btn btn-primary sm:w-auto w-full">Sign up</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header><header class="relative bg-slate-900" data-controller="nav">
<div class="container mx-auto px-4">
<div class="sm:flex items-center flex-wrap sm:space-x-2">
<div class="sm:block flex items-center justify-between">
<%= link_to root_path class: "w-12 h-12 flex justify-center" do %>
<!-- Hound logo -->
<svg class="fill-current w-6 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out dark:hover:text-primary-500" width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
<% end %>
<button id="search-nav-toggle"
data-action="click->nav#toggle" class="sm:hidden block p-1 rounded focus:ring-4 group focus:bg-slate-800 focus:ring-slate-700" role="Mobile navigation toggle">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "w-8 h-8 text-slate-300 group-focus:text-slate-200" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "w-8 h-8 text-slate-300 group-focus:text-slate-200" %>
</div>
</button>
</div>
<div id="search-navigation" class="sm:flex-1 sm:block hidden sm:static absolute top-14 left-0 w-full bg-slate-900 sm:bg-transparent transform origin-top sm:p-0 p-4 rounded-b sm:shadow-none shadow-xl z-30"
data-nav-target="nav"
data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95">
<div class="sm:flex-1 sm:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul class="sm:flex block items-center flex-wrap space-x-0 sm:space-x-3 sm:text-base text-lg sm:leading-normal leading-relaxed space-y-1 sm:space-y-0 sm:mb-0 mb-4">
<li>
<%= nav_link_to "Product", "#", class: "rui-nav-link-dark" %>
</li>
<li>
<%= nav_link_to "Pricing", "#", class: "rui-nav-link-dark" %>
</li>
<li>
<%= nav_link_to "Company", "#", class: "rui-nav-link-dark" %>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="sm:flex flex-wrap items-center justify-center grid grid-cols-2 sm:gap-0 gap-4 sm:mt-0 mt-6">
<li class="sm:pr-5">
<%= link_to "#", class: "group sm:border-none border rounded sm:bg-transparent bg-slate-900 border-slate-700 flex justify-center items-center sm:py-0 py-2 sm:px-0 px-3 sm:block sm:focus:ring-none focus:ring-4 focus:ring-slate-800" do
<%= icon "question-mark-circle", class: "fill-current size-5 text-primary-500 group-hover:text-primary-600 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-600", variant: :solid %>
<% end %>
</li>
<li class="sm:pr-3">
<%= link_to "#", class: "group sm:border-none border rounded sm:bg-transparent bg-slate-900 border-slate-700 flex justify-center items-center sm:py-0 py-2 sm:px-0 px-3 sm:block sm:focus:ring-none focus:ring-4 focus:ring-slate-800" do %>
<%= icon "book-open", class: "fill-current size-5 text-primary-500 group-hover:text-primary-600 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-600", variant: :solid %>
<% end %>
</li>
<li class="sm:block hidden sm:px-2">
<span class="h-6 w-px block bg-slate-600"></span>
</li>
<li class="w-full sm:w-auto sm:mb-0 col-span-2">
<%= link_to "Sign in", new_user_session_path, class: "btn btn-dark sm:w-auto w-full" %>
</li>
<li class="sm:pl-3 w-full sm:w-auto col-span-2">
<%= link_to "Sign up", new_user_registration_path, class: "btn btn-primary sm:w-auto w-full" %>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>%header.relative.bg-slate-900{"data-controller" => "nav"}
.container.mx-auto.px-4
.sm:flex.items-center.flex-wrap.sm:space-x-2
.sm:block.flex.items-center.justify-between
= link_to root_path class: "w-12 h-12 flex justify-center" do
/ Hound logo
%svg.fill-current.w-6.h-auto.text-primary-600.hover:text-primary-700.duration-300.transition.ease-in-out.dark:hover:text-primary-500{fill: "none", height: "50", viewbox: "0 0 39 50", width: "39", xmlns: "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", d: "M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z", "fill-rule" => "evenodd"}
%span.sr-only Hound
%button#search-nav-toggle.sm:hidden.block.p-1.rounded.focus:ring-4.group.focus:bg-slate-800.focus:ring-slate-700{"data-action" => "click->nav#toggle", role: "Mobile navigation toggle"}
%div{"data-nav-target" => "menuBars", role: "none"}
= icon "bars-3-center-left", class: "w-8 h-8 text-slate-300 group-focus:text-slate-200"
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", class: "w-8 h-8 text-slate-300 group-focus:text-slate-200"
#search-navigation.sm:flex-1.sm:block.hidden.sm:static.absolute.top-14.left-0.w-full.bg-slate-900.sm:bg-transparent.transform.origin-top.sm:p-0.p-4.rounded-b.sm:shadow-none.shadow-xl.z-30{"data-nav-target" => "nav", "data-transition-enter-active" => "transition ease-out duration-200", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-active" => "transition ease-in duration-200", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
.sm:flex-1.sm:flex.flex-wrap.items-center.justify-between.lg:text-left.text-center
%nav{role: "Primary navigation"}
%ul.sm:flex.block.items-center.flex-wrap.space-x-0.sm:space-x-3.sm:text-base.text-lg.sm:leading-normal.leading-relaxed.space-y-1.sm:space-y-0.sm:mb-0.mb-4
%li
= nav_link_to "Product", "#", class: "rui-nav-link-dark"
%li
= nav_link_to "Pricing", "#", class: "rui-nav-link-dark"
%li
= nav_link_to "Company", "#", class: "rui-nav-link-dark"
%nav{role: "Secondary navigation"}
%ul.sm:flex.flex-wrap.items-center.justify-center.grid.grid-cols-2.sm:gap-0.gap-4.sm:mt-0.mt-6
%li.sm:pr-5
= link_to "#", class: "group sm:border-none border rounded sm:bg-transparent bg-slate-900 border-slate-700 flex justify-center items-center sm:py-0 py-2 sm:px-0 px-3 sm:block sm:focus:ring-none focus:ring-4 focus:ring-slate-800" do |
= icon "question-mark-circle", class: "fill-current size-5 text-primary-500 group-hover:text-primary-600 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-600", variant: :solid
%li.sm:pr-3
= link_to "#", class: "group sm:border-none border rounded sm:bg-transparent bg-slate-900 border-slate-700 flex justify-center items-center sm:py-0 py-2 sm:px-0 px-3 sm:block sm:focus:ring-none focus:ring-4 focus:ring-slate-800" do
= icon "book-open", class: "fill-current size-5 text-primary-500 group-hover:text-primary-600 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-600", variant: :solid
%li.sm:block.hidden.sm:px-2
%span.h-6.w-px.block.bg-slate-600
%li.w-full.sm:w-auto.sm:mb-0.col-span-2
= link_to "Sign in", new_user_session_path, class: "btn btn-dark sm:w-auto w-full"
%li.sm:pl-3.w-full.sm:w-auto.col-span-2
= link_to "Sign up", new_user_registration_path, class: "btn btn-primary sm:w-auto w-full"// 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')
}
}With action
<header class="relative dark:bg-slate-900" data-controller="nav">
<div class="container mx-auto px-4">
<div class="md:flex items-center flex-wrap md:space-x-2">
<div class="md:block flex items-center justify-between">
<a href="/" class="size-12 flex justify-center">
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out
dark:hover:text-primary-500"
width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
</a>
<button id="action-nav-toggle"
data-action="click->nav#toggle" class="md:hidden block p-1 rounded focus:ring-4 focus:ring-slate-100 active:bg-white group focus:bg-white/50 dark:focus:bg-slate-800 dark:focus:ring-slate-700">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
</button>
</div>
<div id="action-navigation" class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top p-4 md:p-0 lg:p-0 rounded-b md:shadow-none shadow-xl z-40" data-nav-target="nav" data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95">
<div class="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul
class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base text-lg md:leading-normal leading-relaxed space-y-1 md:space-y-0 sm:mb-0 mb-4">
<li>
<a href="#" class="rui-nav-link rui-nav-link-active">Dashboard</a>
</li>
<li>
<a href="#" class="rui-nav-link">Metrics</a>
</li>
<li>
<a href="#" class="rui-nav-link">Settings</a>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="flex flex-wrap items-center md:justify-center justify-between md:space-x-4 md:mt-0 mt-3">
<li class="w-full md:w-auto">
<a href="#" class="btn btn-primary md:w-auto w-full">Create project</a>
</li>
<li class="md:pt-0 pt-6">
<a href="#" data-controller="prevent" data-action="click->prevent#prevent" class="block group">
<%= icon "bell", class: "text-slate-400 md:w-6 w-7 md:h-6 h-7 group-hover:text-primary-600" %>
</a>
</li>
<li class="md:pt-0 pt-6">
<a href="#" data-controller="prevent" data-action="click->prevent#prevent">
<img class="rounded-full md:w-10 w-12 md:h-10 h-12 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" />
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header><header class="relative dark:bg-slate-900" data-controller="nav">
<div class="container mx-auto px-4">
<div class="md:flex items-center flex-wrap md:space-x-2">
<div class="md:block flex items-center justify-between">
<%= link_to root_path, class: "size-12 flex justify-center" do %>
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out
dark:hover:text-primary-500"
width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
<% end %>
<button id="action-nav-toggle" data-action="click->nav#toggle" class="md:hidden block p-1 rounded focus:ring-4 focus:ring-slate-100 active:bg-white group focus:bg-white/50 dark:focus:bg-slate-800 dark:focus:ring-slate-700">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
</button>
</div>
<div id="action-navigation" class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top p-4 md:p-0 lg:p-0 rounded-b md:shadow-none shadow-xl z-40" data-nav-target="nav" data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95">
<div class="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul
class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base text-lg md:leading-normal leading-relaxed space-y-1 md:space-y-0 sm:mb-0 mb-4">
<li>
<%= nav_link_to "Dashboard", "#", class: "rui-nav-link" %>
</li>
<li>
<%= nav_link_to "Metrics", "#", class: "rui-nav-link" %>
</li>
<li>
<%= nav_link_to "Settings", "#", class: "rui-nav-link" %>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="flex flex-wrap items-center md:justify-center justify-between md:space-x-4 md:mt-0 mt-3">
<li class="w-full md:w-auto">
<%= link_to "Create project", "#", class: "btn btn-primary md:w-auto w-full" %>
</li>
<li class="md:pt-0 pt-6">
<%= link_to "#", class: "block group" do %>
<%= icon "bell", class: "text-slate-400 md:w-6 w-7 md:h-6 h-7 group-hover:text-primary-600" %>
<% end %>
</li>
<li class="md:pt-0 pt-6">
<%= link_to "#" do %>
<%= image_tag "#", class: "rounded-full md:w-10 w-12 md:h-10 h-12 object-cover" %>
<% end %>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>%header.relative.dark:bg-slate-900{"data-controller" => "nav"}
.container.mx-auto.px-4
.md:flex.items-center.flex-wrap.md:space-x-2
.md:block.flex.items-center.justify-between
= link_to root_path, class: "size-12 flex justify-center" do
/ Hound logo
%svg.fill-current.w-5.h-auto.text-primary-600.hover:text-primary-700.duration-300.transition.ease-in-out.dark:hover:text-primary-500{fill: "none", height: "50", viewbox: "0 0 39 50", width: "39", xmlns: "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", d: "M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z", "fill-rule" => "evenodd"}
%span.sr-only Hound
%button#action-nav-toggle.md:hidden.block.p-1.rounded.focus:ring-4.focus:ring-slate-100.active:bg-white.group.dark:focus:bg-slate-800.dark:focus:ring-slate-700{class: "focus:bg-white/50", "data-action" => "click->nav#toggle"}
%div{"data-nav-target" => "menuBars", role: "none"}
= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600 |
dark:text-slate-400 dark:group-focus:text-slate-100" |
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100"
#action-navigation.md:flex-1.md:block.hidden.md:static.absolute.top-14.left-0.w-full.bg-white.dark:bg-slate-900.md:bg-transparent.transform.origin-top.p-4.md:p-0.lg:p-0.rounded-b.md:shadow-none.shadow-xl.z-40{"data-nav-target" => "nav", "data-transition-enter-active" => "transition ease-out duration-200", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-active" => "transition ease-in duration-200", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
.md:flex-1.md:flex.flex-wrap.items-center.justify-between.lg:text-left.text-center
%nav{role: "Primary navigation"}
%ul.md:flex.block.items-center.flex-wrap.space-x-0.md:space-x-3.md:text-base.text-lg.md:leading-normal.leading-relaxed.space-y-1.md:space-y-0.sm:mb-0.mb-4
%li
= nav_link_to "Dashboard", "#", class: "rui-nav-link"
%li
= nav_link_to "Metrics", "#", class: "rui-nav-link"
%li
= nav_link_to "Settings", "#", class: "rui-nav-link"
%nav{role: "Secondary navigation"}
%ul.flex.flex-wrap.items-center.md:justify-center.justify-between.md:space-x-4.md:mt-0.mt-3
%li.w-full.md:w-auto
= link_to "Create project", "#", class: "btn btn-primary md:w-auto w-full"
%li.md:pt-0.pt-6
= link_to "#", class: "block group" do
= icon "bell", class: "text-slate-400 md:w-6 w-7 md:h-6 h-7 group-hover:text-primary-600"
%li.md:pt-0.pt-6
= link_to "#" do
= image_tag "#", class: "rounded-full md:w-10 w-12 md:h-10 h-12 object-cover"// 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')
}
}With dropdowns
<header class="relative dark:bg-slate-900 bg-white" data-controller="nav">
<div class="container mx-auto px-4">
<div class="md:flex items-center flex-wrap md:space-x-2">
<div class="md:block flex items-center justify-between">
<a href="/" class="w-12 h-12 flex justify-center">
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out
dark:hover:text-primary-500"
width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
</a>
<button
id="dropdowns-nav-toggle"
data-action="click->nav#toggle"
class="md:hidden block p-1 rounded focus:ring-4 focus:ring-slate-100 active:bg-white group focus:bg-white/50 dark:focus:bg-slate-800 dark:focus:ring-slate-700">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
</button>
</div>
<div
id="dropdowns-navigation"
class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top px-4 pb-4 md:p-0 rounded-b md:shadow-none shadow-xl z-40 text-base"
data-nav-target="nav"
data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95"
>
<div
class="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul
class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base md:leading-normal leading-relaxed space-y-1 md:space-y-0 md:mb-0 mb-2">
<li>
<a href="#" class="rui-nav-link rui-nav-link-active">Dashboard</a>
</li>
<li>
<a href="#" class="rui-nav-link">Metrics</a>
</li>
<li>
<a href="#" class="rui-nav-link">Settings</a>
</li>
<li data-controller="railsui-dropdown" class="relative">
<button class="rui-nav-link flex justify-center items-center space-x-2 sm:w-auto w-full" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
<span>More</span>
<%= icon "chevron-down", class: "size-3 text-slate-500" %>
</button>
<div class="hidden transition transform origin-to-right md:absolute left-0 md:mt-0 mt-2 top-14 bg-white md:rounded-lg md:shadow-xl shadow-slate-900/10 md:border border-slate-200 md:min-w-[180px] z-50 py-1 md:text-sm dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 sm:text-sm text-base font-medium text-slate-600 dark:text-slate-200" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<a href="#" class="px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300">Documents</a>
<a href="#" class="px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300">Statements</a>
<a href="#" class="px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300">Contacts</a>
<a href="#" class="px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300">Referrals</a>
</div>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="md:flex flex-wrap items-center md:justify-center justify-between md:space-x-4">
<!-- Create + Dropdown -->
<li class="w-full md:w-auto relative" data-controller="railsui-dropdown">
<button
type="button"
class="btn btn-primary md:w-auto w-full space-x-1 pr-3"
data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide"
>
<span>Create</span>
<%= icon "plus", class: "size-4 text-primary-100" %>
</button>
<div class="hidden transition transform origin-to-right md:absolute right-0 top-10 bg-white rounded-lg md:shadow-xl shadow-slate-900/10 md:border border-slate-200 md:min-w-[180px] z-50 text-base py-1 md:text-sm dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 font-medium text-slate-600 dark:text-slate-200 md:space-y-0 space-y-2" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<a href="#" class="px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center">
<%= icon "rectangle-stack", class: "text-blue-500 size-5" %>
<span>Repository</span>
</a>
<a href="#" class="px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center">
<%= icon "chart-pie", class: "text-rose-500 size-5" %>
<span>Report</span>
</a>
<a href="#" class="px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center">
<%= icon "arrow-down-circle", class: "text-amber-500 size-5" %>
<span>Export</span>
</a>
</div>
</li>
<!-- Notifications Dropdown -->
<li class="md:mt-0 mt-2 relative" data-controller="railsui-dropdown">
<button type="button" class="flex group justify-center items-center md:w-auto w-full px-4 py-3 md:p-0" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
<div class="relative">
<%= icon "bell", class:"text-slate-400 size-6 group-hover:text-primary-600 dark:group-hover:text-slate-300" %>
<span class="w-[10px] h-[10px] bg-primary-600 rounded-full hover:animate-pulse absolute top-0 right-0 z-20 dark:bg-primary-400"></span>
</div>
<span class="md:hidden text-slate-500 dark:text-slate-200 text-sm font-medium ml-2">Notifications</span>
</button>
<div class="hidden transition transform origin-to-right md:absolute mt-2 ml-2 md:ml-0 md:mt-0 right-0 top-8 bg-white rounded-lg md:shadow-xl shadow-slate-900/10 border border-slate-200 md:min-w-[320px] z-50 py-1 text-sm divide-y text-left dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 font-medium text-slate-600 dark:text-slate-200 dark:divide-gray-600" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<div class="px-4 py-3 md:py-2 flex items-center justify-between group">
<div class="flex-1">
<div class="flex items-start space-x-2">
<img class="size-6 object-cover rounded-full flex-shrink-0 mt-1" alt="John D." src="https://randomuser.me/api/portraits/men/68.jpg" />
<div class="flex-1">
<p class="truncate">John D. replied to <a href="#" class="underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400">your comment</a></p>
<p class="text-xs text-slate-500 dark:text-slate-400">Just now</p>
</div>
</div>
</div>
<button class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-50/50 group border border-slate-200 hover:border-slate-300 focus:ring-4 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:border-slate-400 dark:hover:bg-white/20">
<%= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400
dark:group-hover:text-slate-100 dark:text-slate-50" %>
</button>
</div>
<div class="px-4 py-3 md:py-2 flex items-center justify-between group">
<div class="flex-1">
<div class="flex items-start space-x-2">
<img class="size-6 object-cover rounded-full flex-shrink-0 mt-1" alt="Jane D." src="https://randomuser.me/api/portraits/women/31.jpg" />
<div class="flex-1">
<p>Jane D. posted <a href="#" class="underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400">an update</a></p>
<p class="text-xs text-slate-500 dark:text-slate-400">15 mins ago</p>
</div>
</div>
</div>
<button class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-50/50 group border border-slate-200 hover:border-slate-300 focus:ring-4 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:border-slate-400 dark:hover:bg-white/20">
<%= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400
dark:group-hover:text-slate-100 dark:text-slate-50" %>
</button>
</div>
<div class="px-4 py-3 md:py-2 flex items-center justify-between group">
<div class="flex-1">
<div class="flex items-start space-x-2">
<img class="size-6 object-cover rounded-full flex-shrink-0 mt-1" alt="Scotty P." src="https://randomuser.me/api/portraits/men/85.jpg" />
<div class="flex-1">
<p>Scotty P. shared <a href="#" class="underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400">a repository</a></p>
<p class="text-xs text-slate-500 dark:text-slate-400">2 hours ago</p>
</div>
</div>
</div>
<button class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-50/50 group border border-slate-200 hover:border-slate-300 focus:ring-4 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:border-slate-400 dark:hover:bg-white/20">
<%= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400
dark:group-hover:text-slate-100 dark:text-slate-50" %>
</button>
</div>
<div>
<a class="flex items-center justify-between group px-4 pt-3 pb-2 hover:bg-slate-50 hover:text-primary-500 text-sm group font-medium text-slate-500
dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" href="#">
<span>View all notifications</span>
<%= icon "chevron-right", class: "group-hover:translate-x-1 transform transition ease-in-out size-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-primary-200" %>
</a>
</div>
</div>
</li>
<li class="md:mt-0 mt-4 flex flex-col items-center relative" data-controller="railsui-dropdown">
<button class="group" type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
<img class="rounded-full md:w-10 w-12 md:h-10 h-12 object-cover border-2 border-transparent group-hover:border-primary-600 transition duration-300 ease-in-out" src="https://randomuser.me/api/portraits/men/69.jpg" />
</button>
<div class="hidden transition transform origin-to-right md:absolute right-0 top-10 bg-white rounded-lg md:shadow-xl md:shadow-slate-900/10 md:border border-slate-200 md:min-w-[200px] z-50 py-1 divide-y divide-gray-200 md:w-auto w-full md:text-sm dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 text-base font-medium text-slate-600 dark:text-slate-200 dark:divide-gray-600" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<div role="none">
<a href="#" class="px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block">Profile</a>
<a href="#" class="px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block">Preferences</a>
<a href="#" class="px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block">Billing</a>
</div>
<div role="none">
<a href="#" class="px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block">Sign out</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header><header class="relative dark:bg-slate-900 bg-white" data-controller="nav">
<div class="container mx-auto px-4">
<div class="md:flex items-center flex-wrap md:space-x-2">
<div class="md:block flex items-center justify-between">
<%= link_to root_path, class: "w-12 h-12 flex justify-center" do %>
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out
dark:hover:text-primary-500"
width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
</svg>
<span class="sr-only">Hound</span>
<% end %>
<button
id="dropdowns-nav-toggle"
data-action="click->nav#toggle"
class="md:hidden block p-1 rounded focus:ring-4 focus:ring-slate-100 active:bg-white group focus:bg-white/50 dark:focus:bg-slate-800 dark:focus:ring-slate-700">
<div role="none" data-nav-target="menuBars">
<%= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
</button>
</div>
<div
id="dropdowns-navigation"
class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top px-4 pb-4 md:p-0 rounded-b md:shadow-none shadow-xl z-40 text-base"
data-nav-target="nav"
data-transition-enter-active="transition ease-out duration-200"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-active="transition ease-in duration-200"
data-transition-leave-to="opacity-0 scale-95"
>
<div
class="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
<nav role="Primary navigation">
<ul
class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base md:leading-normal leading-relaxed space-y-1 md:space-y-0 md:mb-0 mb-2">
<li>
<%= nav_link_to "Dashboard", "#", class: "rui-nav-link" %>
</li>
<li>
<%= nav_link_to "Metrics", "#", class: "rui-nav-link" %>
</li>
<li>
<%= nav_link_to "Settings", "#", class: "rui-nav-link" %>
</li>
<li data-controller="railsui-dropdown" class="relative">
<button class="rui-nav-link flex! justify-center items-center gap-2 sm:w-auto w-full" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
<span>More</span>
<%= icon "chevron-down", class: "size-3 text-slate-500" %>
</button>
<div class="hidden transition transform origin-to-right md:absolute left-0 md:mt-0 mt-2 top-12 bg-white md:rounded-lg md:shadow-xl shadow-slate-900/10 md:border border-slate-200 md:min-w-[180px] z-50 py-1 md:text-sm dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 sm:text-sm text-base font-medium text-slate-600 dark:text-slate-200" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<%= link_to "Documents", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300" %>
<%= link_to "Statements", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300" %>
<%= link_to "Contacts", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300" %>
<%= link_to "Referrals", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300" %>
</div>
</li>
</ul>
</nav>
<nav role="Secondary navigation">
<ul class="md:flex flex-wrap items-center md:justify-center justify-between md:space-x-4">
<!-- Create + Dropdown -->
<li class="w-full md:w-auto relative" data-controller="railsui-dropdown">
<button
type="button"
class="btn btn-primary md:w-auto w-full space-x-1 pr-3"
data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide"
>
<span>Create</span>
<%= icon "plus", class: "size-4 text-primary-100" %>
</button>
<div class="hidden transition transform origin-to-right md:absolute right-0 top-10 bg-white rounded-lg md:shadow-xl shadow-slate-900/10 md:border border-slate-200 md:min-w-[180px] z-50 text-base py-1 md:text-sm dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 font-medium text-slate-600 dark:text-slate-200 md:space-y-0 space-y-2" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center" do %>
<%= icon "rectangle-stack", class: "text-blue-500 size-5" %>
<span>Repository</span>
<% end %>
<%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center" do %>
<%= icon "chart-pie", class: "text-rose-500 size-5" %>
<span>Report</span>
<% end %>
<%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center" do %>
<%= icon "arrow-down-circle", class: "text-amber-500 size-5" %>
<span>Export</span>
<% end %>
</div>
</li>
<!-- Notifications Dropdown -->
<li class="md:mt-0 mt-2 relative" data-controller="railsui-dropdown">
<button type="button" class="flex group justify-center items-center md:w-auto w-full px-4 py-3 md:p-0" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
<div class="relative">
<%= icon "bell", class:"text-slate-400 size-6 group-hover:text-primary-600 dark:group-hover:text-slate-300" %>
<span class="w-[10px] h-[10px] bg-primary-600 rounded-full hover:animate-pulse absolute top-0 right-0 z-20 dark:bg-primary-400"></span>
</div>
<span class="md:hidden text-slate-500 dark:text-slate-200 text-sm font-medium ml-2">Notifications</span>
</button>
<div class="hidden transition transform origin-to-right md:absolute mt-2 ml-2 md:ml-0 md:mt-0 right-0 top-8 bg-white rounded-lg md:shadow-xl shadow-slate-900/10 border border-slate-200 md:min-w-[320px] z-50 py-1 text-sm divide-y text-left dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 font-medium text-slate-600 dark:text-slate-200 dark:divide-gray-600" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<div class="px-4 py-3 md:py-2 flex items-center justify-between group">
<div class="flex-1">
<div class="flex items-start space-x-2">
<%= image_tag "#", class: "size-6 object-cover rounded-full flex-shrink-0 mt-1", alt: "John D." %>
<div class="flex-1">
<p class="truncate">John D. replied to <%= link_to "your comment", "#", class:"underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400" %></p>
<p class="text-xs text-slate-500 dark:text-slate-400">Just now</p>
</div>
</div>
</div>
<button class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-50/50 group border border-slate-200 hover:border-slate-300 focus:ring-4 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:border-slate-400 dark:hover:bg-white/20">
<%= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400
dark:group-hover:text-slate-100 dark:text-slate-50" %>
</button>
</div>
<div class="px-4 py-3 md:py-2 flex items-center justify-between group">
<div class="flex-1">
<div class="flex items-start space-x-2">
<%= image_tag "#", class: "size-6 object-cover rounded-full flex-shrink-0 mt-1", alt: "Jane D." %>
<div class="flex-1">
<p>Jane D. posted <%= link_to "an update", "#", class:"underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400" %></p>
<p class="text-xs text-slate-500 dark:text-slate-400">15 mins ago</p>
</div>
</div>
</div>
<button class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-50/50 group border border-slate-200 hover:border-slate-300 focus:ring-4 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:border-slate-400 dark:hover:bg-white/20">
<%= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400
dark:group-hover:text-slate-100 dark:text-slate-50" %>
</button>
</div>
<div class="px-4 py-3 md:py-2 flex items-center justify-between group">
<div class="flex-1">
<div class="flex items-start space-x-2">
<%= image_tag "#", class: "size-6 object-cover rounded-full flex-shrink-0 mt-1", alt: "Scotty P." %>
<div class="flex-1">
<p>Scotty P. shared <%= link_to "a repository", "#", class: "underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400" %></p>
<p class="text-xs text-slate-500 dark:text-slate-400">2 hours ago</p>
</div>
</div>
</div>
<button class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-50/50 group border border-slate-200 hover:border-slate-300 focus:ring-4 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:border-slate-400 dark:hover:bg-white/20">
<%= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400
dark:group-hover:text-slate-100 dark:text-slate-50" %>
</button>
</div>
<div>
<%= link_to "flex items-center justify-between group px-4 pt-3 pb-2 hover:bg-slate-50 hover:text-primary-500 text-sm group font-medium text-slate-500 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" do %>
<span>View all notifications</span>
<%= icon "chevron-right", class: "group-hover:translate-x-1 transform transition ease-in-out size-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-primary-200" %>
<% end %>
</div>
</div>
</li>
<li class="md:mt-0 mt-4 flex flex-col items-center relative" data-controller="railsui-dropdown">
<button class="group" type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
<%= image_tag "#", class: "rounded-full md:w-10 w-12 md:h-10 h-12 object-cover border-2 border-transparent group-hover:border-primary-600 transition duration-300 ease-in-out" %>
</button>
<div class="hidden transition transform origin-to-right md:absolute right-0 top-10 bg-white rounded-lg md:shadow-xl md:shadow-slate-900/10 md:border border-slate-200 md:min-w-[200px] z-50 py-1 divide-y divide-gray-200 md:w-auto w-full md:text-sm dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 text-base font-medium text-slate-600 dark:text-slate-200 dark:divide-gray-600" data-railsui-dropdown-target="menu"
data-transition-enter-from="opacity-0 scale-95"
data-transition-enter-to="opacity-100 scale-100"
data-transition-leave-from="opacity-100 scale-100"
data-transition-leave-to="opacity-0 scale-95">
<div role="none">
<%= link_to "Profile", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block" %>
<%= link_to "Preferences", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block" %>
<%= link_to "Billing", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block" %>
</div>
<div role="none">
<%= button_to "Sign out", destroy_user_session_path, method: :delete, class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block" %>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>%header.relative.dark:bg-slate-900.bg-white{"data-controller" => "nav"}
.container.mx-auto.px-4
.md:flex.items-center.flex-wrap.md:space-x-2
.md:block.flex.items-center.justify-between
= link_to root_path, class: "w-12 h-12 flex justify-center" do
/ Hound logo
%svg.fill-current.w-5.h-auto.text-primary-600.hover:text-primary-700.duration-300.transition.ease-in-out.dark:hover:text-primary-500{fill: "none", height: "50", viewbox: "0 0 39 50", width: "39", xmlns: "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", d: "M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z", "fill-rule" => "evenodd"}
%span.sr-only Hound
%button#dropdowns-nav-toggle.md:hidden.block.p-1.rounded.focus:ring-4.focus:ring-slate-100.active:bg-white.group.dark:focus:bg-slate-800.dark:focus:ring-slate-700{class: "focus:bg-white/50", "data-action" => "click->nav#toggle"}
%div{"data-nav-target" => "menuBars", role: "none"}
= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100"
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100"
#dropdowns-navigation.md:flex-1.md:block.hidden.md:static.absolute.top-14.left-0.w-full.bg-white.dark:bg-slate-900.md:bg-transparent.transform.origin-top.px-4.pb-4.md:p-0.rounded-b.md:shadow-none.shadow-xl.z-40.text-base{"data-nav-target" => "nav", "data-transition-enter-active" => "transition ease-out duration-200", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-active" => "transition ease-in duration-200", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
.md:flex-1.md:flex.flex-wrap.items-center.justify-between.lg:text-left.text-center
%nav{role: "Primary navigation"}
%ul.md:flex.block.items-center.flex-wrap.space-x-0.md:space-x-3.md:text-base.md:leading-normal.leading-relaxed.space-y-1.md:space-y-0.md:mb-0.mb-2
%li
= nav_link_to "Dashboard", "#", class: "rui-nav-link"
%li
= nav_link_to "Metrics", "#", class: "rui-nav-link"
%li
= nav_link_to "Settings", "#", class: "rui-nav-link"
%li.relative{"data-controller" => "railsui-dropdown"}
%button.rui-nav-link.flex.justify-center.items-center.space-x-2.sm:w-auto.w-full{"data-action" => "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide"}
%span More
= icon "chevron-down", class: "size-3 text-slate-500"
.hidden.transition.transform.origin-to-right.md:absolute.left-0.md:mt-0.mt-2.top-12.bg-white.md:rounded-lg.md:shadow-xl.md:border.border-slate-200.z-50.py-1.md:text-sm.dark:bg-slate-700.sm:text-sm.text-base.font-medium.text-slate-600.dark:text-slate-200{class: "shadow-slate-900/10 md:min-w-[180px] dark:shadow-slate-900/50 dark:border-slate-500/60", "data-railsui-dropdown-target" => "menu", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
= link_to "Documents", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300"
= link_to "Statements", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300"
= link_to "Contacts", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300"
= link_to "Referrals", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300"
%nav{role: "Secondary navigation"}
%ul.md:flex.flex-wrap.items-center.md:justify-center.justify-between.md:space-x-4
/ Create + Dropdown
%li.w-full.md:w-auto.relative{"data-controller" => "railsui-dropdown"}
%button.btn.btn-primary.md:w-auto.w-full.space-x-1.pr-3{"data-action" => "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide", type: "button"}
%span Create
= icon "plus", class: "size-4 text-primary-100"
.hidden.transition.transform.origin-to-right.md:absolute.right-0.top-10.bg-white.rounded-lg.md:shadow-xl.md:border.border-slate-200.z-50.text-base.py-1.md:text-sm.dark:bg-slate-700.font-medium.text-slate-600.dark:text-slate-200.md:space-y-0.space-y-2{class: "shadow-slate-900/10 md:min-w-[180px] dark:shadow-slate-900/50 dark:border-slate-500/60", "data-railsui-dropdown-target" => "menu", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center" do
= icon "rectangle-stack", class: "text-blue-500 size-5"
%span Repository
= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center" do
= icon "chart-pie", class: "text-rose-500 size-5"
%span Report
= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 flex items-center space-x-2 group md:justify-start justify-center" do
= icon "arrow-down-circle", class: "text-amber-500 size-5"
%span Export
/ Notifications Dropdown
%li.md:mt-0.mt-2.relative{"data-controller" => "railsui-dropdown"}
%button.flex.group.justify-center.items-center.md:w-auto.w-full.px-4.py-3.md:p-0{"data-action" => "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide", type: "button"}
.relative
= icon "bell", class:"text-slate-400 size-6 group-hover:text-primary-600 dark:group-hover:text-slate-300"
%span.bg-primary-600.rounded-full.hover:animate-pulse.absolute.top-0.right-0.z-20.dark:bg-primary-400{class: "w-[10px] h-[10px]"}
%span.md:hidden.text-slate-500.dark:text-slate-200.text-sm.font-medium.ml-2 Notifications
.hidden.transition.transform.origin-to-right.md:absolute.mt-2.ml-2.md:ml-0.md:mt-0.right-0.top-8.bg-white.rounded-lg.md:shadow-xl.border.border-slate-200.z-50.py-1.text-sm.divide-y.text-left.dark:bg-slate-700.font-medium.text-slate-600.dark:text-slate-200.dark:divide-gray-600{class: "shadow-slate-900/10 md:min-w-[320px] dark:shadow-slate-900/50 dark:border-slate-500/60", "data-railsui-dropdown-target" => "menu", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
.px-4.py-3.md:py-2.flex.items-center.justify-between.group
.flex-1
.flex.items-start.space-x-2
= image_tag "#", class: "size-6 object-cover rounded-full flex-shrink-0 mt-1", alt: "John D."
.flex-1
%p.truncate
John D. replied to #{link_to "your comment", "#", class:"underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400"}
%p.text-xs.text-slate-500.dark:text-slate-400 Just now
%button.opacity-0.group-hover:opacity-100.transition.ease-in-out.duration-300.flex.items-center.justify-center.rounded-full.w-7.h-7.group.border.border-slate-200.hover:border-slate-300.focus:ring-4.dark:border-slate-400{class: "hover:bg-slate-50/50 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:hover:bg-white/20"}
= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400 dark:group-hover:text-slate-100 dark:text-slate-50"
.px-4.py-3.md:py-2.flex.items-center.justify-between.group
.flex-1
.flex.items-start.space-x-2
= image_tag "#", class: "size-6 object-cover rounded-full flex-shrink-0 mt-1", alt: "Jane D."
.flex-1
%p
Jane D. posted #{link_to "an update", "#", class:"underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400"}
%p.text-xs.text-slate-500.dark:text-slate-400 15 mins ago
%button.opacity-0.group-hover:opacity-100.transition.ease-in-out.duration-300.flex.items-center.justify-center.rounded-full.w-7.h-7.group.border.border-slate-200.hover:border-slate-300.focus:ring-4.dark:border-slate-400{class: "hover:bg-slate-50/50 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:hover:bg-white/20"}
= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400 dark:group-hover:text-slate-100 dark:text-slate-50"
.px-4.py-3.md:py-2.flex.items-center.justify-between.group
.flex-1
.flex.items-start.space-x-2
= image_tag "#", class: "size-6 object-cover rounded-full flex-shrink-0 mt-1", alt: "Scotty P."
.flex-1
%p
Scotty P. shared #{link_to "a repository", "#", class: "underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-400"}
%p.text-xs.text-slate-500.dark:text-slate-400 2 hours ago
%button.opacity-0.group-hover:opacity-100.transition.ease-in-out.duration-300.flex.items-center.justify-center.rounded-full.w-7.h-7.group.border.border-slate-200.hover:border-slate-300.focus:ring-4.dark:border-slate-400{class: "hover:bg-slate-50/50 focus:ring-slate-100/75 bg-white/50 dark:bg-slate-500/75 dark:focus:ring-slate-100/10 dark:hover:bg-white/20"}
= icon "x-mark", class: "size-3 text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400 dark:group-hover:text-slate-100 dark:text-slate-50"
%div
= link_to "flex items-center justify-between group px-4 pt-3 pb-2 hover:bg-slate-50 hover:text-primary-500 text-sm group font-medium text-slate-500 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" do
%span View all notifications
= icon "chevron-right", class: "group-hover:translate-x-1 transform transition ease-in-out size-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-primary-200"
%li.md:mt-0.mt-4.flex.flex-col.items-center.relative{"data-controller" => "railsui-dropdown"}
%button.group{"data-action" => "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide", type: "button"}
= image_tag "#", class: "rounded-full md:w-10 w-12 md:h-10 h-12 object-cover border-2 border-transparent group-hover:border-primary-600 transition duration-300 ease-in-out"
.hidden.transition.transform.origin-to-right.md:absolute.right-0.top-10.bg-white.rounded-lg.md:shadow-xl.md:border.border-slate-200.z-50.py-1.divide-y.divide-gray-200.md:w-auto.w-full.md:text-sm.dark:bg-slate-700.text-base.font-medium.text-slate-600.dark:text-slate-200.dark:divide-gray-600{class: "md:shadow-slate-900/10 md:min-w-[200px] dark:shadow-slate-900/50 dark:border-slate-500/60", "data-railsui-dropdown-target" => "menu", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
%div{role: "none"}
= link_to "Profile", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block"
= link_to "Preferences", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block"
= link_to "Billing", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block"
%div{role: "none"}
= button_to "Sign out", destroy_user_session_path, method: :delete, class: "px-4 py-2 md:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block"// 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')
}
}