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.

Defined Under Namespace

Modules: Daisy

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

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(**kws) ⇒ DrawerComponent

Creates a new Drawer component.

Parameters:

  • kws (Hash) —

    Keyword arguments for customizing the drawer.

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-[100] to control stacking order


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

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.



100
101
102
 
# File 'app/components/daisy/layout/drawer_component.rb', line 100

def id
  @id
end

Instance Method Details

#before_render ⇒ Object

Sets up the various parts of the component.



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

def before_render
  setup_component
  setup_input
  setup_content_wrapper
  setup_overlay
end

#setup_component ⇒ Object

Adds the drawer class to the component itself.



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

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

#setup_content_wrapper ⇒ Object

Adds the drawer-content class to the content wrapper.



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

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

#setup_input ⇒ Object

Sets up the input checkbox that toggles the sidebar.



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

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.



158
159
160
161
162
163
 
# File 'app/components/daisy/layout/drawer_component.rb', line 158

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