Class: BetterUi::Drawer::HeaderComponent

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

Overview

A flexible header component for drawer layouts with support for logo, navigation, and actions.

This component provides a responsive header with slots for logo, navigation, actions, and mobile menu button. It supports sticky positioning and multiple visual variants.

Examples:

Basic header

<%= render BetterUi::Drawer::HeaderComponent.new do |header| %>
  <% header.with_logo { image_tag("logo.svg") } %>
  <% header.with_actions { "User Menu" } %>
<% end %>

Header with navigation

<%= render BetterUi::Drawer::HeaderComponent.new(sticky: true, variant: :light) do |header| %>
  <% header.with_logo { "Brand" } %>
  <% header.with_navigation do %>
    <nav>Navigation links</nav>
  <% end %>
  <% header.with_mobile_menu_button do %>
    <button>Menu</button>
  <% end %>
  <% header.with_actions { "Actions" } %>
<% end %>

Constant Summary collapse

HEIGHTS =

Height configurations

{
  sm: "h-12",
  md: "h-16",
  lg: "h-20"
}.freeze
HEADER_VARIANTS =

Visual variant configurations

{
  light: {
    bg: "bg-white",
    border: "border-b border-grayscale-200",
    text: "text-grayscale-900"
  },
  dark: {
    bg: "bg-grayscale-900",
    border: "border-b border-grayscale-700",
    text: "text-white"
  },
  transparent: {
    bg: "bg-transparent",
    border: "",
    text: "text-grayscale-900"
  },
  primary: {
    bg: "bg-primary-600",
    border: "border-b border-primary-700",
    text: "text-white"
  }
}.freeze

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, 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 Method Summary collapse

Constructor Details

#initialize(variant: :light, sticky: true, height: :md, container_classes: nil, **options) ⇒ HeaderComponent

Initializes a new header component.

Parameters:

  • variant (Symbol) (defaults to: :light) —

    the visual variant (:light, :dark, :transparent, :primary), defaults to :light

  • sticky (Boolean) (defaults to: true) —

    whether the header is sticky/fixed at top, defaults to true

  • height (Symbol) (defaults to: :md) —

    the height variant (:sm, :md, :lg), defaults to :md

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

    additional CSS classes for the container

  • options (Hash) —

    additional HTML attributes passed to the header element

Raises:

  • (ArgumentError) —

    if variant is not one of the allowed values

  • (ArgumentError) —

    if height is not one of the allowed values



92
93
94
95
96
97
98
99
100
101
102
103
104
 
# File 'app/components/better_ui/drawer/header_component.rb', line 92

def initialize(
  variant: :light,
  sticky: true,
  height: :md,
  container_classes: nil,
  **options
)
  @variant = validate_variant(variant)
  @sticky = sticky
  @height = validate_height(height)
  @container_classes = container_classes
  @options = options
end

Instance Method Details

#with_actions ⇒ Object

Slot for rendering actions section (right side). Typically contains user menu, notifications, etc.

Yield Returns:

  • (String) —

    the HTML content for actions



74
 
# File 'app/components/better_ui/drawer/header_component.rb', line 74

renders_one :actions

#with_logo ⇒ Object

Slot for rendering the logo/brand section (left side).

Yield Returns:

  • (String) —

    the HTML content for the logo



62
 
# File 'app/components/better_ui/drawer/header_component.rb', line 62

renders_one :logo

#with_mobile_menu_button ⇒ Object

Slot for rendering the mobile menu toggle button. Only visible on mobile screens.

Yield Returns:

  • (String) —

    the HTML content for the mobile menu button



80
 
# File 'app/components/better_ui/drawer/header_component.rb', line 80

renders_one :mobile_menu_button

#with_navigation ⇒ Object

Slot for rendering the main navigation (center or after logo). Hidden on mobile by default.

Yield Returns:

  • (String) —

    the HTML content for navigation



68
 
# File 'app/components/better_ui/drawer/header_component.rb', line 68

renders_one :navigation