BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<aside class="flex flex-col h-full w-64 bg-white text-grayscale-900 border-r border-grayscale-200 shrink-0" data-position="left" data-collapsible="true">
  <div class="flex-1 overflow-y-auto p-4 space-y-6">
    <nav class='space-y-2'>
      <a href='#' class='block px-4 py-2 rounded-md bg-primary-50 text-primary-700'>Dashboard</a>
      <a href='#' class='block px-4 py-2 rounded-md hover:bg-grayscale-100'>Projects</a>
    </nav>
  </div>
  <div class="shrink-0 p-4 border-t border-grayscale-200">
    <div class='flex items-center'>
      <div class='w-8 h-8 bg-grayscale-300 rounded-full'></div>
      <div class='ml-3'>
        <div class='text-sm font-medium'>John Doe</div>
        <div class='text-xs text-grayscale-500'>john@example.com</div>
      </div>
    </div>
  </div>
</aside>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
render BetterUi::Drawer::SidebarComponent.new do |sidebar|
  sidebar.with_navigation do
    "<nav class='space-y-2'>
      <a href='#' class='block px-4 py-2 rounded-md bg-primary-50 text-primary-700'>Dashboard</a>
      <a href='#' class='block px-4 py-2 rounded-md hover:bg-grayscale-100'>Projects</a>
    </nav>".html_safe
  end
  sidebar.with_footer do
    "<div class='flex items-center'>
      <div class='w-8 h-8 bg-grayscale-300 rounded-full'></div>
      <div class='ml-3'>
        <div class='text-sm font-medium'>John Doe</div>
        <div class='text-xs text-grayscale-500'>john@example.com</div>
      </div>
    </div>".html_safe
  end
end

No notes provided.

No params configured.