Skip to content

Commit c9c5eb9

Browse files
lsouoliveiralsouoliveira
committed
move sidebar to another component
1 parent dcad2f0 commit c9c5eb9

11 files changed

+37
-42
lines changed

‎lib/ruby_ui/sidebar/collapsiable_sidebar.rb‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22

33
module RubyUI
44
class CollapsiableSidebar < Base
5-
SIDEBAR_WIDTH = '16rem'
6-
SIDEBAR_WIDTH_ICON = '3rem'
7-
85
def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: true, **attrs)
96
@side = side
107
@variant = variant
@@ -14,9 +11,9 @@ def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: tr
1411
end
1512

1613
def view_template(&)
17-
div(**attrs) do
18-
MobileSidebar(side: @side, &)
19-
div(**wrapper_attrs) do
14+
div do
15+
MobileSidebar(side: @side, **attrs, &)
16+
div(**mix(sidebar_attrs, attrs)) do
2017
div(**gap_element_attrs)
2118
div(**content_wrapper_attrs) do
2219
div(**content_attrs, &)
@@ -27,10 +24,9 @@ def view_template(&)
2724

2825
private
2926

30-
def default_attrs
27+
def sidebar_attrs
3128
{
32-
class: 'group/sidebar',
33-
style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};",
29+
class: 'group peer hidden text-sidebar-foreground md:block',
3430
data: {
3531
state: @open ? 'expanded' : 'collapsed',
3632
collapsible: @open ? '' : @collapsible,
@@ -42,19 +38,13 @@ def default_attrs
4238
}
4339
end
4440

45-
def wrapper_attrs
46-
{
47-
class: 'peer hidden text-sidebar-foreground md:block'
48-
}
49-
end
50-
5141
def gap_element_attrs
5242
{
5343
class: [
5444
'relative w-[--sidebar-width] bg-transparent transition-[width]',
5545
'duration-200 ease-linear',
56-
'group-data-[collapsible=offcanvas]/sidebar:w-0',
57-
'group-data-[side=right]/sidebar:rotate-180',
46+
'group-data-[collapsible=offcanvas]:w-0',
47+
'group-data-[side=right]:rotate-180',
5848
variant_classes
5949
]
6050
}
@@ -75,10 +65,10 @@ def content_attrs
7565
{
7666
class: [
7767
'flex h-full w-full flex-col bg-sidebar',
78-
'group-data-[variant=floating]/sidebar:rounded-lg',
79-
'group-data-[variant=floating]/sidebar:border',
80-
'group-data-[variant=floating]/sidebar:border-sidebar-border',
81-
'group-data-[variant=floating]/sidebar:shadow'
68+
'group-data-[variant=floating]:rounded-lg',
69+
'group-data-[variant=floating]:border',
70+
'group-data-[variant=floating]:border-sidebar-border',
71+
'group-data-[variant=floating]:shadow'
8272
],
8373
data: {
8474
sidebar: 'sidebar'
@@ -88,23 +78,23 @@ def content_attrs
8878

8979
def variant_classes
9080
if %i[floating inset].include?(@variant)
91-
'group-data-[collapsible=icon]/sidebar:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
81+
'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
9282
else
93-
'group-data-[collapsible=icon]/sidebar:w-[--sidebar-width-icon]'
83+
'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
9484
end
9585
end
9686

9787
def content_wrapper_side_classes
98-
return 'left-0 group-data-[collapsible=offcanvas]/sidebar:left-[calc(var(--sidebar-width)*-1)]' if @side == :left
88+
return 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' if @side == :left
9989

100-
'right-0 group-data-[collapsible=offcanvas]/sidebar:right-[calc(var(--sidebar-width)*-1)]'
90+
'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]'
10191
end
10292

10393
def content_wrapper_variant_classes
10494
if %i[floating inset].include?(@variant)
105-
'p-2 group-data-[collapsible=icon]/sidebar:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
95+
'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
10696
else
107-
'group-data-[collapsible=icon]/sidebar:w-[--sidebar-width-icon] group-data-[side=left]/sidebar:border-r group-data-[side=right]/sidebar:border-l'
97+
'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l'
10898
end
10999
end
110100
end

‎lib/ruby_ui/sidebar/sidebar_content.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ def view_template(&)
1010

1111
def default_attrs
1212
{
13-
class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]/sidebar:overflow-hidden",
13+
class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
1414
data: {
1515
sidebar: "content"
1616
}

‎lib/ruby_ui/sidebar/sidebar_group_action.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ def default_attrs
2222
"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
2323
"focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
2424
"after:absolute after:-inset-2 after:md:hidden",
25-
"group-data-[collapsible=icon]/sidebar:hidden"
25+
"group-data-[collapsible=icon]:hidden"
2626
],
2727
data: {
2828
sidebar: "group-action"

‎lib/ruby_ui/sidebar/sidebar_group_label.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ def default_attrs
1515
"font-medium text-sidebar-foreground/70 outline-none",
1616
"ring-sidebar-ring transition-[margin,opacity] duration-200",
1717
"ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
18-
"group-data-[collapsible=icon]/sidebar:-mt-8 group-data-[collapsible=icon]/sidebar:opacity-0"
18+
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
1919
],
2020
data: {
2121
sidebar: "group-label"

‎lib/ruby_ui/sidebar/sidebar_menu_action.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ def default_attrs
2626
"peer-data-[size=sm]/menu-button:top-1",
2727
"peer-data-[size=default]/menu-button:top-1.5",
2828
"peer-data-[size=lg]/menu-button:top-2.5",
29-
"group-data-[collapsible=icon]/sidebar:hidden",
29+
"group-data-[collapsible=icon]:hidden",
3030
show_on_hover_classes
3131
],
3232
data: {

‎lib/ruby_ui/sidebar/sidebar_menu_badge.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ def default_attrs
1919
"peer-data-[size=sm]/menu-button:top-1",
2020
"peer-data-[size=default]/menu-button:top-1.5",
2121
"peer-data-[size=lg]/menu-button:top-2.5",
22-
"group-data-[collapsible=icon]/sidebar:hidden"
22+
"group-data-[collapsible=icon]:hidden"
2323
],
2424
data: {
2525
sidebar: "menu-badge"

‎lib/ruby_ui/sidebar/sidebar_menu_button.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class SidebarMenuButton < Base
1111
SIZE_CLASSES = {
1212
default: "h-8 text-sm",
1313
sm: "h-7 text-xs",
14-
lg: "h-12 text-sm group-data-[collapsible=icon]/sidebar:!p-0"
14+
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
1515
}.freeze
1616

1717
def initialize(as: "button", variant: :default, size: :default, active: false, **attrs)
@@ -34,7 +34,7 @@ def view_template(&)
3434
def default_attrs
3535
{
3636
class: [
37-
"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",
37+
"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]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
3838
VARIANT_CLASSES[@variant],
3939
SIZE_CLASSES[@size]
4040
],

‎lib/ruby_ui/sidebar/sidebar_menu_sub.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ def default_attrs
1313
class: [
1414
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l",
1515
"border-sidebar-border px-2.5 py-0.5",
16-
"group-data-[collapsible=icon]/sidebar:hidden"
16+
"group-data-[collapsible=icon]:hidden"
1717
],
1818
data: {
1919
sidebar: "menu-sub"

‎lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ def default_attrs
3636
"[&>svg]:text-sidebar-accent-foreground",
3737
"data-[active=true]:bg-sidebar-accent",
3838
"data-[active=true]:text-sidebar-accent-foreground",
39-
"group-data-[collapsible=icon]/sidebar:hidden",
39+
"group-data-[collapsible=icon]:hidden",
4040
SIZE_CLASSES[@size]
4141
],
4242
data: {

‎lib/ruby_ui/sidebar/sidebar_rail.rb‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ def default_attrs
1313
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all",
1414
"ease-linear after:absolute after:inset-y-0 after:left-1/2",
1515
"after:w-[2px] hover:after:bg-sidebar-border",
16-
"group-data-[side=left]/sidebar:-right-4 group-data-[side=right]/sidebar:left-0",
16+
"group-data-[side=left]:-right-4 group-data-[side=right]:left-0",
1717
"sm:flex [[data-side=left]_&]:cursor-w-resize",
1818
"[[data-side=right]_&]:cursor-e-resize",
1919
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
2020
"[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
21-
"group-data-[collapsible=offcanvas]/sidebar:translate-x-0",
22-
"group-data-[collapsible=offcanvas]/sidebar:after:left-full",
23-
"group-data-[collapsible=offcanvas]/sidebar:hover:bg-sidebar",
21+
"group-data-[collapsible=offcanvas]:translate-x-0",
22+
"group-data-[collapsible=offcanvas]:after:left-full",
23+
"group-data-[collapsible=offcanvas]:hover:bg-sidebar",
2424
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
2525
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
2626
],

0 commit comments

Comments
 (0)