From 76af8c74fedd85c286fcecf4d5b3ea9dd07be24e Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 20:34:41 -0300 Subject: [PATCH 01/29] Setup sidebar --- lib/ruby_ui/sidebar/collapsiable_sidebar.rb | 80 +++++++++++++++++++ lib/ruby_ui/sidebar/mobile_sidebar.rb | 18 +++++ .../sidebar/non_collapsible_sidebar.rb | 17 ++++ lib/ruby_ui/sidebar/sidebar.rb | 61 ++++++++++++++ lib/ruby_ui/sidebar/sidebar_content.rb | 20 +++++ 5 files changed, 196 insertions(+) create mode 100644 lib/ruby_ui/sidebar/collapsiable_sidebar.rb create mode 100644 lib/ruby_ui/sidebar/mobile_sidebar.rb create mode 100644 lib/ruby_ui/sidebar/non_collapsible_sidebar.rb create mode 100644 lib/ruby_ui/sidebar/sidebar.rb create mode 100644 lib/ruby_ui/sidebar/sidebar_content.rb diff --git a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb new file mode 100644 index 00000000..b65ce1f0 --- /dev/null +++ b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb @@ -0,0 +1,80 @@ +# frozen_string_literal: true + +module RubyUI + class CollapsiableSidebar < Base + def initialize(side: :left, variant: :sidebar, **attrs) + @side = side + @variant = variant + super(**attrs) + end + + def view_template(&) + div(**attrs) do + div(**gap_element_attrs) + div(**content_wrapper_attrs) do + div(**content_attrs, &) + end + end + end + + private + + def default_attrs + { + class: "peer hidden text-sidebar-foreground md:block" + } + end + + def gap_element_attrs + { + class: [ + "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear", + "group-data-[collapsible=offcanvas]:w-0", + "group-data-[side=right]:rotate-180", + variant_classes + ] + } + end + + def content_wrapper_attrs + { + class: [ + "absolute inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex", + content_wrapper_side_classes, + content_wrapper_variant_classes, + ] + } + end + + def content_attrs + { + class: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow", + data: { + sidebar: "sidebar" + } + } + end + + def variant_classes + if %i[floating inset].include?(@variant) + "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" + else + "group-data-[collapsible=icon]:w-[--sidebar-width-icon]" + end + end + + def content_wrapper_side_classes + return "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" if @side == :left + + "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]" + end + + def content_wrapper_variant_classes + if %i[floating inset].include?(@variant) + "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" + else + "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l" + end + end + end +end diff --git a/lib/ruby_ui/sidebar/mobile_sidebar.rb b/lib/ruby_ui/sidebar/mobile_sidebar.rb new file mode 100644 index 00000000..0995424a --- /dev/null +++ b/lib/ruby_ui/sidebar/mobile_sidebar.rb @@ -0,0 +1,18 @@ +# frozen_string_literal: true + +module RubyUI + class MobileSidebar < Base + def view_template(&) + div(**attrs) do + "teste" + end + end + + private + + def default_attrs + { + } + end + end +end diff --git a/lib/ruby_ui/sidebar/non_collapsible_sidebar.rb b/lib/ruby_ui/sidebar/non_collapsible_sidebar.rb new file mode 100644 index 00000000..6d08e3f4 --- /dev/null +++ b/lib/ruby_ui/sidebar/non_collapsible_sidebar.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +module RubyUI + class NonCollpapsibleSidebar < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground" + } + end + end +end diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb new file mode 100644 index 00000000..423ff0a2 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -0,0 +1,61 @@ +# frozen_string_literal: true + +# "--sidebar-width": SIDEBAR_WIDTH, +# "--sidebar-width-icon": SIDEBAR_WIDTH_ICON, + +# TODO: Add keyboard events +# TODO: Open only mobile or normal sidebar +# TODO: state => expanded, collapsed +# TODO: cache + +# const MOBILE_BREAKPOINT = 768 + +module RubyUI + class Sidebar < Base + SIDEBAR_WIDTH = "16rem" + SIDEBAR_WIDTH_ICON = "3rem" + + SIDES = %i[ left right ].freeze + VARIANTS = %i[ sidebar floating inset ].freeze + COLLAPSIBLES = %i[ offcanvas icon none ].freeze + + + def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, mobile: false, **attrs) + raise ArgumentError, "Invalid side: #{side}. Must be one of #{SIDES}." unless SIDES.include?(side) + raise ArgumentError, "Invalid variant: #{variant}. Must be one of #{VARIANTS}." unless VARIANTS.include?(variant) + raise ArgumentError, "Invalid collapsible: #{collapsible}. Must be one of #{COLLAPSIBLES}." unless COLLAPSIBLES.include?(collapsible) + + @side = side + @variant = variant + @collapsible = collapsible + @mobile = mobile + super(**attrs) + end + + def view_template(&) + div(**attrs) do + if @collapsible == :none + NonCollapsiableSidebar(&) + else + MobileSidebar(&) + CollapsiableSidebar(&) + end + end + end + + private + + def default_attrs + { + class: "group flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", + style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};", + data: { + state: "expanded", + collapsible: @collapsible, + variant: @variant, + side: @side + } + } + end + end +end diff --git a/lib/ruby_ui/sidebar/sidebar_content.rb b/lib/ruby_ui/sidebar/sidebar_content.rb new file mode 100644 index 00000000..0874ce71 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_content.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarContent < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", + data: { + sidebar: "content" + } + } + end + end +end From 8e235d52c8317cd552da6d0ab3bd7ca3fd6b4404 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 20:35:34 -0300 Subject: [PATCH 02/29] Add the sidebar group component --- lib/ruby_ui/sidebar/sidebar_group.rb | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_group.rb diff --git a/lib/ruby_ui/sidebar/sidebar_group.rb b/lib/ruby_ui/sidebar/sidebar_group.rb new file mode 100644 index 00000000..54e71ece --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_group.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarGroup < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: "relative flex w-full min-w-0 flex-col p-2", + data: { + sidebar: "group" + } + } + end + end +end From acddae596b257c0f6767c8fadc00f70a0b7b763e Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 20:42:43 -0300 Subject: [PATCH 03/29] Add sidebar group label --- lib/ruby_ui/sidebar/sidebar_group_label.rb | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_group_label.rb diff --git a/lib/ruby_ui/sidebar/sidebar_group_label.rb b/lib/ruby_ui/sidebar/sidebar_group_label.rb new file mode 100644 index 00000000..6f6647c7 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_group_label.rb @@ -0,0 +1,26 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarGroupLabel < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: [ + "flex h-8 shrink-0 items-center rounded-md px-2 text-xs", + "font-medium text-sidebar-foreground/70 outline-none", + "ring-sidebar-ring transition-[margin,opacity] duration-200", + "ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", + "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", + ], + data: { + sidebar: "group-label" + } + } + end + end +end From f07ff5cad9158ca722e2f3016719dc89fac136ed Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 20:46:30 -0300 Subject: [PATCH 04/29] Add the sidebar group content componeent --- lib/ruby_ui/sidebar/sidebar_group_content.rb | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_group_content.rb diff --git a/lib/ruby_ui/sidebar/sidebar_group_content.rb b/lib/ruby_ui/sidebar/sidebar_group_content.rb new file mode 100644 index 00000000..d4c8de7c --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_group_content.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarGroupContent < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: "w-full text-sm", + data: { + sidebar: "group-content" + } + } + end + end +end From 2ab11804e181ea2ed31ee933a7c295dd46e8f795 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 20:48:54 -0300 Subject: [PATCH 05/29] add sidebar menu --- lib/ruby_ui/sidebar/sidebar_menu.rb | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu.rb b/lib/ruby_ui/sidebar/sidebar_menu.rb new file mode 100644 index 00000000..959db3ef --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenu < Base + def view_template(&) + ul(**attrs, &) + end + + private + + def default_attrs + { + class: "flex w-full min-w-0 flex-col gap-1", + data: { + sidebar: "menu" + } + } + end + end +end From 80c649c0d2b172466d727626c7b39795f53fe5b2 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 20:53:11 -0300 Subject: [PATCH 06/29] add sidebar menu item --- lib/ruby_ui/sidebar/sidebar_menu_item.rb | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_item.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu_item.rb b/lib/ruby_ui/sidebar/sidebar_menu_item.rb new file mode 100644 index 00000000..4412c738 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_item.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuItem < Base + def view_template(&) + ul(**attrs, &) + end + + private + + def default_attrs + { + class: "group/menu-item relative", + data: { + sidebar: "menu-item" + } + } + end + end +end From f2b2fc12224ecbacfed24b1788ce38336b83102c Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 21:19:02 -0300 Subject: [PATCH 07/29] rename group --- lib/ruby_ui/sidebar/collapsiable_sidebar.rb | 18 +++++++++--------- lib/ruby_ui/sidebar/sidebar.rb | 2 +- lib/ruby_ui/sidebar/sidebar_content.rb | 2 +- lib/ruby_ui/sidebar/sidebar_group_label.rb | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb index b65ce1f0..8707b9ff 100644 --- a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb +++ b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb @@ -29,8 +29,8 @@ def gap_element_attrs { class: [ "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear", - "group-data-[collapsible=offcanvas]:w-0", - "group-data-[side=right]:rotate-180", + "group-data-[collapsible=offcanvas]/sidebar-wrapper:w-0", + "group-data-[side=right]/sidebar-wrapper:rotate-180", variant_classes ] } @@ -48,7 +48,7 @@ def content_wrapper_attrs def content_attrs { - class: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow", + class: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]/sidebar-wrapper:rounded-lg group-data-[variant=floating]/sidebar-wrapper:border group-data-[variant=floating]/sidebar-wrapper:border-sidebar-border group-data-[variant=floating]/sidebar-wrapper:shadow", data: { sidebar: "sidebar" } @@ -57,23 +57,23 @@ def content_attrs def variant_classes if %i[floating inset].include?(@variant) - "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" + "group-data-[collapsible=icon]/sidebar-wrapper:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" else - "group-data-[collapsible=icon]:w-[--sidebar-width-icon]" + "group-data-[collapsible=icon]/sidebar-wrapper:w-[--sidebar-width-icon]" end end def content_wrapper_side_classes - return "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" if @side == :left + return "left-0 group-data-[collapsible=offcanvas]/sidebar-wrapper:left-[calc(var(--sidebar-width)*-1)]" if @side == :left - "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]" + "right-0 group-data-[collapsible=offcanvas]/sidebar-wrapper:right-[calc(var(--sidebar-width)*-1)]" end def content_wrapper_variant_classes if %i[floating inset].include?(@variant) - "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" + "p-2 group-data-[collapsible=icon]/sidebar-wrapper:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" else - "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l" + "group-data-[collapsible=icon]/sidebar-wrapper:w-[--sidebar-width-icon] group-data-[side=left]/sidebar-wrapper:border-r group-data-[side=right]/sidebar-wrapper:border-l" end end end diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb index 423ff0a2..3076fa8a 100644 --- a/lib/ruby_ui/sidebar/sidebar.rb +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -47,7 +47,7 @@ def view_template(&) def default_attrs { - class: "group flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", + class: "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};", data: { state: "expanded", diff --git a/lib/ruby_ui/sidebar/sidebar_content.rb b/lib/ruby_ui/sidebar/sidebar_content.rb index 0874ce71..215e3707 100644 --- a/lib/ruby_ui/sidebar/sidebar_content.rb +++ b/lib/ruby_ui/sidebar/sidebar_content.rb @@ -10,7 +10,7 @@ def view_template(&) def default_attrs { - class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", + class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]/sidebar-wrapper:overflow-hidden", data: { sidebar: "content" } diff --git a/lib/ruby_ui/sidebar/sidebar_group_label.rb b/lib/ruby_ui/sidebar/sidebar_group_label.rb index 6f6647c7..65ed38e4 100644 --- a/lib/ruby_ui/sidebar/sidebar_group_label.rb +++ b/lib/ruby_ui/sidebar/sidebar_group_label.rb @@ -15,7 +15,7 @@ def default_attrs "font-medium text-sidebar-foreground/70 outline-none", "ring-sidebar-ring transition-[margin,opacity] duration-200", "ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", - "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", + "group-data-[collapsible=icon]/sidebar-wrapper:-mt-8 group-data-[collapsible=icon]/sidebar-wrapper:opacity-0", ], data: { sidebar: "group-label" From 18e4cff1ac3c89649920dc7e39fa0e1ae7ffb391 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 21:54:57 -0300 Subject: [PATCH 08/29] add sidebar submenu item --- lib/ruby_ui/sidebar/mobile_sidebar.rb | 4 +- lib/ruby_ui/sidebar/sidebar_menu_button.rb | 47 ++++++++++++++++++++++ 2 files changed, 48 insertions(+), 3 deletions(-) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_button.rb diff --git a/lib/ruby_ui/sidebar/mobile_sidebar.rb b/lib/ruby_ui/sidebar/mobile_sidebar.rb index 0995424a..3bcbd730 100644 --- a/lib/ruby_ui/sidebar/mobile_sidebar.rb +++ b/lib/ruby_ui/sidebar/mobile_sidebar.rb @@ -4,15 +4,13 @@ module RubyUI class MobileSidebar < Base def view_template(&) div(**attrs) do - "teste" end end private def default_attrs - { - } + {} end end end diff --git a/lib/ruby_ui/sidebar/sidebar_menu_button.rb b/lib/ruby_ui/sidebar/sidebar_menu_button.rb new file mode 100644 index 00000000..eb91cf53 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_button.rb @@ -0,0 +1,47 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuButton < Base + VARIANT_CLASSES = { + default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", + outline: + "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", + }.freeze + + SIZE_CLASSES = { + default: "h-8 text-sm", + sm: "h-7 text-xs", + lg: "h-12 text-sm group-data-[collapsible=icon]/sidebar-wrapper:!p-0", + }.freeze + + def initialize(as: "button", variant: :default, size: :default, active: false, **attrs) + raise ArgumentError, "Invalid variant: #{variant}" unless VARIANT_CLASSES.key?(variant) + raise ArgumentError, "Invalid size: #{size}" unless SIZE_CLASSES.key?(size) + + @active = active + @as = as + super(**attrs) + end + + def view_template(&) + public_send(@as, **attrs, &) + end + + private + + def default_attrs + { + class: [ + "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]/sidebar-wrapper:!size-8 group-data-[collapsible=icon]/sidebar-wrapper:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + VARIANT_CLASSES[@variant], + SIZE_CLASSES[@size] + ], + data: { + sidebar: "menu-button", + size: @size, + active: @active + } + } + end + end +end From d16d1e655f5688542c45bb651d2c410f17965558 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 23:22:58 -0300 Subject: [PATCH 09/29] add sidebar header --- lib/ruby_ui/sidebar/sidebar_header.rb | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_header.rb diff --git a/lib/ruby_ui/sidebar/sidebar_header.rb b/lib/ruby_ui/sidebar/sidebar_header.rb new file mode 100644 index 00000000..ca2d1601 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_header.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarHeader < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: "flex flex-col gap-2 p-2", + data: { + sidebar: "header" + } + } + end + end +end From 38412509aacef845151cd8c669bc60ad911b493b Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 23:23:44 -0300 Subject: [PATCH 10/29] add sidebar footer --- lib/ruby_ui/sidebar/sidebar_footer.rb | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_footer.rb diff --git a/lib/ruby_ui/sidebar/sidebar_footer.rb b/lib/ruby_ui/sidebar/sidebar_footer.rb new file mode 100644 index 00000000..3df63e2b --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_footer.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarFooter < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: "flex flex-col gap-2 p-2", + data: { + sidebar: "footer" + } + } + end + end +end From ee42dd0c769c1a6fc48407c2e9c458f76fee29c3 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 23:38:23 -0300 Subject: [PATCH 11/29] add sidebar group action --- lib/ruby_ui/sidebar/sidebar_group_action.rb | 29 +++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_group_action.rb diff --git a/lib/ruby_ui/sidebar/sidebar_group_action.rb b/lib/ruby_ui/sidebar/sidebar_group_action.rb new file mode 100644 index 00000000..6a8607a0 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_group_action.rb @@ -0,0 +1,29 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarGroupAction < Base + def initialize(as: "button", **attrs) + @as = as + super(**attrs) + end + + def view_template(&) + public_send(@as, **attrs, &) + end + + private + + def default_attrs + { + class: [ + "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", + "after:absolute after:-inset-2 after:md:hidden", + "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + ], + data: { + sidebar: "group-action" + } + } + end + end +end From b4e99f2eac248284d63f0d777c799c7870597769 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Thu, 20 Mar 2025 23:45:55 -0300 Subject: [PATCH 12/29] add sidebar menu action --- lib/ruby_ui/sidebar/sidebar_menu_action.rb | 48 ++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_action.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu_action.rb b/lib/ruby_ui/sidebar/sidebar_menu_action.rb new file mode 100644 index 00000000..291fb195 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_action.rb @@ -0,0 +1,48 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuAction < Base + def initialize(as: "button", show_on_hover: false, **attrs) + @as = as + super(**attrs) + end + + def view_template(&) + public_send(@as, **attrs, &) + end + + private + + def default_attrs + { + class: [ + "absolute right-1 top-1.5 flex aspect-square w-5 items-center", + "justify-center rounded-md p-0 text-sidebar-foreground outline-none", + "ring-sidebar-ring transition-transform hover:bg-sidebar-accent", + "hover:text-sidebar-accent-foreground focus-visible:ring-2", + "peer-hover/menu-button:text-sidebar-accent-foreground", + "[&>svg]:size-4 [&>svg]:shrink-0", + "after:absolute after:-inset-2 after:md:hidden", + "peer-data-[size=sm]/menu-button:top-1", + "peer-data-[size=default]/menu-button:top-1.5", + "peer-data-[size=lg]/menu-button:top-2.5", + "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + show_on_hover_classes + ], + data: { + sidebar: "menu-action" + } + } + end + + def show_on_hover_classes + return unless @show_on_hover + + [ + "group-focus-within/menu-item:opacity-100", + "group-hover/menu-item:opacity-100 data-[state=open]:opacity-100", + "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0" + ].join(" ") + end + end +end From 82d587ec711dfc38b0f7c800261d3310fdff8fa7 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Fri, 21 Mar 2025 00:00:47 -0300 Subject: [PATCH 13/29] fix state --- lib/ruby_ui/sidebar/collapsiable_sidebar.rb | 2 +- lib/ruby_ui/sidebar/sidebar.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb index 8707b9ff..6da267b2 100644 --- a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb +++ b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb @@ -39,7 +39,7 @@ def gap_element_attrs def content_wrapper_attrs { class: [ - "absolute inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex", + "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex", content_wrapper_side_classes, content_wrapper_variant_classes, ] diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb index 3076fa8a..e5504d9b 100644 --- a/lib/ruby_ui/sidebar/sidebar.rb +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -51,7 +51,7 @@ def default_attrs style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};", data: { state: "expanded", - collapsible: @collapsible, + collapsible: @state == "collapsed" ? @collapsible : "expanded", variant: @variant, side: @side } From 8c437228deaa551b2ab52eb164f6e29bbff1eaca Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Fri, 21 Mar 2025 00:10:11 -0300 Subject: [PATCH 14/29] add menu badge component --- lib/ruby_ui/sidebar/sidebar_menu_badge.rb | 30 ++++++++++++++++++++++ lib/ruby_ui/sidebar/sidebar_menu_button.rb | 1 + 2 files changed, 31 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_badge.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu_badge.rb b/lib/ruby_ui/sidebar/sidebar_menu_badge.rb new file mode 100644 index 00000000..4ac53f97 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_badge.rb @@ -0,0 +1,30 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuBadge < Base + def view_template(&) + div(**attrs, &) + end + + private + + def default_attrs + { + class: [ + "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none", + "items-center justify-center rounded-md px-1 text-xs font-medium", + "tabular-nums text-sidebar-foreground", + "peer-hover/menu-button:text-sidebar-accent-foreground", + "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", + "peer-data-[size=sm]/menu-button:top-1", + "peer-data-[size=default]/menu-button:top-1.5", + "peer-data-[size=lg]/menu-button:top-2.5", + "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + ], + data: { + sidebar: "menu-badge" + } + } + end + end +end diff --git a/lib/ruby_ui/sidebar/sidebar_menu_button.rb b/lib/ruby_ui/sidebar/sidebar_menu_button.rb index eb91cf53..8830bb8b 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_button.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_button.rb @@ -20,6 +20,7 @@ def initialize(as: "button", variant: :default, size: :default, active: false, * @active = active @as = as + @size = size super(**attrs) end From 13d371bdd4968992ec896fd7415fd0e5dcd6a646 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 11:07:23 -0300 Subject: [PATCH 15/29] break long class strings into shorter ones --- lib/ruby_ui/sidebar/collapsiable_sidebar.rb | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb index 6da267b2..50ab496b 100644 --- a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb +++ b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb @@ -28,7 +28,8 @@ def default_attrs def gap_element_attrs { class: [ - "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear", + "relative w-[--sidebar-width] bg-transparent transition-[width]", + "duration-200 ease-linear", "group-data-[collapsible=offcanvas]/sidebar-wrapper:w-0", "group-data-[side=right]/sidebar-wrapper:rotate-180", variant_classes @@ -39,7 +40,8 @@ def gap_element_attrs def content_wrapper_attrs { class: [ - "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex", + "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width]", + "transition-[left,right,width] duration-200 ease-linear md:flex", content_wrapper_side_classes, content_wrapper_variant_classes, ] @@ -48,7 +50,13 @@ def content_wrapper_attrs def content_attrs { - class: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]/sidebar-wrapper:rounded-lg group-data-[variant=floating]/sidebar-wrapper:border group-data-[variant=floating]/sidebar-wrapper:border-sidebar-border group-data-[variant=floating]/sidebar-wrapper:shadow", + class: [ + "flex h-full w-full flex-col bg-sidebar", + "group-data-[variant=floating]/sidebar-wrapper:rounded-lg", + "group-data-[variant=floating]/sidebar-wrapper:border", + "group-data-[variant=floating]/sidebar-wrapper:border-sidebar-border", + "group-data-[variant=floating]/sidebar-wrapper:shadow" + ], data: { sidebar: "sidebar" } From 5bdf56e6aa1ad0ae84ba8f64322625d806f46d0f Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 11:14:35 -0300 Subject: [PATCH 16/29] add sidebar menu sub --- lib/ruby_ui/sidebar/sidebar_menu_sub.rb | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_sub.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu_sub.rb b/lib/ruby_ui/sidebar/sidebar_menu_sub.rb new file mode 100644 index 00000000..9375f887 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_sub.rb @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuSub < Base + def view_template(&) + ul(**attrs, &) + end + + private + + def default_attrs + { + class: [ + "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l", + "border-sidebar-border px-2.5 py-0.5", + "group-data-[collapsible=icon]/sidebar-wrapper:hidden" + ], + data: { + sidebar: "menu-sub" + } + } + end + end +end From 2e622c1640f2c80ae73dcec9fec8c22a7d52b33a Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 11:15:49 -0300 Subject: [PATCH 17/29] add sidebar menu sub item --- lib/ruby_ui/sidebar/sidebar_menu_sub_item.rb | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_sub_item.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu_sub_item.rb b/lib/ruby_ui/sidebar/sidebar_menu_sub_item.rb new file mode 100644 index 00000000..424ed78e --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_sub_item.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuSubItem < Base + def view_template(&) + li(**attrs, &) + end + end +end From 99fe49a17cd772ec3cbf4e975c7161e621cf60e6 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 11:18:33 -0300 Subject: [PATCH 18/29] fix variant instance not being set --- lib/ruby_ui/sidebar/sidebar_menu_button.rb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/ruby_ui/sidebar/sidebar_menu_button.rb b/lib/ruby_ui/sidebar/sidebar_menu_button.rb index 8830bb8b..2697408d 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_button.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_button.rb @@ -18,9 +18,10 @@ def initialize(as: "button", variant: :default, size: :default, active: false, * raise ArgumentError, "Invalid variant: #{variant}" unless VARIANT_CLASSES.key?(variant) raise ArgumentError, "Invalid size: #{size}" unless SIZE_CLASSES.key?(size) - @active = active @as = as + @variant = variant @size = size + @active = active super(**attrs) end From c12ed44e896b9e467812bb4272a2b4790e0cce4e Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 11:23:45 -0300 Subject: [PATCH 19/29] add sidebar menu sub button --- .../sidebar/sidebar_menu_sub_button.rb | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb b/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb new file mode 100644 index 00000000..3dd8b1b0 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb @@ -0,0 +1,50 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuSubButton < Base + SIZE_CLASSES = { + sm: "text-xs", + md: "text-sm" + }.freeze + + def initialize(as: "button", size: :md, active: false, **attrs) + raise ArgumentError, "Invalid size: #{size}" unless SIZE_CLASSES.key?(size) + + @as = as + @size = size + @active = active + super(**attrs) + end + + def view_template(&) + public_send(@as, **attrs, &) + end + + private + + def default_attrs + { + class: [ + "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden", + "rounded-md px-2 text-sidebar-foreground outline-none", + "ring-sidebar-ring hover:bg-sidebar-accent", + "hover:text-sidebar-accent-foreground focus-visible:ring-2", + "active:bg-sidebar-accent active:text-sidebar-accent-foreground", + "disabled:pointer-events-none disabled:opacity-50", + "aria-disabled:pointer-events-none aria-disabled:opacity-50", + "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + "[&>svg]:text-sidebar-accent-foreground", + "data-[active=true]:bg-sidebar-accent", + "data-[active=true]:text-sidebar-accent-foreground", + "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + SIZE_CLASSES[@size] + ], + data: { + sidebar: "menu-sub-button", + size: @size, + active: @active + } + } + end + end +end From 54bcfb1e6bf81c0b20f87301a5284e0a5e81463b Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 12:17:22 -0300 Subject: [PATCH 20/29] add sidebar menu skeleton --- lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb | 36 ++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb diff --git a/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb b/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb new file mode 100644 index 00000000..07324956 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb @@ -0,0 +1,36 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarMenuSkeleton < Base + def initialize(show_icon: false, **attrs) + @show_icon = show_icon + super(**attrs) + end + + def view_template(&) + div(**attrs) do + Skeleton(class: "size-4 rounded-md", data: {sidebar: "menu-skeleton-icon"}) if @show_icon + Skeleton( + class: "h-4 max-w-[--skeleton-width] flex-1", + data: {sidebar: "menu-skeleton-text"}, + style: {"--skeleton-width" => "#{skeleton_width}%"} + ) + end + end + + private + + def default_attrs + { + class: "flex h-8 items-center gap-2 rounded-md px-2", + data: { + sidebar: "menu-skeleton" + } + } + end + + def skeleton_width + @_skeleton_width ||= rand(40) + 50 + end + end +end From 9f23812f39a9c2589c15da80f84f989cfb4ed23a Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 13:30:12 -0300 Subject: [PATCH 21/29] rename sidebar-wrapper group to sidebar --- lib/ruby_ui/sidebar/collapsiable_sidebar.rb | 24 +++++++++---------- lib/ruby_ui/sidebar/sidebar.rb | 2 +- lib/ruby_ui/sidebar/sidebar_content.rb | 2 +- lib/ruby_ui/sidebar/sidebar_group_action.rb | 2 +- lib/ruby_ui/sidebar/sidebar_group_label.rb | 2 +- lib/ruby_ui/sidebar/sidebar_menu_action.rb | 2 +- lib/ruby_ui/sidebar/sidebar_menu_badge.rb | 2 +- lib/ruby_ui/sidebar/sidebar_menu_button.rb | 4 ++-- lib/ruby_ui/sidebar/sidebar_menu_sub.rb | 2 +- .../sidebar/sidebar_menu_sub_button.rb | 2 +- 10 files changed, 22 insertions(+), 22 deletions(-) diff --git a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb index 50ab496b..55cbfe15 100644 --- a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb +++ b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb @@ -30,8 +30,8 @@ def gap_element_attrs class: [ "relative w-[--sidebar-width] bg-transparent transition-[width]", "duration-200 ease-linear", - "group-data-[collapsible=offcanvas]/sidebar-wrapper:w-0", - "group-data-[side=right]/sidebar-wrapper:rotate-180", + "group-data-[collapsible=offcanvas]/sidebar:w-0", + "group-data-[side=right]/sidebar:rotate-180", variant_classes ] } @@ -52,10 +52,10 @@ def content_attrs { class: [ "flex h-full w-full flex-col bg-sidebar", - "group-data-[variant=floating]/sidebar-wrapper:rounded-lg", - "group-data-[variant=floating]/sidebar-wrapper:border", - "group-data-[variant=floating]/sidebar-wrapper:border-sidebar-border", - "group-data-[variant=floating]/sidebar-wrapper:shadow" + "group-data-[variant=floating]/sidebar:rounded-lg", + "group-data-[variant=floating]/sidebar:border", + "group-data-[variant=floating]/sidebar:border-sidebar-border", + "group-data-[variant=floating]/sidebar:shadow" ], data: { sidebar: "sidebar" @@ -65,23 +65,23 @@ def content_attrs def variant_classes if %i[floating inset].include?(@variant) - "group-data-[collapsible=icon]/sidebar-wrapper:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" + "group-data-[collapsible=icon]/sidebar:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" else - "group-data-[collapsible=icon]/sidebar-wrapper:w-[--sidebar-width-icon]" + "group-data-[collapsible=icon]/sidebar:w-[--sidebar-width-icon]" end end def content_wrapper_side_classes - return "left-0 group-data-[collapsible=offcanvas]/sidebar-wrapper:left-[calc(var(--sidebar-width)*-1)]" if @side == :left + return "left-0 group-data-[collapsible=offcanvas]/sidebar:left-[calc(var(--sidebar-width)*-1)]" if @side == :left - "right-0 group-data-[collapsible=offcanvas]/sidebar-wrapper:right-[calc(var(--sidebar-width)*-1)]" + "right-0 group-data-[collapsible=offcanvas]/sidebar:right-[calc(var(--sidebar-width)*-1)]" end def content_wrapper_variant_classes if %i[floating inset].include?(@variant) - "p-2 group-data-[collapsible=icon]/sidebar-wrapper:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" + "p-2 group-data-[collapsible=icon]/sidebar:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" else - "group-data-[collapsible=icon]/sidebar-wrapper:w-[--sidebar-width-icon] group-data-[side=left]/sidebar-wrapper:border-r group-data-[side=right]/sidebar-wrapper:border-l" + "group-data-[collapsible=icon]/sidebar:w-[--sidebar-width-icon] group-data-[side=left]/sidebar:border-r group-data-[side=right]/sidebar:border-l" end end end diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb index e5504d9b..0b0915c7 100644 --- a/lib/ruby_ui/sidebar/sidebar.rb +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -47,7 +47,7 @@ def view_template(&) def default_attrs { - class: "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", + class: "group/sidebar has-[[data-variant=inset]]:bg-sidebar", style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};", data: { state: "expanded", diff --git a/lib/ruby_ui/sidebar/sidebar_content.rb b/lib/ruby_ui/sidebar/sidebar_content.rb index 215e3707..2aa968d8 100644 --- a/lib/ruby_ui/sidebar/sidebar_content.rb +++ b/lib/ruby_ui/sidebar/sidebar_content.rb @@ -10,7 +10,7 @@ def view_template(&) def default_attrs { - class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]/sidebar-wrapper:overflow-hidden", + class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]/sidebar:overflow-hidden", data: { sidebar: "content" } diff --git a/lib/ruby_ui/sidebar/sidebar_group_action.rb b/lib/ruby_ui/sidebar/sidebar_group_action.rb index 6a8607a0..e03aa129 100644 --- a/lib/ruby_ui/sidebar/sidebar_group_action.rb +++ b/lib/ruby_ui/sidebar/sidebar_group_action.rb @@ -18,7 +18,7 @@ def default_attrs class: [ "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", - "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + "group-data-[collapsible=icon]/sidebar:hidden", ], data: { sidebar: "group-action" diff --git a/lib/ruby_ui/sidebar/sidebar_group_label.rb b/lib/ruby_ui/sidebar/sidebar_group_label.rb index 65ed38e4..0f42f297 100644 --- a/lib/ruby_ui/sidebar/sidebar_group_label.rb +++ b/lib/ruby_ui/sidebar/sidebar_group_label.rb @@ -15,7 +15,7 @@ def default_attrs "font-medium text-sidebar-foreground/70 outline-none", "ring-sidebar-ring transition-[margin,opacity] duration-200", "ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", - "group-data-[collapsible=icon]/sidebar-wrapper:-mt-8 group-data-[collapsible=icon]/sidebar-wrapper:opacity-0", + "group-data-[collapsible=icon]/sidebar:-mt-8 group-data-[collapsible=icon]/sidebar:opacity-0", ], data: { sidebar: "group-label" diff --git a/lib/ruby_ui/sidebar/sidebar_menu_action.rb b/lib/ruby_ui/sidebar/sidebar_menu_action.rb index 291fb195..2f8b0ca2 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_action.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_action.rb @@ -26,7 +26,7 @@ def default_attrs "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", - "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + "group-data-[collapsible=icon]/sidebar:hidden", show_on_hover_classes ], data: { diff --git a/lib/ruby_ui/sidebar/sidebar_menu_badge.rb b/lib/ruby_ui/sidebar/sidebar_menu_badge.rb index 4ac53f97..16f1fa08 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_badge.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_badge.rb @@ -19,7 +19,7 @@ def default_attrs "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", - "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + "group-data-[collapsible=icon]/sidebar:hidden", ], data: { sidebar: "menu-badge" diff --git a/lib/ruby_ui/sidebar/sidebar_menu_button.rb b/lib/ruby_ui/sidebar/sidebar_menu_button.rb index 2697408d..46ebf2fc 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_button.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_button.rb @@ -11,7 +11,7 @@ class SidebarMenuButton < Base SIZE_CLASSES = { default: "h-8 text-sm", sm: "h-7 text-xs", - lg: "h-12 text-sm group-data-[collapsible=icon]/sidebar-wrapper:!p-0", + lg: "h-12 text-sm group-data-[collapsible=icon]/sidebar:!p-0", }.freeze def initialize(as: "button", variant: :default, size: :default, active: false, **attrs) @@ -34,7 +34,7 @@ def view_template(&) def default_attrs { class: [ - "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]/sidebar-wrapper:!size-8 group-data-[collapsible=icon]/sidebar-wrapper:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]/sidebar:!size-8 group-data-[collapsible=icon]/sidebar:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", VARIANT_CLASSES[@variant], SIZE_CLASSES[@size] ], diff --git a/lib/ruby_ui/sidebar/sidebar_menu_sub.rb b/lib/ruby_ui/sidebar/sidebar_menu_sub.rb index 9375f887..ffcdba6a 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_sub.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_sub.rb @@ -13,7 +13,7 @@ def default_attrs class: [ "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l", "border-sidebar-border px-2.5 py-0.5", - "group-data-[collapsible=icon]/sidebar-wrapper:hidden" + "group-data-[collapsible=icon]/sidebar:hidden" ], data: { sidebar: "menu-sub" diff --git a/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb b/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb index 3dd8b1b0..0cc9bb45 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb @@ -36,7 +36,7 @@ def default_attrs "[&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent", "data-[active=true]:text-sidebar-accent-foreground", - "group-data-[collapsible=icon]/sidebar-wrapper:hidden", + "group-data-[collapsible=icon]/sidebar:hidden", SIZE_CLASSES[@size] ], data: { From 3f240415c623146c481b06d60049a1a59e57806b Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 13:31:00 -0300 Subject: [PATCH 22/29] add the sidebar trigger component --- lib/ruby_ui/sidebar/sidebar_trigger.rb | 41 ++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_trigger.rb diff --git a/lib/ruby_ui/sidebar/sidebar_trigger.rb b/lib/ruby_ui/sidebar/sidebar_trigger.rb new file mode 100644 index 00000000..6b022f4b --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_trigger.rb @@ -0,0 +1,41 @@ +# frozen_string_literal: true + +module RubyUI + class SidebarTrigger < Base + def view_template(&) + Button(variant: :ghost, size: :icon, **attrs) do + panel_left_icon + span(class: "sr-only") { "Toggle Sidebar" } + end + end + + private + + def default_attrs + { + class: "h-7 w-7", + data: { + sidebar: "trigger" + } + } + end + + def panel_left_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: 24, + height: 24, + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + strokeWidth: 2, + strokeLinecap: "round", + strokeLinejoin: "round", + class: "lucide lucide-panel-left" + ) do |s| + s.rect(width: 18, height: 18, x: 3, y: 3, rx: 2) + s.path(d: "M9 3v18") + end + end + end +end From 3f20f171a55fe5df16a585e79a1bd765330ae5c5 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 14:10:54 -0300 Subject: [PATCH 23/29] add the sidebar controller --- lib/ruby_ui/sidebar/sidebar_controller.js | 63 +++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 lib/ruby_ui/sidebar/sidebar_controller.js diff --git a/lib/ruby_ui/sidebar/sidebar_controller.js b/lib/ruby_ui/sidebar/sidebar_controller.js new file mode 100644 index 00000000..7aecf4e4 --- /dev/null +++ b/lib/ruby_ui/sidebar/sidebar_controller.js @@ -0,0 +1,63 @@ +import { Controller } from "@hotwired/stimulus"; + +const LOCAL_STORAGE_KEY = "sidebar:open"; +const TRIGGER_SELECTOR = "[data-sidebar='trigger']"; +const State = { + EXPANDED: "expanded", + COLLAPSED: "collapsed", +}; + +export default class extends Controller { + static values = { + open: { + type: Boolean, + default: true, + }, + collapsible: { + type: String, + default: "offcanvas", + }, + }; + + connect() { + this.#setupTriggers(); + } + + disconnect() { + this.#removeTriggers(); + } + + toggle() { + this.openValue = !this.openValue; + } + + openValueChanged() { + this.#toggleSidebarDataState(); + this.#persistSidebarState(); + } + + #setupTriggers() { + this.#triggerElements().forEach((trigger) => { + trigger.addEventListener("click", this.toggle.bind(this)); + }); + } + + #removeTriggers() { + this.#triggerElements().forEach((trigger) => { + trigger.removeEventListener("click", this.toggle.bind(this)); + }); + } + + #triggerElements() { + return document.querySelectorAll(TRIGGER_SELECTOR); + } + + #toggleSidebarDataState() { + this.element.dataset.state = this.openValue ? State.EXPANDED : State.COLLAPSED; + this.element.dataset.collapsible = this.openValue ? State.EXPANDED : this.collapsibleValue; + } + + #persistSidebarState() { + localStorage.setItem(LOCAL_STORAGE_KEY, this.openValue); + } +} From f65cdb60a9755ad9cf8b51223b19db9007d7845e Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 14:11:05 -0300 Subject: [PATCH 24/29] setup the sidebar controller --- lib/ruby_ui/sidebar/sidebar.rb | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb index 0b0915c7..e6c92273 100644 --- a/lib/ruby_ui/sidebar/sidebar.rb +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -20,7 +20,7 @@ class Sidebar < Base COLLAPSIBLES = %i[ offcanvas icon none ].freeze - def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, mobile: false, **attrs) + def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, **attrs) raise ArgumentError, "Invalid side: #{side}. Must be one of #{SIDES}." unless SIDES.include?(side) raise ArgumentError, "Invalid variant: #{variant}. Must be one of #{VARIANTS}." unless VARIANTS.include?(variant) raise ArgumentError, "Invalid collapsible: #{collapsible}. Must be one of #{COLLAPSIBLES}." unless COLLAPSIBLES.include?(collapsible) @@ -28,7 +28,6 @@ def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, mobile: @side = side @variant = variant @collapsible = collapsible - @mobile = mobile super(**attrs) end @@ -50,10 +49,12 @@ def default_attrs class: "group/sidebar has-[[data-variant=inset]]:bg-sidebar", style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};", data: { + controller: "ruby-ui--sidebar", state: "expanded", - collapsible: @state == "collapsed" ? @collapsible : "expanded", + collapsible: "expanded", variant: @variant, - side: @side + side: @side, + ruby_ui__sidebar_collapsible_value: @collapsible, } } end From 578da75d3f277f5ae69cc1e928e6a7a631c8012a Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 14:13:29 -0300 Subject: [PATCH 25/29] add a open flag --- lib/ruby_ui/sidebar/sidebar.rb | 7 ++++--- lib/ruby_ui/sidebar/sidebar_controller.js | 8 ++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb index e6c92273..342de2c7 100644 --- a/lib/ruby_ui/sidebar/sidebar.rb +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -20,7 +20,7 @@ class Sidebar < Base COLLAPSIBLES = %i[ offcanvas icon none ].freeze - def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, **attrs) + def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: true, **attrs) raise ArgumentError, "Invalid side: #{side}. Must be one of #{SIDES}." unless SIDES.include?(side) raise ArgumentError, "Invalid variant: #{variant}. Must be one of #{VARIANTS}." unless VARIANTS.include?(variant) raise ArgumentError, "Invalid collapsible: #{collapsible}. Must be one of #{COLLAPSIBLES}." unless COLLAPSIBLES.include?(collapsible) @@ -28,6 +28,7 @@ def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, **attrs) @side = side @variant = variant @collapsible = collapsible + @open = open super(**attrs) end @@ -50,8 +51,8 @@ def default_attrs style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};", data: { controller: "ruby-ui--sidebar", - state: "expanded", - collapsible: "expanded", + state: @open ? "expanded" : "collapsed", + collapsible: @open ? "" : @collapsible, variant: @variant, side: @side, ruby_ui__sidebar_collapsible_value: @collapsible, diff --git a/lib/ruby_ui/sidebar/sidebar_controller.js b/lib/ruby_ui/sidebar/sidebar_controller.js index 7aecf4e4..317386fc 100644 --- a/lib/ruby_ui/sidebar/sidebar_controller.js +++ b/lib/ruby_ui/sidebar/sidebar_controller.js @@ -53,8 +53,12 @@ export default class extends Controller { } #toggleSidebarDataState() { - this.element.dataset.state = this.openValue ? State.EXPANDED : State.COLLAPSED; - this.element.dataset.collapsible = this.openValue ? State.EXPANDED : this.collapsibleValue; + this.element.dataset.state = this.openValue + ? State.EXPANDED + : State.COLLAPSED; + this.element.dataset.collapsible = this.openValue + ? this.collapsibleValue + : ""; } #persistSidebarState() { From bd8e932140039a30f7e9adbb8cefb122c03a3549 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 14:16:37 -0300 Subject: [PATCH 26/29] fix collapsible value --- lib/ruby_ui/sidebar/sidebar_controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ruby_ui/sidebar/sidebar_controller.js b/lib/ruby_ui/sidebar/sidebar_controller.js index 317386fc..9702e614 100644 --- a/lib/ruby_ui/sidebar/sidebar_controller.js +++ b/lib/ruby_ui/sidebar/sidebar_controller.js @@ -57,8 +57,8 @@ export default class extends Controller { ? State.EXPANDED : State.COLLAPSED; this.element.dataset.collapsible = this.openValue - ? this.collapsibleValue - : ""; + ? "" + : this.collapsibleValue; } #persistSidebarState() { From 20b573d7a7366adfc2a292812b3b1efbf5e18354 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 14:30:16 -0300 Subject: [PATCH 27/29] persist sidebar state in a cookie --- lib/ruby_ui/sidebar/sidebar.rb | 1 + lib/ruby_ui/sidebar/sidebar_controller.js | 15 +++++++-------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb index 342de2c7..4039355f 100644 --- a/lib/ruby_ui/sidebar/sidebar.rb +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -55,6 +55,7 @@ def default_attrs collapsible: @open ? "" : @collapsible, variant: @variant, side: @side, + ruby_ui__sidebar_open_value: @open.to_s, ruby_ui__sidebar_collapsible_value: @collapsible, } } diff --git a/lib/ruby_ui/sidebar/sidebar_controller.js b/lib/ruby_ui/sidebar/sidebar_controller.js index 9702e614..7cac96a2 100644 --- a/lib/ruby_ui/sidebar/sidebar_controller.js +++ b/lib/ruby_ui/sidebar/sidebar_controller.js @@ -1,6 +1,7 @@ import { Controller } from "@hotwired/stimulus"; -const LOCAL_STORAGE_KEY = "sidebar:open"; +const SIDEBAR_COOKIE_NAME = "sidebar_state"; +const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const TRIGGER_SELECTOR = "[data-sidebar='trigger']"; const State = { EXPANDED: "expanded", @@ -53,15 +54,13 @@ export default class extends Controller { } #toggleSidebarDataState() { - this.element.dataset.state = this.openValue - ? State.EXPANDED - : State.COLLAPSED; - this.element.dataset.collapsible = this.openValue - ? "" - : this.collapsibleValue; + const { dataset } = this.element; + + dataset.state = this.openValue ? State.EXPANDED : State.COLLAPSED; + dataset.collapsible = this.openValue ? "" : this.collapsibleValue; } #persistSidebarState() { - localStorage.setItem(LOCAL_STORAGE_KEY, this.openValue); + document.cookie = `${SIDEBAR_COOKIE_NAME}=${this.openValue}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; } } From 696bbf220b9ff2398eee29f395a083d25e146a5f Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 14:46:11 -0300 Subject: [PATCH 28/29] fix icon attributes --- lib/ruby_ui/sidebar/sidebar_trigger.rb | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/ruby_ui/sidebar/sidebar_trigger.rb b/lib/ruby_ui/sidebar/sidebar_trigger.rb index 6b022f4b..dc0813d7 100644 --- a/lib/ruby_ui/sidebar/sidebar_trigger.rb +++ b/lib/ruby_ui/sidebar/sidebar_trigger.rb @@ -13,7 +13,7 @@ def view_template(&) def default_attrs { - class: "h-7 w-7", + class: "h-7 w-7 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", data: { sidebar: "trigger" } @@ -23,17 +23,17 @@ def default_attrs def panel_left_icon svg( xmlns: "http://www.w3.org/2000/svg", - width: 24, - height: 24, - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - strokeWidth: 2, - strokeLinecap: "round", - strokeLinejoin: "round", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", class: "lucide lucide-panel-left" ) do |s| - s.rect(width: 18, height: 18, x: 3, y: 3, rx: 2) + s.rect(width: "18", height: "18", x: "3", y: "3", rx: "2") s.path(d: "M9 3v18") end end From 4d22ec9cec11c9cdea064370ddd49640dbcd9b51 Mon Sep 17 00:00:00 2001 From: Lucas Sousa Date: Sat, 22 Mar 2025 14:54:18 -0300 Subject: [PATCH 29/29] lint files --- lib/ruby_ui/sidebar/collapsiable_sidebar.rb | 2 +- lib/ruby_ui/sidebar/sidebar.rb | 9 ++++----- lib/ruby_ui/sidebar/sidebar_group_action.rb | 10 +++++++--- lib/ruby_ui/sidebar/sidebar_group_label.rb | 4 ++-- lib/ruby_ui/sidebar/sidebar_menu_action.rb | 4 ++-- lib/ruby_ui/sidebar/sidebar_menu_badge.rb | 2 +- lib/ruby_ui/sidebar/sidebar_menu_button.rb | 4 ++-- lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb | 4 ++-- lib/ruby_ui/sidebar/sidebar_trigger.rb | 2 +- 9 files changed, 22 insertions(+), 19 deletions(-) diff --git a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb index 55cbfe15..a56e4266 100644 --- a/lib/ruby_ui/sidebar/collapsiable_sidebar.rb +++ b/lib/ruby_ui/sidebar/collapsiable_sidebar.rb @@ -43,7 +43,7 @@ def content_wrapper_attrs "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width]", "transition-[left,right,width] duration-200 ease-linear md:flex", content_wrapper_side_classes, - content_wrapper_variant_classes, + content_wrapper_variant_classes ] } end diff --git a/lib/ruby_ui/sidebar/sidebar.rb b/lib/ruby_ui/sidebar/sidebar.rb index 4039355f..b82b9391 100644 --- a/lib/ruby_ui/sidebar/sidebar.rb +++ b/lib/ruby_ui/sidebar/sidebar.rb @@ -15,10 +15,9 @@ class Sidebar < Base SIDEBAR_WIDTH = "16rem" SIDEBAR_WIDTH_ICON = "3rem" - SIDES = %i[ left right ].freeze - VARIANTS = %i[ sidebar floating inset ].freeze - COLLAPSIBLES = %i[ offcanvas icon none ].freeze - + SIDES = %i[left right].freeze + VARIANTS = %i[sidebar floating inset].freeze + COLLAPSIBLES = %i[offcanvas icon none].freeze def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: true, **attrs) raise ArgumentError, "Invalid side: #{side}. Must be one of #{SIDES}." unless SIDES.include?(side) @@ -56,7 +55,7 @@ def default_attrs variant: @variant, side: @side, ruby_ui__sidebar_open_value: @open.to_s, - ruby_ui__sidebar_collapsible_value: @collapsible, + ruby_ui__sidebar_collapsible_value: @collapsible } } end diff --git a/lib/ruby_ui/sidebar/sidebar_group_action.rb b/lib/ruby_ui/sidebar/sidebar_group_action.rb index e03aa129..b698bd78 100644 --- a/lib/ruby_ui/sidebar/sidebar_group_action.rb +++ b/lib/ruby_ui/sidebar/sidebar_group_action.rb @@ -16,9 +16,13 @@ def view_template(&) def default_attrs { class: [ - "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", - "after:absolute after:-inset-2 after:md:hidden", - "group-data-[collapsible=icon]/sidebar:hidden", + "absolute right-3 top-3.5 flex aspect-square w-5 items-center", + "justify-center rounded-md p-0 text-sidebar-foreground", + "outline-none ring-sidebar-ring transition-transform", + "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", + "focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", + "after:absolute after:-inset-2 after:md:hidden", + "group-data-[collapsible=icon]/sidebar:hidden" ], data: { sidebar: "group-action" diff --git a/lib/ruby_ui/sidebar/sidebar_group_label.rb b/lib/ruby_ui/sidebar/sidebar_group_label.rb index 0f42f297..ff0b9158 100644 --- a/lib/ruby_ui/sidebar/sidebar_group_label.rb +++ b/lib/ruby_ui/sidebar/sidebar_group_label.rb @@ -13,9 +13,9 @@ def default_attrs class: [ "flex h-8 shrink-0 items-center rounded-md px-2 text-xs", "font-medium text-sidebar-foreground/70 outline-none", - "ring-sidebar-ring transition-[margin,opacity] duration-200", + "ring-sidebar-ring transition-[margin,opacity] duration-200", "ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", - "group-data-[collapsible=icon]/sidebar:-mt-8 group-data-[collapsible=icon]/sidebar:opacity-0", + "group-data-[collapsible=icon]/sidebar:-mt-8 group-data-[collapsible=icon]/sidebar:opacity-0" ], data: { sidebar: "group-label" diff --git a/lib/ruby_ui/sidebar/sidebar_menu_action.rb b/lib/ruby_ui/sidebar/sidebar_menu_action.rb index 2f8b0ca2..f89dd7c0 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_action.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_action.rb @@ -18,7 +18,7 @@ def default_attrs class: [ "absolute right-1 top-1.5 flex aspect-square w-5 items-center", "justify-center rounded-md p-0 text-sidebar-foreground outline-none", - "ring-sidebar-ring transition-transform hover:bg-sidebar-accent", + "ring-sidebar-ring transition-transform hover:bg-sidebar-accent", "hover:text-sidebar-accent-foreground focus-visible:ring-2", "peer-hover/menu-button:text-sidebar-accent-foreground", "[&>svg]:size-4 [&>svg]:shrink-0", @@ -36,7 +36,7 @@ def default_attrs end def show_on_hover_classes - return unless @show_on_hover + return unless @show_on_hover [ "group-focus-within/menu-item:opacity-100", diff --git a/lib/ruby_ui/sidebar/sidebar_menu_badge.rb b/lib/ruby_ui/sidebar/sidebar_menu_badge.rb index 16f1fa08..40eaace3 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_badge.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_badge.rb @@ -19,7 +19,7 @@ def default_attrs "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", - "group-data-[collapsible=icon]/sidebar:hidden", + "group-data-[collapsible=icon]/sidebar:hidden" ], data: { sidebar: "menu-badge" diff --git a/lib/ruby_ui/sidebar/sidebar_menu_button.rb b/lib/ruby_ui/sidebar/sidebar_menu_button.rb index 46ebf2fc..b03be6e3 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_button.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_button.rb @@ -5,13 +5,13 @@ class SidebarMenuButton < Base VARIANT_CLASSES = { default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", outline: - "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", + "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]" }.freeze SIZE_CLASSES = { default: "h-8 text-sm", sm: "h-7 text-xs", - lg: "h-12 text-sm group-data-[collapsible=icon]/sidebar:!p-0", + lg: "h-12 text-sm group-data-[collapsible=icon]/sidebar:!p-0" }.freeze def initialize(as: "button", variant: :default, size: :default, active: false, **attrs) diff --git a/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb b/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb index 07324956..5190ddcd 100644 --- a/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb +++ b/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb @@ -11,7 +11,7 @@ def view_template(&) div(**attrs) do Skeleton(class: "size-4 rounded-md", data: {sidebar: "menu-skeleton-icon"}) if @show_icon Skeleton( - class: "h-4 max-w-[--skeleton-width] flex-1", + class: "h-4 max-w-[--skeleton-width] flex-1", data: {sidebar: "menu-skeleton-text"}, style: {"--skeleton-width" => "#{skeleton_width}%"} ) @@ -30,7 +30,7 @@ def default_attrs end def skeleton_width - @_skeleton_width ||= rand(40) + 50 + @_skeleton_width ||= rand(50..89) end end end diff --git a/lib/ruby_ui/sidebar/sidebar_trigger.rb b/lib/ruby_ui/sidebar/sidebar_trigger.rb index dc0813d7..dcc40271 100644 --- a/lib/ruby_ui/sidebar/sidebar_trigger.rb +++ b/lib/ruby_ui/sidebar/sidebar_trigger.rb @@ -22,7 +22,7 @@ def default_attrs def panel_left_icon svg( - xmlns: "http://www.w3.org/2000/svg", + xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24",