mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
3479904387
Pass beta: true on gated nav items so the nav_item partial renders a violet dot-only pill in the top-right of the icon. The doc covers the dot_only usage; the nav itself was never wired up before merge.
26 lines
1.1 KiB
Plaintext
26 lines
1.1 KiB
Plaintext
<%# locals: (name:, path:, icon:, icon_custom:, active:, mobile_only: false, beta: false) %>
|
|
|
|
<%= link_to path, class: "space-y-1 group block relative pb-1", aria: { current: ("page" if active) } do %>
|
|
<div class="grow flex flex-col lg:flex-row gap-1 items-center">
|
|
<%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => active) %>
|
|
|
|
<%= tag.div class: class_names(
|
|
"w-8 h-8 flex items-center justify-center mx-auto rounded-lg relative",
|
|
active ? "bg-container shadow-xs text-primary" : "group-hover:bg-surface-hover text-secondary"
|
|
) do %>
|
|
<%= icon(icon, color: active ? "current" : "default", custom: icon_custom) %>
|
|
<% if beta %>
|
|
<span class="absolute -top-0.5 -right-0.5">
|
|
<%= render DS::Pill.new(tone: :violet, dot_only: true, title: "Beta") %>
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="grow flex justify-center lg:pl-2">
|
|
<%= tag.p class: class_names("font-medium text-[11px]", active ? "text-primary" : "text-secondary") do %>
|
|
<%= name %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|