Class: Plutonium::UI::Layout::Header

Inherits:
Base show all
Includes:
Phlex::Rails::Helpers::Routes, Phlex::Slotable
Defined in:
lib/plutonium/ui/layout/header.rb

Overview

A flexible, responsive header component that can include brand information, navigation elements, and custom actions.

Examples:

Basic usage with brand name

Header.new do |header|
  header.with_brand_name { "My App" }
end

With brand logo and actions

Header.new do |header|
  header. { image_tag("logo.svg") }
  header.with_action { button "Settings" }
end

Instance Method Summary collapse

Methods included from Helpers::AssetsHelper

#resource_favicon_asset, #resource_favicon_tag, #resource_logo_asset, #resource_logo_tag, #resource_script_asset, #resource_script_tag, #resource_stylesheet_asset, #resource_stylesheet_tag

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?

Dynamic Method Handling

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

Instance Method Details

#action { ... } ⇒ Object

Defines multiple slots for header actions (e.g., buttons, dropdowns)

Yields:

  • The block containing each action’s content



37
 
# File 'lib/plutonium/ui/layout/header.rb', line 37

slot :action, collection: true

#brand_logo { ... } ⇒ Object

Defines the slot for the brand logo content

Yields:

  • The block containing the brand logo content



32
 
# File 'lib/plutonium/ui/layout/header.rb', line 32

slot :brand_logo

#brand_name { ... } ⇒ Object

Defines the slot for the brand name content

Yields:

  • The block containing the brand name content



27
 
# File 'lib/plutonium/ui/layout/header.rb', line 27

slot :brand_name

#view_template ⇒ void

Note:

The header is fixed positioned and includes responsive design considerations

This method returns an undefined value.

Renders the header component with all its configured elements



42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
# File 'lib/plutonium/ui/layout/header.rb', line 42

def view_template
  nav(
    class: "bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50",
    data: {
      controller: "resource-header",
      resource_header_sidebar_outlet: "#sidebar-navigation"
    }
  ) do
    div(class: "flex flex-wrap justify-between items-center") do
      render_brand_section
      render_actions if action_slots?
    end
  end
end