Class: Plutonium::UI::NavGridMenu

Inherits:
Component::Base show all
Includes:
Phlex::Slotable
Defined in:
lib/plutonium/ui/nav_grid_menu.rb

Overview

A responsive grid-based navigation menu component that displays a collection of Item components in a dropdown format. The menu includes a trigger button with an icon and a dropdown panel containing a grid of navigation items.

Examples:

Basic usage

render Plutonium::UI:NavGridMenu.new(label: "Resources", icon: Phlex::TablerIcons::Grid) do |menu|
  menu.with_item(name: "Dashboard", icon: Phlex::TablerIcons::Dashboard, href: "/dashboard")
  menu.with_item(name: "Settings", icon: Phlex::TablerIcons::Settings, href: "/settings")
end

Defined Under Namespace

Classes: Item

Instance Method Summary collapse

Methods included from Component::Behaviour

#around_template

Methods included from Component::Tokens

#classes, #tokens

Methods included from Component::Kit

#BuildActionButton, #BuildBlock, #BuildBreadcrumbs, #BuildColorModeSelector, #BuildDynaFrameContent, #BuildDynaFrameHost, #BuildEmptyCard, #BuildFrameNavigatorPanel, #BuildPageHeader, #BuildPanel, #BuildSkeletonTable, #BuildTabList, #BuildTableInfo, #BuildTablePagination, #BuildTableScopesBar, #BuildTableSearchBar, #method_missing, #respond_to_missing?

Constructor Details

#initialize(label:, icon:) ⇒ NavGridMenu 



52
53
54
55
 
# File 'lib/plutonium/ui/nav_grid_menu.rb', line 52

def initialize(label:, icon:)
  @label = label
  @icon = icon
end

Dynamic Method Handling

This class handles dynamic methods through the method_missing method in the class Plutonium::UI::Component::Kit

Instance Method Details

#item { ... } ⇒ Object

Renders a Item component

Yields:

  • The block containing the menu item content



50
 
# File 'lib/plutonium/ui/nav_grid_menu.rb', line 50

slot :item, Item, collection: true

#view_template ⇒ Object 



57
58
59
60
61
62
 
# File 'lib/plutonium/ui/nav_grid_menu.rb', line 57

def view_template
  div(data: {controller: "resource-drop-down"}) do
    render_trigger_button
    render_dropdown_menu
  end
end