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
<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">
        </span>
        <h5 class="elevate-heading--font-weight--medium elevate--simple-sidebar--header-title">Elevate DS</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>
    </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 App Name and Logo</h2>
          <p>This example shows how to customize the app name and logo.</p>
          <pre class="mt-4 p-2 bg-gray-100 rounded"><code><%= elevate_simple_sidebar(app_name: "Elevate DS", logo_name: "elevate") %></code></pre>
        </div>
      </div>
    </div>
  </main>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%= elevate_dashboard_layout do |component| %>
  <% component.with_sidebar do %>
    <%= elevate_simple_sidebar(app_name: "Elevate DS", logo_name: "elevate") %>
  <% 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 App Name and Logo</h2>
        <p>This example shows how to customize the app name and logo.</p>
        <pre class="mt-4 p-2 bg-gray-100 rounded"><code><%= elevate_simple_sidebar(app_name: "Elevate DS", logo_name: "elevate") %></code></pre>
      </div>
    </div>
  </div>
<% end %>

No notes provided.

No params configured.