Class: Views::Docs::Sidebar

Inherits:
Base
  • Object
show all
Defined in:
lib/ruby_ui/docs/sidebar_examples.rb,
lib/ruby_ui/sidebar/sidebar_docs.rb

Defined Under Namespace

Classes: Example, InsetExample

Instance Method Summary collapse

Methods inherited from Base

#Alert, #AlertDescription, #AlertTitle, #Heading, #InlineCode, #InlineLink, #Text, #component_files, #docs_accordion_path, #docs_alert_dialog_path, #docs_alert_path, #docs_aspect_ratio_path, #docs_avatar_path, #docs_badge_path, #docs_installation_path, #docs_separator_path, #docs_sheet_path

Instance Method Details



144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
# File 'lib/ruby_ui/sidebar/sidebar_docs.rb', line 144

def external_icon_link
  svg(
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    stroke_width: "2",
    stroke_linecap: "round",
    stroke_linejoin: "round",
    class: "lucide lucide-external-link-icon lucide-external-link size-3"
  ) do |s|
    s.path(d: "M15 3h6v6")
    s.path(d: "M10 14 21 3")
    s.path(d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6")
  end
end

#home_icon ⇒ Object 



108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
# File 'lib/ruby_ui/sidebar/sidebar_docs.rb', line 108

def home_icon
  svg(
    xmlns: "http://www.w3.org/2000/svg",
    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-house"
  ) do |s|
    s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8")
    s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z")
  end
end

#inbox_icon ⇒ Object 



126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
# File 'lib/ruby_ui/sidebar/sidebar_docs.rb', line 126

def inbox_icon
  svg(
    xmlns: "http://www.w3.org/2000/svg",
    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-inbox"
  ) do |s|
    s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12")
    s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z")
  end
end

#info_icon ⇒ Object 



161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
 
# File 'lib/ruby_ui/sidebar/sidebar_docs.rb', line 161

def info_icon
  svg(
    xmlns: "http://www.w3.org/2000/svg",
    viewbox: "0 0 24 24",
    fill: "currentColor",
    class: "w-5 h-5"
  ) do |s|
    s.path(
      fill_rule: "evenodd",
      d:
        "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
      clip_rule: "evenodd"
    )
  end
end

#search_icon ⇒ Object 



90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# File 'lib/ruby_ui/sidebar/sidebar_docs.rb', line 90

def search_icon
  svg(
    xmlns: "http://www.w3.org/2000/svg",
    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-search"
  ) do |s|
    s.circle(cx: "11", cy: "11", r: "8")
    s.path(d: "M21 21L16.7 16.7")
  end
end

#view_template ⇒ Object 



4
5
6
7
8
9
10
11
12
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
# File 'lib/ruby_ui/sidebar/sidebar_docs.rb', line 4

def view_template
  component = "Sidebar"

  div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
    render Docs::Header.new(title: "Sidebar", description: "A composable, themeable and customizable sidebar component.")

    Heading(level: 2) { "Usage" }

    Alert do
      info_icon
      AlertTitle { "Requirements" }
      AlertDescription { "The sidebar component depends on the following components:" }
      ul(class: "list-disc list-inside") do
        li do
          InlineLink(href: docs_sheet_path, target: "_blank", class: "inline-flex items-center gap-2") do
            span { "Sheet" }
            external_icon_link
          end
        end
        li do
          div(class: "inline-flex items-center gap-2") do
            InlineLink(href: docs_separator_path, target: "_blank") { "Separator" }
            external_icon_link
          end
        end
      end
    end

    render Docs::VisualCodeExample.new(title: "Example", src: "/docs/sidebar/example", context: self) do
      Views::Docs::Sidebar::Example::CODE
    end

    render Docs::VisualCodeExample.new(title: "Inset variant", src: "/docs/sidebar/inset", context: self) do
      Views::Docs::Sidebar::InsetExample::CODE
    end

    render Docs::VisualCodeExample.new(title: "Dialog variant", context: self) do
      "        Dialog(data: {action: \"ruby-ui--dialog:connect->ruby-ui--dialog#open\"}) do\n          DialogTrigger do\n            Button { \"Open Dialog\" }\n          end\n          DialogContent(class: \"grid overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\") do\n            SidebarWrapper(class: \"items-start\") do\n              Sidebar(collapsible: :none, class: \"hidden md:flex\") do\n                SidebarContent do\n                  SidebarGroup do\n                    SidebarGroupContent do\n                      SidebarMenu do\n                        SidebarMenuItem do\n                          SidebarMenuButton(as: :a, href: \"#\") do\n                            search_icon()\n                            span { \"Search\" }\n                          end\n                        end\n                        SidebarMenuItem do\n                          SidebarMenuButton(as: :a, href: \"#\", active: true) do\n                            home_icon()\n                            span { \"Home\" }\n                          end\n                        end\n                        SidebarMenuItem do\n                          SidebarMenuButton(as: :a, href: \"#\") do\n                            inbox_icon()\n                            span { \"Inbox\" }\n                          end\n                        end\n                      end\n                    end\n                  end\n                end\n              end\n              main(class: \"flex h-[480px] flex-1 flex-col overflow-hidden\") do\n              end\n            end\n          end\n        end\n      RUBY\n    end\n\n    render Components::ComponentSetup::Tabs.new(component_name: component)\n\n    render Docs::ComponentsTable.new(component_files(component))\n  end\nend\n"