Responsive Sidebar Drawer Component

Info Generate Packages

This code defines a DrawerComponent class that inherits from ApplicationComponent. The class contains a method named `template` which constructs a drawer-style navigation component using HTML elements. This drawer component features a checkbox used as a toggle to open and close the drawer, with a button labeled 'Open drawer' that interacts with the checkbox to control the visibility of the drawer. The drawer contains a sidebar with a close overlay and a list of menu items. This implementation likely utilizes a CSS or JS library to manage the drawer's open and close state based on the checkbox's checked property. The drawer is styled using classes likely from a CSS framework, such as Tailwind CSS, indicated by class names like 'btn', 'drawer-overlay', and 'bg-base-200'. The navigation items within the drawer are minimal, demonstrating the potential for extension with more complex or additional content.

# frozen_string_literal: true

class DrawerComponent < ApplicationComponent
  def template
    div(class: "drawer") do
      input(id: "my-drawer", type: "checkbox", class: "drawer-toggle")
      div(class: "drawer-content") do
        label(for: "my-drawer", class: "btn btn-primary drawer-button") { "Open drawer" }
      end
      div(class: "drawer-side") do
        label(for: "my-drawer", aria_label: "close sidebar", class: "drawer-overlay")
        ul(class: "menu p-4 w-80 min-h-full bg-base-200 text-base-content") do
          li { a { "Sidebar Item 1" } }
          li { a { "Sidebar Item 2" } }
        end
      end
    end
  end
end

Try a prompt