Class: Plutonium::UI::Layout::Topbar

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

Overview

A sticky 48px topbar with breadcrumbs (left), search (center), and actions (right). Pairs with IconRail — offset by ‘lg:left-14` on desktop to clear the rail. The brand mark lives in IconRail’s ‘with_brand` slot, not here.

Examples:

render Topbar.new do |bar|
  bar.with_breadcrumbs { render BreadcrumbComponent.new }
  bar.with_search      { render SearchComponent.new }
  bar.with_action      { render UserMenuComponent.new }
end

Instance Method Summary collapse

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

Collection slot for icon buttons / dropdowns rendered on the right.



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

slot :action, collection: true

#breadcrumbs ⇒ Object

Slot for breadcrumb navigation rendered on the left.



24
 
# File 'lib/plutonium/ui/layout/topbar.rb', line 24

slot :breadcrumbs

#search ⇒ Object

Slot for a search widget rendered in the center (max-w-).



28
 
# File 'lib/plutonium/ui/layout/topbar.rb', line 28

slot :search

#view_template ⇒ Object 



34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
# File 'lib/plutonium/ui/layout/topbar.rb', line 34

def view_template
  nav(
    class: "fixed top-0 right-0 left-0 lg:left-14 z-30 h-12 " \
           "bg-[var(--pu-surface)] border-b border-[var(--pu-border)] " \
           "flex items-center gap-3 px-4",
    data: {
      controller: "resource-header",
      resource_header_sidebar_outlet: "#sidebar-navigation"
    }
  ) do
    render_hamburger
    render_breadcrumbs_section
    render_search_section
    render_actions_section
  end
end