Class: BetterUi::Drawer::LayoutComponent

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

Overview

A responsive layout component that composes header and sidebar with mobile drawer support.

This component provides a complete page layout with a sticky header, responsive sidebar, and main content area. On mobile, the sidebar becomes a slide-out drawer that can be toggled via a menu button.

Examples:

Basic layout

<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
  <% layout.with_header(sticky: true) do |header| %>
    <% header.with_logo { "Logo" } %>
    <% header.with_mobile_menu_button { "☰" } %>
  <% end %>
  <% layout.with_sidebar do |sidebar| %>
    <% sidebar.with_navigation { render "nav" } %>
  <% end %>
  <% layout.with_main do %>
    Main content here
  <% end %>
<% end %>

Right-positioned sidebar

<%= render BetterUi::Drawer::LayoutComponent.new(sidebar_position: :right) do |layout| %>
  <% layout.with_sidebar(position: :right) do |sidebar| %>
    <% sidebar.with_navigation { "Nav" } %>
  <% end %>
  <% layout.with_main { "Content" } %>
<% end %>

Constant Summary collapse

BREAKPOINTS =

Breakpoint configurations for desktop mode

{
  md: "md:flex",
  lg: "lg:flex",
  xl: "xl:flex"
}.freeze
POSITIONS =

Position configurations

%i[left right].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 Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(sidebar_position: :left, sidebar_breakpoint: :lg, container_classes: nil, main_classes: nil, **options) ⇒ LayoutComponent

Initializes a new layout component.

Parameters:

  • sidebar_position (Symbol) (defaults to: :left) —

    the sidebar position (:left, :right), defaults to :left

  • sidebar_breakpoint (Symbol) (defaults to: :lg) —

    the breakpoint for desktop sidebar (:md, :lg, :xl), defaults to :lg

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

    additional CSS classes for the outer container

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

    additional CSS classes for the main content area

  • options (Hash) —

    additional HTML attributes passed to the layout element

Raises:

  • (ArgumentError) —

    if sidebar_position is not one of the allowed values

  • (ArgumentError) —

    if sidebar_breakpoint is not one of the allowed values



70
71
72
73
74
75
76
77
78
79
80
81
82
 
# File 'app/components/better_ui/drawer/layout_component.rb', line 70

def initialize(
  sidebar_position: :left,
  sidebar_breakpoint: :lg,
  container_classes: nil,
  main_classes: nil,
  **options
)
  @sidebar_position = validate_position(sidebar_position)
  @sidebar_breakpoint = validate_breakpoint(sidebar_breakpoint)
  @container_classes = container_classes
  @main_classes = main_classes
  @options = options
end

Instance Attribute Details

Returns the sidebar breakpoint.

Returns:

  • (Symbol) —

    the breakpoint (:md, :lg, or :xl)



92
93
94
 
# File 'app/components/better_ui/drawer/layout_component.rb', line 92

def sidebar_breakpoint
  @sidebar_breakpoint
end

#sidebar_position ⇒ Symbol (readonly)

Returns the sidebar position.

Returns:

  • (Symbol) —

    the position (:left or :right)



87
88
89
 
# File 'app/components/better_ui/drawer/layout_component.rb', line 87

def sidebar_position
  @sidebar_position
end

Instance Method Details

#with_header {|header| ... } ⇒ Object

Slot for rendering the HeaderComponent.

Yield Parameters:

Yield Returns:

  • (String) —

    the HTML content for the header



47
 
# File 'app/components/better_ui/drawer/layout_component.rb', line 47

renders_one :header, HeaderComponent

#with_main ⇒ Object

Slot for rendering the main content area.

Yield Returns:

  • (String) —

    the HTML content for the main area



58
 
# File 'app/components/better_ui/drawer/layout_component.rb', line 58

renders_one :main

#with_sidebar {|sidebar| ... } ⇒ Object

Slot for rendering the SidebarComponent.

Yield Parameters:

Yield Returns:

  • (String) —

    the HTML content for the sidebar



53
 
# File 'app/components/better_ui/drawer/layout_component.rb', line 53

renders_one :sidebar, SidebarComponent