Class: Daisy::Layout::DrawerComponent

Inherits:
LocoMotion::BaseComponent show all
Defined in:
app/components/daisy/layout/drawer_component.rb

Overview

The DrawerComponent provides a sliding sidebar panel that can be toggled open and closed. It’s commonly used for:

  • Navigation menus

  • Filter panels

  • Additional information panels

  • Mobile-friendly navigation

The drawer includes an overlay that covers the main content when open and can be configured to slide in from either the left or right side.

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary collapse

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Constructor Details

#initialize(**kws) ⇒ DrawerComponent

Creates a new Drawer component.

Options Hash (**kws):

  • id (String) —

    The ID of the drawer. Defaults to a random UUID. This is used to connect the toggle button with the drawer.

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Position: ‘drawer-end` to slide from right instead of left

    • Responsive: ‘lg:drawer-open` to keep drawer open on large screens

    • Z-index: ‘z-` to control stacking order



108
109
110
111
112
 
# File 'app/components/daisy/layout/drawer_component.rb', line 108

def initialize(**kws)
  super

  @id = config_option(:id, SecureRandom.uuid)
end

Instance Attribute Details

#id ⇒ Object (readonly)

The ID of the drawer. Can be passed in as a configuration option, but defaults to a random UUID.



92
93
94
 
# File 'app/components/daisy/layout/drawer_component.rb', line 92

def id
  @id
end

Instance Method Details

#before_render ⇒ Object

Sets up the various parts of the component.



117
118
119
120
121
122
 
# File 'app/components/daisy/layout/drawer_component.rb', line 117

def before_render
  setup_component
  setup_input
  setup_content_wrapper
  setup_overlay
end

#setup_component ⇒ Object

Adds the ‘drawer` class to the component itself.



127
128
129
 
# File 'app/components/daisy/layout/drawer_component.rb', line 127

def setup_component
  add_css(:component, "drawer")
end

#setup_content_wrapper ⇒ Object

Adds the ‘drawer-content` class to the content wrapper.



143
144
145
 
# File 'app/components/daisy/layout/drawer_component.rb', line 143

def setup_content_wrapper
  add_css(:content_wrapper, "drawer-content")
end

#setup_input ⇒ Object

Sets up the input checkbox that toggles the sidebar.



134
135
136
137
138
 
# File 'app/components/daisy/layout/drawer_component.rb', line 134

def setup_input
  set_tag_name(:input, :input)
  add_css(:input, "drawer-toggle")
  add_html(:input, { type: "checkbox", id: @id })
end

#setup_overlay ⇒ Object

Sets up the overlay that covers the page when the sidebar is open.



150
151
152
153
154
 
# File 'app/components/daisy/layout/drawer_component.rb', line 150

def setup_overlay
  set_tag_name(:overlay, :label)
  add_css(:overlay, "drawer-overlay")
  add_html(:overlay, { for: @id, "aria-label": "close sidebar" })
end