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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<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-academy" 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>
        Academy
      </button>
      <div id="tree-content-academy" data-state="open" role="region" data-tree-view-menu-target="content" class="elevate-tree-view-menu--sublist">
        <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-courses" 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>
            Courses
          </button>
          <div id="tree-content-courses" 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>
              Online Courses</a>
            <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-workshops" 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>
                Workshops
              </button>
              <div id="tree-content-workshops" 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>
                  In-Person</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>
                  Remote</a>
              </div>
            </div>
          </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-instructors" 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>
            Instructors
          </button>
          <div id="tree-content-instructors" 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>
              Active</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>
              Former</a>
          </div>
        </div>
      </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-community" 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>
        Community
      </button>
      <div id="tree-content-community" data-state="open" role="region" data-tree-view-menu-target="content" class="elevate-tree-view-menu--sublist">
        <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-forums" 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>
            Forums
          </button>
          <div id="tree-content-forums" 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>
              General</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>
              Help & Support</a>
          </div>
        </div>
        <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>
          Members</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-system" 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>
        System
      </button>
      <div id="tree-content-system" data-state="open" role="region" data-tree-view-menu-target="content" class="elevate-tree-view-menu--sublist">
        <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-system-logs" 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>
            System Logs
          </button>
          <div id="tree-content-system-logs" 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>
              Error Logs</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>
              Audit Logs</a>
          </div>
        </div>
        <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>
          Configuration</a>
      </div>
    </div>
  </div>
</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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
entries = {
  "Academy" => [
    {
      active: false,
      href: "#",
      text: "Courses",
      children: [
        { active: false, href: "#", text: "Online Courses" },
        {
          active: false,
          href: "#",
          text: "Workshops",
          children: [
            { active: false, href: "#", text: "In-Person" },
            { active: false, href: "#", text: "Remote" }
          ]
        }
      ]
    },
    {
      active: false,
      href: "#",
      text: "Instructors",
      children: [
        { active: false, href: "#", text: "Active" },
        { active: false, href: "#", text: "Former" }
      ]
    }
  ],
  "Community" => [
    {
      active: false,
      href: "#",
      text: "Forums",
      children: [
        { active: false, href: "#", text: "General" },
        { active: false, href: "#", text: "Help & Support" }
      ]
    },
    { active: false, href: "#", text: "Members" }
  ],
  "System" => [
    {
      active: false,
      href: "#",
      text: "System Logs",
      children: [
        { active: false, href: "#", text: "Error Logs" },
        { active: false, href: "#", text: "Audit Logs" }
      ]
    },
    { active: false, href: "#", text: "Configuration" }
  ]
}
render(Elevate::TreeViewMenuComponent.new(entries: entries))

No notes provided.

No params configured.