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
<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 class="p-4 mt-4 bg-gray-100 rounded">
          <h3 class="font-medium text-sm mb-2">Custom Navigation</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-blue-600 hover:underline">Home</a></li>
            <li><a href="#" class="text-blue-600 hover:underline">Dashboard</a></li>
            <li><a href="#" class="text-blue-600 hover:underline">Settings</a></li>
            <li><a href="#" class="text-blue-600 hover:underline">Profile</a></li>
          </ul>
        </div>
      </div>
    </aside>
  </div>
  <main class="elevate-dashboard-layout--main">
    <div class="bg-white h-auto p-4 rounded shadow">
      <div class="relative h-[500px] overflow-hidden rounded-sm border border-dashed border-gray-400 opacity-75">
        <div class="p-4">
          <h2 class="text-xl font-bold mb-2">Custom Content</h2>
          <p>This example shows how to add custom content to the sidebar.</p>
          <pre class="mt-4 p-2 bg-gray-100 rounded"><code><%= elevate_simple_sidebar do %>
  <div class="p-4 mt-4 bg-gray-100 rounded">
    <h3 class="font-medium text-sm mb-2">Custom Navigation</h3>
    <ul class="space-y-2">
      <li><a href="#" class="text-blue-600 hover:underline">Home</a></li>
      <li><a href="#" class="text-blue-600 hover:underline">Dashboard</a></li>
      <li><a href="#" class="text-blue-600 hover:underline">Settings</a></li>
      <li><a href="#" class="text-blue-600 hover:underline">Profile</a></li>
    </ul>
  </div>
<% end %></code></pre>
        </div>
      </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
<%= elevate_dashboard_layout do |component| %>
  <% component.with_sidebar do %>
    <%= elevate_simple_sidebar do %>
      <div class="p-4 mt-4 bg-gray-100 rounded">
        <h3 class="font-medium text-sm mb-2">Custom Navigation</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-blue-600 hover:underline">Home</a></li>
          <li><a href="#" class="text-blue-600 hover:underline">Dashboard</a></li>
          <li><a href="#" class="text-blue-600 hover:underline">Settings</a></li>
          <li><a href="#" class="text-blue-600 hover:underline">Profile</a></li>
        </ul>
      </div>
    <% end %>
  <% end %>
  <div class="bg-white h-auto p-4 rounded shadow">
    <div class="relative h-[500px] overflow-hidden rounded-sm border border-dashed border-gray-400 opacity-75">
      <div class="p-4">
        <h2 class="text-xl font-bold mb-2">Custom Content</h2>
        <p>This example shows how to add custom content to the sidebar.</p>
        <pre class="mt-4 p-2 bg-gray-100 rounded"><code><%= elevate_simple_sidebar do %>
  <div class="p-4 mt-4 bg-gray-100 rounded">
    <h3 class="font-medium text-sm mb-2">Custom Navigation</h3>
    <ul class="space-y-2">
      <li><a href="#" class="text-blue-600 hover:underline">Home</a></li>
      <li><a href="#" class="text-blue-600 hover:underline">Dashboard</a></li>
      <li><a href="#" class="text-blue-600 hover:underline">Settings</a></li>
      <li><a href="#" class="text-blue-600 hover:underline">Profile</a></li>
    </ul>
  </div>
<% end %></code></pre>
      </div>
    </div>
  </div>
<% end %>

No notes provided.

No params configured.