Class: PhlexKit::NavigationMenu

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

Overview

Site navigation with hoverable panels, ported from shadcn/ui's NavigationMenu. Shares the phlex-kit--menubar controller in hover-open mode (data-hover-open). Compose NavigationMenu > NavigationMenuList > NavigationMenuItem > (NavigationMenuTrigger + NavigationMenuContent | NavigationMenuLink). .pk-navigation-menu* (navigation_menu.css).

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(**attrs) ⇒ NavigationMenu

Returns a new instance of NavigationMenu.



8
9
10
 
# File 'app/components/phlex_kit/navigation_menu/navigation_menu.rb', line 8

def initialize(**attrs)
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
# File 'app/components/phlex_kit/navigation_menu/navigation_menu.rb', line 12

def view_template(&)
  nav(**mix({
    class: "pk-navigation-menu",
    data: {
      controller: "phlex-kit--menubar",
      hover_open: true,
      # onKeydown (not keydown.esc->close): the shared handler drives
      # arrow-key navigation over the panels AND closes on Escape with
      # focus returned to the trigger (bare #close as an action received
      # the event as `opts`, so refocus never happened — focus fell to
      # <body> when the panel hid).
      # mouseenter->cancelClose: re-entering the nav over list padding /
      # whitespace must cancel the pending mouseleave grace-close (only
      # trigger/panel mouseenter did before).
      # focusout->onFocusout: a keyboard user tabbing past the panel's
      # last link must close it (menubar wires the same handler; closeSoon
      # is pointer-only and never fires for this path).
      action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown focusout->phlex-kit--menubar#onFocusout mouseleave->phlex-kit--menubar#closeSoon mouseenter->phlex-kit--menubar#cancelClose"
    }
  }, @attrs), &)
end