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, #BuildActionsDropdown, #BuildBlock, #BuildBreadcrumbs, #BuildBulkActionsToolbar, #BuildColorModeSelector, #BuildDynaFrameContent, #BuildDynaFrameHost, #BuildEmptyCard, #BuildFrameNavigatorPanel, #BuildModalCentered, #BuildModalSlideover, #BuildPageHeader, #BuildPanel, #BuildRowActionsDropdown, #BuildSkeletonTable, #BuildTabList, #BuildTableFilterPills, #BuildTableInfo, #BuildTablePagination, #BuildTableScopesBar, #BuildTableScopesPills, #BuildTableSearchBar, #BuildTableToolbar, #BuildTableViewSwitcher, #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

This method returns an undefined value.

Renders the classic full-width header.



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

def view_template
  nav(
    class: "bg-[var(--pu-surface)] border-b border-[var(--pu-border)] px-4 py-2.5 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