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
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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" }
  ]
}
render(Elevate::TreeViewMenuComponent.new(entries: entries, animate:))

No notes provided.

Param Description Input

—