Components
Navigation
Theme
Hound
Framework
Tailwind CSS
Quicklinks
Quickly navigate to different navigation patterns below
Navigation
Base
The base nav is the offical navigation design you'll see on the Hound theme's preview page. It supports dark mode and is full responsive. Bundled with the base navigation (and all other navs) is a mobile nav toggle control powered by Stimulus.js
For any icons shown, refer to the Rails UI icon documentation.
<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-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-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="nav-link">Product</a>
</li>
<li>
<a href="#" class="nav-link">Pricing</a>
</li>
<li>
<a href="#" class="nav-link 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", classes: "fill-current w-5 h-5 text-indigo-600 group-hover:text-indigo-700 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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", classes: "fill-current w-5 h-5
text-indigo-600 group-hover:text-indigo-700
transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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: "w-12 h-12 flex justify-center" do %>
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-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: "nav-link" %>
</li>
<li>
<%= nav_link_to "Pricing", "#", class: "nav-link" %>
</li>
<li>
<%= nav_link_to "Company", "#", class: "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", classes: "fill-current w-5 h-5 text-indigo-600 group-hover:text-indigo-700 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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", classes: "fill-current w-5 h-5
text-indigo-600 group-hover:text-indigo-700
transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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>
</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
%a.w-12.h-12.flex.justify-center{href: "/"}
/ Hound logo
%svg.fill-current.w-5.h-auto.text-indigo-600.hover:text-indigo-700.duration-300.transition.ease-in-out.dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100"
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
#base-navigation.md:flex-1.md:block.hidden.md:static.absolute.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.top-14{"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: "nav-link"
%li
= nav_link_to "Pricing", "#", class: "nav-link"
%li
= nav_link_to "Company", "#", class: "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"
= icon "question-mark-circle", classes: "fill-current w-5 h-5 text-indigo-600 group-hover:text-indigo-700 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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"
= icon "book-open", classes: "fill-current w-5 h-5
text-indigo-600 group-hover:text-indigo-700
transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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')
}
}Navigation
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-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "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", classes: "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>
<a href="#" class="nav-link-dark">Product</a>
</li>
<li>
<a href="#" class="nav-link-dark">Pricing</a>
</li>
<li>
<a href="#" class="nav-link-dark 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", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "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", classes: "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: "nav-link-dark" %>
</li>
<li>
<%= nav_link_to "Pricing", "#", class: "nav-link-dark" %>
</li>
<li>
<%= nav_link_to "Company", "#", class: "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", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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"
/ Hound logo
%svg.fill-current.w-5.h-auto.text-indigo-600.hover:text-indigo-700.duration-300.transition.ease-in-out.dark:hover:text-indigo-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"}
%div{"data-nav-target" => "menuBars", role: "none"}
= icon "bars-3-center-left", classes: "w-8 h-8 text-slate-300 group-focus:text-slate-200" %>
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", classes: "w-8 h-8 text-slate-300 group-focus:text-slate-200"
#search-navigation.sm:flex-1.sm:block.hidden.sm:static.absolute.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.top-14{"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: "nav-link-dark"
%li
= nav_link_to "Pricing", "#", class: "nav-link-dark"
%li
= nav_link_to "Company", "#", class: "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", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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"
= icon "book-open", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-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')
}
}Navigation
Dark
The dark nav has a dark dominant color and a new custom class called .nav-link-dark for the main navigation links.
By using the nav_link_to helper method (shown in the erb and haml snippets below and bundled with Rails UI), an active class of nav-link-active is applied for the current page within your application.
If a regular link_to view helper is preferred for links, manually append the nav-link-active class as needed.
<header class="relative 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-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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="dark-nav-toggle"
data-action="click->nav#toggle"
class="md: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", classes: "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", classes: "w-8 h-8 text-slate-300 group-focus:text-slate-200" %>
</div>
</button>
</div>
<div id="dark-navigation"
class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-slate-900 md:bg-transparent transform origin-top md:p-0 p-4 rounded-b md: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="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 md:mb-0 mb-4">
<li>
<a href="#" class="nav-link-dark">Product</a>
</li>
<li>
<a href="#" class="nav-link-dark">Pricing</a>
</li>
<li>
<a href="#" class="nav-link-dark 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 bg-slate-900 border-slate-700 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-800">
<%= icon "question-mark-circle", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-600", variant: :solid %>
</a>
</li>
<li class="md:pr-3">
<a href="#" class="group md:border-none border rounded md:bg-transparent bg-slate-900 border-slate-700 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-800">
<%= icon "book-open", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-600", variant: :solid %>
</a>
</li>
<li class="md:block hidden md:pl-2 md:pr-4">
<span class="h-6 w-px block bg-slate-600"></span>
</li>
<li class="w-full md:w-auto md:mb-0 col-span-2">
<a href="#" class="btn btn-dark 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-primary md:w-auto w-full">Sign up</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header><header class="relative 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: "w-12 h-12 flex justify-center" do %>
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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="dark-nav-toggle"
data-action="click->nav#toggle"
class="md: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", classes: "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", classes: "w-8 h-8 text-slate-300 group-focus:text-slate-200" %>
</div>
</button>
</div>
<div
id="dark-navigation"
class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-slate-900 md:bg-transparent transform origin-top md:p-0 p-4 rounded-b md: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="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 md:mb-0 mb-4">
<li>
<%= nav_link_to "Product", "#", class: "nav-link-dark" %>
</li>
<li>
<%= nav_link_to "Pricing", "#", class: "nav-link-dark" %>
</li>
<li>
<%= nav_link_to "Company", "#", class: "nav-link-dark" %>
</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 md:bg-transparent bg-slate-900 border-slate-700 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-800" do
<%= icon "question-mark-circle", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-600", variant: :solid %>
<% end %>
</li>
<li class="md:pr-3">
<%= link_to "#", class: "group md:border-none border rounded md:bg-transparent bg-slate-900 border-slate-700 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-800" do %>
<%= icon "book-open", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-600", variant: :solid %>
<% end %>
</li>
<li class="md:block hidden md:pl-2 md:pr-4">
<span class="h-6 w-px block 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-dark 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-primary md:w-auto w-full" %>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>%header.relative.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: "w-12 h-12 flex justify-center"
/ Hound logo
%svg.fill-current.w-5.h-auto.text-indigo-600.hover:text-indigo-700.duration-300.transition.ease-in-out.dark:hover:text-indigo-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#dark-nav-toggle.md: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", classes: "w-8 h-8 text-slate-300 group-focus:text-slate-200" %>
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", classes: "w-8 h-8 text-slate-300 group-focus:text-slate-200"
#dark-navigation.md:flex-1.md:block.hidden.md:static.absolute.left-0.w-full.bg-slate-900.md:bg-transparent.transform.origin-top.md:p-0.p-4.rounded-b.md:shadow-none.shadow-xl.z-30.top-14{"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.md:mb-0.mb-4
%li
= nav_link_to "Product", "#", class: "nav-link-dark"
%li
= nav_link_to "Pricing", "#", class: "nav-link-dark"
%li
= nav_link_to "Company", "#", class: "nav-link-dark"
%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 md:bg-transparent bg-slate-900 border-slate-700 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-800" do
= icon "question-mark-circle", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-600", variant: :solid
%li.md:pr-3
= link_to "#", class: "group md:border-none border rounded md:bg-transparent bg-slate-900 border-slate-700 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-800"
= icon "book-open", classes: "fill-current w-5 h-5 text-indigo-500 group-hover:text-indigo-600 transition ease-in-out duration-300 dark:text-indigo-500 dark:group-hover:text-indigo-600", variant: :solid
%li.md:block.hidden.md:pl-2 md:pr-4
%span.h-6.w-px.block.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-dark 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-primary 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')
}
}Navigation
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="w-12 h-12 flex justify-center">
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-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="nav-link nav-link-active">Dashboard</a>
</li>
<li>
<a href="#" class="nav-link">Metrics</a>
</li>
<li>
<a href="#" class="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", classes: "text-slate-400 md:w-6 w-7 md:h-6 h-7 group-hover:text-indigo-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://source.unsplash.com/random/140x140/?portrait&orientation=landscape" />
</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: "w-12 h-12 flex justify-center" do %>
<!-- Hound logo -->
<svg
class="fill-current w-5 h-auto text-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-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: "nav-link" %>
</li>
<li>
<%= nav_link_to "Metrics", "#", class: "nav-link" %>
</li>
<li>
<%= nav_link_to "Settings", "#", class: "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">
<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", classes: "text-slate-400 md:w-6 w-7 md:h-6 h-7 group-hover:text-indigo-600" %>
</a>
</li>
<li class="md:pt-0 pt-6">
<a href="#" data-controller="prevent" data-action="click->prevent#prevent">
<%= image_tag "#", class: "rounded-full md:w-10 w-12 md:h-10 h-12 object-cover" %>
</a>
</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: "w-12 h-12 flex justify-center"
/ Hound logo
%svg.fill-current.w-5.h-auto.text-indigo-600.hover:text-indigo-700.duration-300.transition.ease-in-out.dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100"
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600 dark:text-slate-400 dark:group-focus:text-slate-100"
#action-navigation.md:flex-1.md:block.hidden.md:static.absolute.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.top-14{"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: "nav-link"
%li
= nav_link_to "Metrics", "#", class: "nav-link"
%li
= nav_link_to "Settings", "#", class: "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
%a.btn.btn-primary.md:w-auto.w-full{href: "#"} Create project
%li.md:pt-0.pt-6
%a.block.group{"data-action" => "click->prevent#prevent", "data-controller" => "prevent", href: "#"}
= icon "bell", classes: "text-slate-400 md:w-6 w-7 md:h-6 h-7 group-hover:text-indigo-600"
%li.md:pt-0.pt-6
%a{"data-action" => "click->prevent#prevent", "data-controller" => "prevent", href: "#"}
= 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')
}
}Navigation
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-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-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="nav-link nav-link-active">Dashboard</a>
</li>
<li>
<a href="#" class="nav-link">Metrics</a>
</li>
<li>
<a href="#" class="nav-link">Settings</a>
</li>
<li data-controller="dropdown" class="relative">
<button class="nav-link flex justify-center items-center space-x-2 sm:w-auto w-full" data-action="click->dropdown#toggle click@window->dropdown#hide">
<span>More</span>
<%= icon "chevron-down", classes: "w-3 h-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-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-indigo-600 block dark:hover:text-indigo-300">Documents</a>
<a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300">Statements</a>
<a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300">Contacts</a>
<a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-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="dropdown">
<button
type="button"
class="btn btn-primary md:w-auto w-full space-x-1 pr-3"
data-action="click->dropdown#toggle click@window->dropdown#hide"
>
<span>Create</span>
<%= icon "plus", classes: "w-4 h-4 text-indigo-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-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-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center">
<%= icon "rectangle-stack", classes: "text-blue-500 w-5 h-5" %>
<span>Repository</span>
</a>
<a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center">
<%= icon "chart-pie", classes: "text-rose-500 w-5 h-5" %>
<span>Report</span>
</a>
<a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center">
<%= icon "arrow-down-circle", classes: "text-amber-500 w-5 h-5" %>
<span>Export</span>
</a>
</div>
</li>
<!-- Notifications Dropdown -->
<li class="md:mt-0 mt-2 relative" data-controller="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->dropdown#toggle click@window->dropdown#hide">
<div class="relative">
<%= icon "bell", classes:"text-slate-400 w-6 h-6 group-hover:text-indigo-600 dark:group-hover:text-slate-300" %>
<span class="w-[10px] h-[10px] bg-indigo-600 rounded-full hover:animate-pulse absolute top-0 right-0 z-20 dark:bg-indigo-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-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="w-6 h-6 object-cover rounded-full flex-shrink-0 mt-1" alt="John D." src="https://source.unsplash.com/random/140x140/?male portrait&orientation=landscape" />
<div class="flex-1">
<p class="truncate">John D. replied to <a href="#" class="underline text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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="w-6 h-6 object-cover rounded-full flex-shrink-0 mt-1" alt="Jane D." src="https://source.unsplash.com/random/140x140/?female portrait&orientation=landscape" />
<div class="flex-1">
<p>Jane D. posted <a href="#" class="underline text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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="w-6 h-6 object-cover rounded-full flex-shrink-0 mt-1" alt="Scotty P." src="https://source.unsplash.com/random/140x140/?male portrait&orientation=landscape" />
<div class="flex-1">
<p>Scotty P. shared <a href="#" class="underline text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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-indigo-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", classes: "group-hover:translate-x-1 transform transition ease-in-out w-4 h-4 text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-indigo-200" %>
</a>
</div>
</div>
</li>
<li class="md:mt-0 mt-4 flex flex-col items-center relative" data-controller="dropdown">
<button class="group" type="button" data-action="click->dropdown#toggle click@window->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-indigo-600 transition duration-300 ease-in-out" src="https://source.unsplash.com/random/140x140/?portrait&orientation=landscape" />
</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 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-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-indigo-600 dark:hover:text-indigo-400 block">Profile</a>
<a href="#" class="px-4 py-2 md:py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 block">Preferences</a>
<a href="#" class="px-4 py-2 md:py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 block">Billing</a>
</div>
<div role="none">
<a href="#" class="px-4 py-2 md:py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-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-indigo-600 hover:text-indigo-700 duration-300 transition ease-in-out
dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100" %>
</div>
<div role="none" data-nav-target="menuCross" class="hidden">
<%= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-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", "#" %>
</li>
<li>
<%= nav_link_to "Metrics", "#" %>
</li>
<li>
<%= nav_link_to "Settings", "#" %>
</li>
<li data-controller="dropdown" class="relative">
<button class="nav-link flex justify-center items-center space-x-2 sm:w-auto w-full" data-action="click->dropdown#toggle click@window->dropdown#hide">
<span>More</span>
<%= icon "chevron-down", classes: "w-3 h-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-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-indigo-600 block dark:hover:text-indigo-300" %>
<%= link_to "Statements", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300" %>
<%= link_to "Contacts", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300" %>
<%= link_to "Referrals", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-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="dropdown">
<button
type="button"
class="btn btn-primary md:w-auto w-full space-x-1 pr-3"
data-action="click->dropdown#toggle click@window->dropdown#hide"
>
<span>Create</span>
<%= icon "plus", classes: "w-4 h-4 text-indigo-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-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-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center" do %>
<%= icon "rectangle-stack", classes: "text-blue-500 w-5 h-5" %>
<span>Repository</span>
<% end %>
<%= link_to "#", class: "px-4 py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center" do %>
<%= icon "chart-pie", classes: "text-rose-500 w-5 h-5" %>
<span>Report</span>
<% end %>
<%= link_to "#", class: "px-4 py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center" do %>
<%= icon "arrow-down-circle", classes: "text-amber-500 w-5 h-5" %>
<span>Export</span>
<% end %>
</div>
</li>
<!-- Notifications Dropdown -->
<li class="md:mt-0 mt-2 relative" data-controller="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->dropdown#toggle click@window->dropdown#hide">
<div class="relative">
<%= icon "bell", classes:"text-slate-400 w-6 h-6 group-hover:text-indigo-600 dark:group-hover:text-slate-300" %>
<span class="w-[10px] h-[10px] bg-indigo-600 rounded-full hover:animate-pulse absolute top-0 right-0 z-20 dark:bg-indigo-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-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: "w-6 h-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-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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: "w-6 h-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-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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: "w-6 h-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-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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-indigo-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", classes: "group-hover:translate-x-1 transform transition ease-in-out w-4 h-4 text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-indigo-200" %>
<% end %>
</div>
</div>
</li>
<li class="md:mt-0 mt-4 flex flex-col items-center relative" data-controller="dropdown">
<button class="group" type="button" data-action="click->dropdown#toggle click@window->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-indigo-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 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-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-indigo-600 dark:hover:text-indigo-400 block" %>
<%= link_to "Preferences", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 block" %>
<%= link_to "Billing", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-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-indigo-600 dark:hover:text-indigo-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"
/ Hound logo
%svg.fill-current.w-5.h-auto.text-indigo-600.hover:text-indigo-700.duration-300.transition.ease-in-out.dark:hover:text-indigo-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", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-600
dark:text-slate-400 dark:group-focus:text-slate-100"
.hidden{"data-nav-target" => "menuCross", role: "none"}
= icon "x-mark", classes: "w-8 h-8 text-slate-600 group-focus:text-indigo-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", "#"
%li
= nav_link_to "Metrics", "#"
%li
= nav_link_to "Settings", "#"
%li.relative{"data-controller" => "dropdown"}
%button.nav-link.flex.justify-center.items-center.space-x-2.sm:w-auto.w-full{"data-action" => "click->dropdown#toggle click@window->dropdown#hide"}
%span More
= icon "chevron-down", classes: "w-3 h-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-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-indigo-600 block dark:hover:text-indigo-300"
= link_to "Statements", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300"
= link_to "Contacts", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300"
= link_to "Referrals", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-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" => "dropdown"}
%button.btn.btn-primary.md:w-auto.w-full.space-x-1.pr-3{"data-action" => "click->dropdown#toggle click@window->dropdown#hide", type: "button"}
%span Create
= icon "plus", classes: "w-4 h-4 text-indigo-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-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-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center"
= icon "rectangle-stack", classes: "text-blue-500 w-5 h-5"
%span Repository
= link_to "#", class: "px-4 py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center"
= icon "chart-pie", classes: "text-rose-500 w-5 h-5"
%span Report
= link_to "#", class: "px-4 py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center space-x-2 group md:justify-start justify-center"
= icon "arrow-down-circle", classes: "text-amber-500 w-5 h-5"
%span Export
/ Notifications Dropdown
%li.md:mt-0.mt-2.relative{"data-controller" => "dropdown"}
%button.flex.group.justify-center.items-center.md:w-auto.w-full.px-4.py-3.md:p-0{"data-action" => "click->dropdown#toggle click@window->dropdown#hide", type: "button"}
.relative
= icon "bell", classes:"text-slate-400 w-6 h-6 group-hover:text-indigo-600 dark:group-hover:text-slate-300"
%span.bg-indigo-600.rounded-full.hover:animate-pulse.absolute.top-0.right-0.z-20.dark:bg-indigo-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-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: "w-6 h-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-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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: "w-6 h-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-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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: "w-6 h-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-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-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", title: "Mark as read", classes: "w-3 h-3 text-slate-600 group-hover:text-indigo-600 dark:group-hover:text-indigo-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-indigo-500 text-sm group font-medium text-slate-500
dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white"
%span View all notifications
= icon "chevron-right", classes: "group-hover:translate-x-1 transform transition ease-in-out w-4 h-4 text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-indigo-200"
%li.md:mt-0.mt-4.flex.flex-col.items-center.relative{"data-controller" => "dropdown"}
%button.group{"data-action" => "click->dropdown#toggle click@window->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-indigo-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.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-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-indigo-600 dark:hover:text-indigo-400 block"
= link_to "Preferences", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-400 block"
= link_to "Billing", "#", class: "px-4 py-2 md:py-[.4rem] hover:text-indigo-600 dark:hover:text-indigo-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-indigo-600 dark:hover:text-indigo-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')
}
}