Botyglot Components V0.0.1

Previews

No matching results.

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
<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">
          </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.

app/assets/stylesheets/components/simple_sidebar.css

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
@layer components {
  .elevate-simple-sidebar {
    @apply bg-white h-full border-r border-secondary-100 w-auto;
  }
  /* Header */
  .elevate--simple-sidebar--header-container {
    @apply flex items-center p-3;
  }
  .elevate--simple-sidebar--header-icon {
    @apply mr-4 ml-0;
  }
  .elevate--simple-sidebar--header-title {
    @apply block font-sans text-xl antialiased font-semibold leading-snug tracking-normal;
  }
  /* Search bar */
  .elevate--simple-sidebar--filtering-wrapper {
    @apply relative mb-6;
  }
  .elevate--simple-sidebar--filtering-input {
    @apply w-full pl-10 pr-4 py-1.5 rounded-lg border border-secondary-200 bg-secondary-100 text-secondary-700 focus:ring-2 focus:ring-sun-300 focus:outline-none transition duration-200;
  }
  .elevate--simple-sidebar--filtering-icon {
    @apply absolute left-3 top-2.5 text-secondary-200;
  }
  /* Divider */
  .elevate--simple-sidebar--divider {
    @apply my-2 h-[1px] border-t-0 bg-secondary-100;
  }
  .elevate--simple-sidebar--menu-container {
    @apply flex flex-col p-4 mb-2;
  }
}