Botyglot Components V0.0.1
x
1
2
3
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<div class="elevate-dashboard-layout">
  <div class="elevate-dashboard-layout--sidebar">
    <aside class="elevate-simple-sidebar">
      <div class="elevate--simple-sidebar--header-container">
        <span alt="logo-icon" class="elevate--simple-sidebar--header-icon elevate-icon elevate-icon--scheme--primary elevate-icon--size--xxl">
          <svg viewbox="0 0 23 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false" aria-hidden="true">
            <path d="M5.53395 4.11179C5.53395 4.11179 12.1134 0.917261 15.5541 0.222948C18.9981 -0.471366 21.0537 0.527351 21.2784 2.23064C21.6138 4.7719 19.8767 5.5141 18.4615 6.11264C19.8599 6.17079 23.2502 5.91427 22.9853 9.01987C22.6969 12.4093 19.605 13.4525 16.2382 14.1708C12.8747 14.889 10.8156 14.9506 8.71302 14.9985C6.61041 15.0464 9.49438 13.945 9.8532 13.7946C10.212 13.6441 12.9115 12.5701 13.0256 12.447C13.1396 12.3238 13.3207 12.0229 13.0121 12.016C12.7036 12.0092 2.57956 11.5303 1.73113 11.4825C0.882711 11.4346 0.071175 11.2636 0.00410598 11.0105C-0.0629631 10.7574 0.627849 10.087 6.85186 7.9459C12.7808 5.94163 12.6802 5.57908 12.6936 5.51067C12.7003 5.47305 12.6902 5.43543 12.6634 5.3807C12.593 5.24047 9.8096 5.27126 7.35823 5.27468C4.90685 5.28152 4.33006 5.33966 4.27976 5.00106C4.22946 4.66245 5.52724 4.10837 5.52724 4.10837L5.53395 4.11179Z" fill="#FEFADE"></path>
          </svg>
        </span>
        <h5 class="elevate-heading--font-weight--medium elevate--simple-sidebar--header-title">Elevate</h5>
      </div>
      <hr class="elevate--simple-sidebar--divider"/>
      <div class="elevate--simple-sidebar--menu-container" data-controller="simple-sidebar-filter">
        <div class="elevate--simple-sidebar--filtering-wrapper">
          <input type="text" placeholder="Search..." class="elevate--simple-sidebar--filtering-input" data-simple-sidebar-filter-target="input"/>
          <span class="elevate--simple-sidebar--filtering-icon elevate-icon elevate-icon--scheme--gray elevate-icon--size--s">
            <svg viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
              <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path>
            </svg>
          </span>
        </div>
        <div data-simple-sidebar-filter-target="menu">
          <div data-controller="tree-view-menu" data-tree-view-menu-animate-value="true" class="elevate-tree-view-menu--container">
            <div class="space-y-1">
              <div class="elevate-tree-view-menu--container--directory" data-simple-sidebar-filter-target="directory">
                <button data-action="click->tree-view-menu#toggle" aria-controls="tree-content-dashboard" aria-expanded="true" data-state="open" type="button" class="elevate-button elevate-button--size-s elevate-button--align-start elevate-tree-view-menu--button-folder">
                  <svg data-tree-view-menu-target="icon" class="folder-open" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                      <path d="M5,14.75h-.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626c1.105,0,2,.895,2,2v1"></path>
                      <path d="M16.148,13.27l.843-3.13c.257-.953-.461-1.89-1.448-1.89H6.15c-.678,0-1.272,.455-1.448,1.11l-.942,3.5c-.257,.953,.461,1.89,1.448,1.89H14.217c.904,0,1.696-.607,1.931-1.48Z"></path>
                    </g>
                  </svg>
                  Dashboard
                </button>
                <div id="tree-content-dashboard" data-state="open" role="region" data-tree-view-menu-target="content" class="elevate-tree-view-menu--sublist">
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file elevate-tree-view-menu--link-file--active"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Overview</a>
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Statistics</a>
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Activity Log</a>
                </div>
              </div>
              <div class="elevate-tree-view-menu--container--directory" data-simple-sidebar-filter-target="directory">
                <button data-action="click->tree-view-menu#toggle" aria-controls="tree-content-content" aria-expanded="true" data-state="open" type="button" class="elevate-button elevate-button--size-s elevate-button--align-start elevate-tree-view-menu--button-folder">
                  <svg data-tree-view-menu-target="icon" class="folder-open" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                      <path d="M5,14.75h-.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626c1.105,0,2,.895,2,2v1"></path>
                      <path d="M16.148,13.27l.843-3.13c.257-.953-.461-1.89-1.448-1.89H6.15c-.678,0-1.272,.455-1.448,1.11l-.942,3.5c-.257,.953,.461,1.89,1.448,1.89H14.217c.904,0,1.696-.607,1.931-1.48Z"></path>
                    </g>
                  </svg>
                  Content
                </button>
                <div id="tree-content-content" data-state="open" role="region" data-tree-view-menu-target="content" class="elevate-tree-view-menu--sublist">
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Articles</a>
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Media Library</a>
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Tags & Categories</a>
                </div>
              </div>
              <div class="elevate-tree-view-menu--container--directory" data-simple-sidebar-filter-target="directory">
                <button data-action="click->tree-view-menu#toggle" aria-controls="tree-content-settings" aria-expanded="true" data-state="open" type="button" class="elevate-button elevate-button--size-s elevate-button--align-start elevate-tree-view-menu--button-folder">
                  <svg data-tree-view-menu-target="icon" class="folder-open" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                      <path d="M5,14.75h-.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626c1.105,0,2,.895,2,2v1"></path>
                      <path d="M16.148,13.27l.843-3.13c.257-.953-.461-1.89-1.448-1.89H6.15c-.678,0-1.272,.455-1.448,1.11l-.942,3.5c-.257,.953,.461,1.89,1.448,1.89H14.217c.904,0,1.696-.607,1.931-1.48Z"></path>
                    </g>
                  </svg>
                  Settings
                </button>
                <div id="tree-content-settings" data-state="open" role="region" data-tree-view-menu-target="content" class="elevate-tree-view-menu--sublist">
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Profile Settings</a>
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    Notifications</a>
                  <a data-simple-sidebar-filter-target="file" href="#" class="elevate-tree-view-menu--link-file"><span class="elevate-tree-view-menu--link-file--icon elevate-icon elevate-icon--size--s">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" focusable="false" aria-hidden="true">
                        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
                          <path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path>
                          <path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path>
                        </g>
                      </svg>
                    </span>
                    API Access</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </aside>
  </div>
  <main class="elevate-dashboard-layout--main">
    <div class="bg-white h-auto p-4 rounded shadow">
      <div class="relative h-[10000px] overflow-hidden rounded-sm border border-dashed border-gray-400 opacity-75">
        <svg class="absolute inset-0 size-full stroke-gray-900/10" fill="none">
          <defs>
            <pattern id="pattern-7a429f7f-112e-4ecd-bb4c-a0ab3ae94252" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
              <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
            </pattern>
          </defs>
          <rect stroke="none" fill="url(#pattern-7a429f7f-112e-4ecd-bb4c-a0ab3ae94252)" width="100%" height="100%"></rect>
        </svg>
      </div>
    </div>
  </main>
</div>
1
2
3
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
<% entries = {
  "Dashboard" => [
    { active: true, href: "#", text: "Overview" },
    { active: false, href: "#", text: "Statistics" },
    { active: false, href: "#", text: "Activity Log" }
  ],
  "Content" => [
    { active: false, href: "#", text: "Articles" },
    { active: false, href: "#", text: "Media Library" },
    { active: false, href: "#", text: "Tags & Categories" }
  ],
  "Settings" => [
    { active: false, href: "#", text: "Profile Settings" },
    { active: false, href: "#", text: "Notifications" },
    { active: false, href: "#", text: "API Access" }
  ]
}
%>
<%= elevate_dashboard_layout do |component| %>
  <% component.with_sidebar do %>
    <%= elevate_simple_sidebar do |sidebar| %>
      <% sidebar.with_tree_view_menu(entries: entries) %>
    <% end %>
  <% end %>
  <div class="bg-white h-auto p-4 rounded shadow">
    <div class="relative h-[10000px] overflow-hidden rounded-sm border border-dashed border-gray-400 opacity-75">
      <svg class="absolute inset-0 size-full stroke-gray-900/10" fill="none">
        <defs>
          <pattern id="pattern-7a429f7f-112e-4ecd-bb4c-a0ab3ae94252" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
          </pattern>
        </defs>
        <rect stroke="none" fill="url(#pattern-7a429f7f-112e-4ecd-bb4c-a0ab3ae94252)" width="100%" height="100%"></rect>
      </svg>
    </div>
  </div>
<% end %>

No notes provided.

No params configured.