Class: BetterUi::Drawer::NavGroupComponent

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

Overview

A navigation group component for sidebar menus with a title and collection of items.

Examples:

Basic usage

<%= render BetterUi::Drawer::NavGroupComponent.new(title: "Main") do |group| %>
  <% group.with_item(label: "Dashboard", href: "/dashboard", active: true) do |item| %>
    <% item.with_icon do %><svg>...</svg><% end %>
  <% end %>
  <% group.with_item(label: "Settings", href: "/settings") do |item| %>
    <% item.with_icon do %><svg>...</svg><% end %>
  <% end %>
<% end %>

Without title

<%= render BetterUi::Drawer::NavGroupComponent.new do |group| %>
  <% group.with_item(label: "Home", href: "/") %>
<% end %>

With variant for dark sidebar

<%= render BetterUi::Drawer::NavGroupComponent.new(title: "Menu", variant: :dark) do |group| %>
  <% group.with_item(label: "Dashboard", href: "/") %>
<% end %>

Constant Summary collapse

VARIANTS =

Visual variant configurations for title

{
  light: {
    title: "text-grayscale-500"
  },
  dark: {
    title: "text-grayscale-400"
  },
  primary: {
    title: "text-primary-200"
  }
}.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(title: nil, variant: :light, container_classes: nil, **options) ⇒ NavGroupComponent

Initializes a new nav group component.

Parameters:

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

    the group title (optional)

  • 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

Raises:

  • (ArgumentError) —

    if variant is not one of the allowed values



69
70
71
72
73
74
75
76
77
78
79
 
# File 'app/components/better_ui/drawer/nav_group_component.rb', line 69

def initialize(
  title: nil,
  variant: :light,
  container_classes: nil,
  **options
)
  @title = title
  @variant = validate_variant(variant)
  @container_classes = container_classes
  @options = options
end

Instance Attribute Details

#title ⇒ String? (readonly)

Returns the title text.

Returns:

  • (String, nil) —

    the title



84
85
86
 
# File 'app/components/better_ui/drawer/nav_group_component.rb', line 84

def title
  @title
end

Instance Method Details

#with_item {|item| ... } ⇒ Object

Slot for rendering navigation items. All parameters are passed to NavItemComponent.

Parameters:

  • label (String) —

    the item label text

  • href (String) —

    the link URL

  • active (Boolean) —

    whether the item is currently active

  • method (Symbol, nil) —

    HTTP method for non-GET requests

Yield Parameters:



48
49
50
51
52
53
54
55
56
57
58
59
 
# File 'app/components/better_ui/drawer/nav_group_component.rb', line 48

renders_many :items, ->(label:, href:, active: false, method: nil, container_classes: nil, **options, &block) {
  NavItemComponent.new(
    label: label,
    href: href,
    active: active,
    method: method,
    variant: @variant,
    container_classes: container_classes,
    **options,
    &block
  )
}