Class: Plutonium::UI::SidebarMenu::Theme

Inherits:
Theme
  • Object
show all
Defined in:
lib/plutonium/ui/sidebar_menu.rb

Class Method Summary collapse

Class Method Details

.theme ⇒ Object 



13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
# File 'lib/plutonium/ui/sidebar_menu.rb', line 13

def self.theme
  super.merge({
    # Base container styles
    nav: "space-y-2 pb-6 mb-6",
    items_container: "space-y-2",

    # Item wrapper styles
    item_wrapper: "w-full transition-colors duration-200 ease-in-out",
    item_parent: nil,

    # Link and button base styles
    item_link: "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group",
    item_span: "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",

    # Label and content styles
    item_label: ->(depth) { "flex-1 #{(depth > 0) ? "ml-9" : "ml-3"} text-left whitespace-nowrap" },

    # Badge styles
    leading_badge: "inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800",
    trailing_badge: "inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300",

    # Icon styles
    icon_wrapper: "shrink-0 w-6 h-6 flex items-center justify-center",
    icon: "text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white",

    # Collapse icon styles
    collapse_icon: "w-6 h-6 ml-auto transition-transform duration-200",
    collapse_icon_expanded: "transform rotate-180",

    # Submenu styles
    sub_items_container: "hidden py-2 space-y-2",

    # Due to how we use turbo frames, we can't set active states
    active: nil
  })
end