Module: UI::NavigationMenuViewportBehavior

Defined in:
app/behaviors/ui/navigation_menu_viewport_behavior.rb

Overview

ViewportBehavior

Shared behavior for NavigationMenu Viewport component.

Instance Method Summary collapse

Instance Method Details

Returns combined CSS classes for the viewport



29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
# File 'app/behaviors/ui/navigation_menu_viewport_behavior.rb', line 29

def navigation_menu_viewport_classes
  classes_value = respond_to?(:classes, true) ? classes : @classes
  TailwindMerge::Merger.new.merge([
    # Base styles
    "origin-top-center bg-popover text-popover-foreground",
    "relative mt-1.5 overflow-hidden rounded-md border shadow",
    # Dynamic sizing via CSS variables
    "h-[var(--ui-navigation-menu-viewport-height)]",
    "w-full md:w-[var(--ui-navigation-menu-viewport-width)]",
    # State visibility
    "data-[state=closed]:invisible data-[state=open]:visible",
    "data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto",
    # Animation
    "transition-[width,height] duration-200",
    "data-[state=open]:animate-in data-[state=closed]:animate-out",
    "data-[state=closed]:fade-out data-[state=open]:fade-in",
    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
    classes_value
  ].compact.join(" "))
end

#navigation_menu_viewport_data_attributes ⇒ Object

Returns data attributes



51
52
53
54
55
56
57
58
59
 
# File 'app/behaviors/ui/navigation_menu_viewport_behavior.rb', line 51

def navigation_menu_viewport_data_attributes
  attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
  base_data = {
    slot: "navigation-menu-viewport",
    state: "closed",
    "ui--navigation-menu-target": "viewport"
  }
  (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
end

#navigation_menu_viewport_html_attributes ⇒ Object

Returns HTML attributes for the viewport



21
22
23
24
25
26
 
# File 'app/behaviors/ui/navigation_menu_viewport_behavior.rb', line 21

def navigation_menu_viewport_html_attributes
  {
    class: navigation_menu_viewport_classes,
    data: navigation_menu_viewport_data_attributes
  }
end

#navigation_menu_viewport_wrapper_classes ⇒ Object

Returns CSS classes for the viewport wrapper



16
17
18
 
# File 'app/behaviors/ui/navigation_menu_viewport_behavior.rb', line 16

def navigation_menu_viewport_wrapper_classes
  "absolute left-0 top-full flex justify-center perspective-[2000px]"
end

#navigation_menu_viewport_wrapper_html_attributes ⇒ Object

Returns HTML attributes for the viewport wrapper



8
9
10
11
12
13
 
# File 'app/behaviors/ui/navigation_menu_viewport_behavior.rb', line 8

def navigation_menu_viewport_wrapper_html_attributes
  {
    class: navigation_menu_viewport_wrapper_classes,
    data: {slot: "navigation-menu-viewport-wrapper"}
  }
end