Class: BetterUi::Drawer::NavItemComponent

Inherits:
ApplicationComponent show all
Defined in:
app/components/better_ui/drawer/nav_item_component.rb

Overview

A navigation item component for sidebar menus with icon, label, and badge support.

Examples:

Basic usage

<%= render BetterUi::Drawer::NavItemComponent.new(label: "Dashboard", href: "/dashboard") %>

With icon and active state

<%= render BetterUi::Drawer::NavItemComponent.new(
  label: "Dashboard",
  href: "/dashboard",
  active: true
) do |item| %>
  <% item.with_icon do %>
    <svg>...</svg>
  <% end %>
<% end %>

With badge

<%= render BetterUi::Drawer::NavItemComponent.new(label: "Messages", href: "/messages") do |item| %>
  <% item.with_icon do %><svg>...</svg><% end %>
  <% item.with_badge do %>5<% end %>
<% end %>

With HTTP method for logout

<%= render BetterUi::Drawer::NavItemComponent.new(
  label: "Logout",
  href: "/logout",
  method: :delete
) %>

Constant Summary collapse

VARIANTS =

Visual variant configurations

{
  light: {
    base: "text-grayscale-700",
    active: "bg-primary-50 text-primary-700",
    inactive: "hover:bg-grayscale-100",
    badge_bg: "bg-primary-100",
    badge_text: "text-primary-700"
  },
  dark: {
    base: "text-grayscale-300",
    active: "bg-white/10 text-white",
    inactive: "hover:bg-white/5",
    badge_bg: "bg-white/20",
    badge_text: "text-white"
  },
  primary: {
    base: "text-primary-100",
    active: "bg-white/20 text-white",
    inactive: "hover:bg-white/10",
    badge_bg: "bg-white/20",
    badge_text: "text-white"
  }
}.freeze
METHODS =

Allowed HTTP methods

%i[get post put patch delete].freeze

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(label:, href:, active: false, method: nil, variant: :light, container_classes: nil, **options) ⇒ NavItemComponent

Initializes a new nav item component.

Parameters:

  • label (String) —

    the link text (required)

  • href (String) —

    the link URL (required)

  • active (Boolean) (defaults to: false) —

    whether the item is currently active (default: false)

  • method (Symbol, nil) (defaults to: nil) —

    HTTP method for non-GET requests (:post, :put, :patch, :delete)

  • variant (Symbol) (defaults to: :light) —

    color variant (:light, :dark, :primary), default: :light

  • container_classes (String, nil) (defaults to: nil) —

    additional CSS classes

  • options (Hash) —

    additional HTML attributes passed to the link element

Raises:

  • (ArgumentError) —

    if variant is not one of the allowed values

  • (ArgumentError) —

    if method is provided and not one of the allowed values



84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
# File 'app/components/better_ui/drawer/nav_item_component.rb', line 84

def initialize(
  label:,
  href:,
  active: false,
  method: nil,
  variant: :light,
  container_classes: nil,
  **options
)
  @label = label
  @href = href
  @active = active
  @method = validate_method(method)
  @variant = validate_variant(variant)
  @container_classes = container_classes
  @options = options
end

Instance Attribute Details

#href ⇒ String (readonly)

Returns the href URL.

Returns:

  • (String) —

    the URL



110
111
112
 
# File 'app/components/better_ui/drawer/nav_item_component.rb', line 110

def href
  @href
end

#label ⇒ String (readonly)

Returns the label text.

Returns:

  • (String) —

    the label



105
106
107
 
# File 'app/components/better_ui/drawer/nav_item_component.rb', line 105

def label
  @label
end

Instance Method Details

#active? ⇒ Boolean

Returns whether the item is active.

Returns:

  • (Boolean) —

    true if active



115
116
117
 
# File 'app/components/better_ui/drawer/nav_item_component.rb', line 115

def active?
  @active
end

#with_badge ⇒ Object

Slot for rendering a badge/counter (displayed after label).

Yield Returns:

  • (String) —

    the badge content (usually a number)



70
 
# File 'app/components/better_ui/drawer/nav_item_component.rb', line 70

renders_one :badge

#with_icon ⇒ Object

Slot for rendering the icon (displayed before label).

Yield Returns:

  • (String) —

    the SVG or icon HTML content



65
 
# File 'app/components/better_ui/drawer/nav_item_component.rb', line 65

renders_one :icon