46 lines
2.0 KiB
Plaintext
46 lines
2.0 KiB
Plaintext
<%# Dynamic breadcrumb navigation component %>
|
|
<%# Usage: render 'components/breadcrumb', crumbs: [ %>
|
|
<%# { name: 'Home', path: root_path }, %>
|
|
<%# { name: 'Events', path: events_path }, %>
|
|
<%# { name: 'Current Event', path: nil } %>
|
|
<%# ] %>
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="w-full bg-white px-3 sm:px-4 py-3 rounded-xl shadow-sm border border-gray-100 mb-6 sm:mb-8 overflow-hidden" aria-label="Breadcrumb">
|
|
<div class="flex items-center gap-1 sm:gap-2 min-w-0">
|
|
<% crumbs.each_with_index do |crumb, index| %>
|
|
<% if crumb[:path].present? %>
|
|
<%# Crumb with link %>
|
|
<%= link_to crumb[:path], class: "inline-flex items-center text-xs sm:text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors duration-200 flex-shrink-0" do %>
|
|
<% if index == 0 %>
|
|
<i data-lucide="home" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0"></i>
|
|
<% end %>
|
|
<span class="<%= 'hidden sm:inline' if index > 0 && index < crumbs.length - 2 %>">
|
|
<%= crumb[:name] %>
|
|
</span>
|
|
<% end %>
|
|
<% else %>
|
|
<%# Current page (no link) %>
|
|
<span class="text-xs sm:text-sm font-medium text-primary-600 truncate min-w-0 flex-1" aria-current="page">
|
|
<%= crumb[:name] %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%# Separator (except for the last item) %>
|
|
<% if index < crumbs.length - 1 %>
|
|
<% if index == 0 || index >= crumbs.length - 2 %>
|
|
<i data-lucide="chevron-right" class="w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0"></i>
|
|
<% else %>
|
|
<span class="hidden sm:inline">
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400 flex-shrink-0"></i>
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%# Show ellipsis on mobile when there are more than 3 items %>
|
|
<% if crumbs.length > 3 %>
|
|
<span class="text-gray-400 text-xs font-medium sm:hidden flex-shrink-0">...</span>
|
|
<% end %>
|
|
</div>
|
|
</nav> |