Class: Plutonium::UI::Layout::Sidebar

Inherits:
Base show all
Defined in:
lib/plutonium/ui/layout/sidebar.rb

Overview

A classic sidebar navigation component that provides a wide, labelled navigation panel.

Examples:

Basic usage with navigation content

render Sidebar.new do
  render SidebarMenu.new(menu)
end

Instance Method Summary collapse

Methods included from Helpers::AssetsHelper

#resource_favicon_asset, #resource_favicon_tag, #resource_logo_asset, #resource_logo_tag, #resource_script_asset, #resource_script_tag, #resource_stylesheet_asset, #resource_stylesheet_tag

Methods included from Component::Behaviour

#around_template

Methods included from Component::Tokens

#classes, #tokens

Methods included from Component::Kit

#BuildActionButton, #BuildActionsDropdown, #BuildBlock, #BuildBreadcrumbs, #BuildBulkActionsToolbar, #BuildColorModeSelector, #BuildDynaFrameContent, #BuildDynaFrameHost, #BuildEmptyCard, #BuildFrameNavigatorPanel, #BuildModalCentered, #BuildModalSlideover, #BuildPageHeader, #BuildPanel, #BuildRowActionsDropdown, #BuildSkeletonTable, #BuildTabList, #BuildTableFilterPills, #BuildTableInfo, #BuildTablePagination, #BuildTableScopesBar, #BuildTableScopesPills, #BuildTableSearchBar, #BuildTableToolbar, #BuildTableViewSwitcher, #method_missing, #respond_to_missing?

Dynamic Method Handling

This class handles dynamic methods through the method_missing method in the class Plutonium::UI::Component::Kit

Instance Method Details

#view_template {|void| ... } ⇒ void

This method returns an undefined value.

Renders the sidebar navigation template

Yields:

  • (void) —

    The block containing sidebar content



16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
# File 'lib/plutonium/ui/layout/sidebar.rb', line 16

def view_template(&)
  aside(
    data: {controller: "sidebar"},
    id: "sidebar-navigation",
    aria: {label: "Sidebar Navigation"},
    class: "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0"
  ) do
    div(
      id: "sidebar-navigation-content",
      data: {turbo_permanent: true, sidebar_target: "scroll"},
      class: "overflow-y-auto py-5 px-3 h-full bg-[var(--pu-surface)] border-r border-[var(--pu-border)]",
      &
    )
  end
end