Class: BetterUi::Drawer::SidebarComponent

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

Overview

A flexible sidebar component for drawer layouts with support for header, navigation, and footer.

This component provides a responsive sidebar that can slide in from left or right on mobile, with configurable width and visual variants. It supports slots for header (logo/brand), main navigation, and footer sections.

Examples:

Basic sidebar

<%= render BetterUi::Drawer::SidebarComponent.new do |sidebar| %>
  <% sidebar.with_navigation do %>
    <nav>Navigation links</nav>
  <% end %>
<% end %>

Sidebar with all sections

<%= render BetterUi::Drawer::SidebarComponent.new(position: :left, width: :md) do |sidebar| %>
  <% sidebar.with_header { image_tag("logo.svg") } %>
  <% sidebar.with_navigation do %>
    <nav>Main navigation</nav>
  <% end %>
  <% sidebar.with_footer { "User info" } %>
<% end %>

Constant Summary collapse

WIDTHS =

Width configurations

{
  sm: "w-16",    # 64px - icon-only sidebar
  md: "w-64",    # 256px - standard sidebar
  lg: "w-80"     # 320px - wide sidebar
}.freeze
POSITIONS =

Position configurations

%i[left right].freeze
{
  light: {
    bg: "bg-white",
    border: "border-grayscale-200",
    text: "text-grayscale-900"
  },
  dark: {
    bg: "bg-grayscale-900",
    border: "border-grayscale-700",
    text: "text-white"
  },
  primary: {
    bg: "bg-primary-800",
    border: "border-primary-900",
    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 Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(variant: :light, position: :left, width: :md, collapsible: true, container_classes: nil, header_classes: nil, navigation_classes: nil, footer_classes: nil, **options) ⇒ SidebarComponent

Initializes a new sidebar component.

Parameters:

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

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

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

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

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

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

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

    whether sidebar can be collapsed (icon-only mode), defaults to true

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

    additional CSS classes for the container

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

    additional CSS classes for the header section

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

    additional CSS classes for the navigation section

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

    additional CSS classes for the footer section

  • options (Hash) —

    additional HTML attributes passed to the sidebar element

Raises:

  • (ArgumentError) —

    if variant is not one of the allowed values

  • (ArgumentError) —

    if position is not one of the allowed values

  • (ArgumentError) —

    if width is not one of the allowed values



86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# File 'app/components/better_ui/drawer/sidebar_component.rb', line 86

def initialize(
  variant: :light,
  position: :left,
  width: :md,
  collapsible: true,
  container_classes: nil,
  header_classes: nil,
  navigation_classes: nil,
  footer_classes: nil,
  **options
)
  @variant = validate_variant(variant)
  @position = validate_position(position)
  @width = validate_width(width)
  @collapsible = collapsible
  @container_classes = container_classes
  @header_classes = header_classes
  @navigation_classes = navigation_classes
  @footer_classes = footer_classes
  @options = options
end

Instance Attribute Details

#position ⇒ Symbol (readonly)

Returns the sidebar position.

Returns:

  • (Symbol) —

    the position (:left or :right)



111
112
113
 
# File 'app/components/better_ui/drawer/sidebar_component.rb', line 111

def position
  @position
end

Instance Method Details

Slot for rendering the sidebar footer section (user info, settings).

Yield Returns:

  • (String) —

    the HTML content for the footer



69
 
# File 'app/components/better_ui/drawer/sidebar_component.rb', line 69

renders_one :footer

#with_header ⇒ Object

Slot for rendering the sidebar header section (logo, brand).

Yield Returns:

  • (String) —

    the HTML content for the header



59
 
# File 'app/components/better_ui/drawer/sidebar_component.rb', line 59

renders_one :header

#with_navigation ⇒ Object

Slot for rendering the main navigation content.

Yield Returns:

  • (String) —

    the HTML content for navigation



64
 
# File 'app/components/better_ui/drawer/sidebar_component.rb', line 64

renders_one :navigation