Class: PhlexKit::SidebarWrapper

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/sidebar/sidebar_wrapper.rb

Overview

The page-level flex row that holds a PhlexKit::Sidebar + a PhlexKit::SidebarInset.

collapsible: (shadcn/ui's Sidebar collapsible prop, held here because the wrapper is the Stimulus scope shared by rail, trigger and scrim):

:none      — static rail (default).
:offcanvas — the rail hides/reveals via a PhlexKit::SidebarTrigger. On
           desktop it slides out of the layout; below 768px it overlays
           as a fixed drawer behind a click-to-close scrim, closed by
           Escape and before Turbo caches the page.
:icon      — like :offcanvas, but on desktop the rail collapses to a
           3rem icon strip instead of leaving: labels hide, menu
           buttons become icon squares (add `tooltip:` to
           SidebarMenuButton for hover labels), groups/badges/subs
           disappear. Mobile behaves like :offcanvas.

State is DOM-only: data-collapsed (desktop) / data-open (mobile drawer). ⌘B/Ctrl+B toggles. The desktop state persists in a pk_sidebar_state cookie ("collapsed"/"expanded") — pass default_collapsed: cookies[:pk_sidebar_state] == "collapsed" from the host layout to render the collapsed rail server-side with no flash. Add a PhlexKit::SidebarRail inside the Sidebar for the edge grab-strip. See sidebar.rb.

Constant Summary collapse

COLLAPSIBLE = 
{ none: nil, offcanvas: "collapsible-offcanvas", icon: "collapsible-icon" }.freeze

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(collapsible: :none, default_collapsed: false, **attrs) ⇒ SidebarWrapper

Returns a new instance of SidebarWrapper.



27
28
29
30
31
 
# File 'app/components/phlex_kit/sidebar/sidebar_wrapper.rb', line 27

def initialize(collapsible: :none, default_collapsed: false, **attrs)
  @collapsible = collapsible.to_sym
  @default_collapsed = default_collapsed
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
# File 'app/components/phlex_kit/sidebar/sidebar_wrapper.rb', line 33

def view_template(&block)
  unless collapsible?
    return div(**mix({ class: classes }, @attrs), &block)
  end

  base = {
    class: classes,
    data: {
      controller: "phlex-kit--sidebar",
      action: "keydown.esc@window->phlex-kit--sidebar#closeMobile " \
              "keydown.meta+b@window->phlex-kit--sidebar#toggle:prevent " \
              "keydown.ctrl+b@window->phlex-kit--sidebar#toggle:prevent " \
              "turbo:before-cache@window->phlex-kit--sidebar#closeMobile"
    }
  }
  base["data-collapsed"] = "" if @default_collapsed

  div(**mix(base, @attrs)) do
    yield if block
    button(type: :button, class: "pk-sidebar-scrim", aria_label: "Close sidebar",
           tabindex: "-1", data: { action: "click->phlex-kit--sidebar#closeMobile" })
  end
end