BetterUi Components

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
<div class="h-screen overflow-hidden flex flex-col" data-controller="better-ui--drawer--layout" data-better-ui--drawer--layout-position-value="left" data-better-ui--drawer--layout-breakpoint-value="lg">
  <header class="w-full h-16 bg-white border-b border-grayscale-200 text-grayscale-900 sticky top-0 flex items-center justify-between px-4 z-40" >
    <div class="flex items-center shrink-0">
      Header Only Layout
    </div>
    <div class="hidden lg:flex flex-1 items-center justify-center px-4">
      <nav class="flex gap-6">
        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Home</a>
        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">About</a>
        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Contact</a>
      </nav>
    </div>
    <div class="flex items-center gap-2">
      Login
    </div>
  </header>
  <div class="flex flex-1 overflow-hidden relative">
    <div class="fixed inset-0 bg-black/50 z-40 hidden opacity-0 transition-opacity duration-300 lg:hidden"
         data-better-ui--drawer--layout-target="overlay"
         data-action="click->better-ui--drawer--layout#close">
    </div>
    <main class="flex-1 overflow-auto">
      <div class="p-6">
        <h1 class="text-2xl font-bold mb-4">Layout with Header Only</h1>
        <p class="text-grayscale-600">This layout has only a header, no sidebar. The main content takes up the full width.</p>
      </div>
    </main>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
  <% layout.with_header do |header| %>
    <% header.with_logo { "Header Only Layout" } %>
    <% header.with_navigation do %>
      <nav class="flex gap-6">
        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Home</a>
        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">About</a>
        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Contact</a>
      </nav>
    <% end %>
    <% header.with_actions { "Login" } %>
  <% end %>
  <% layout.with_main do %>
    <div class="p-6">
      <h1 class="text-2xl font-bold mb-4">Layout with Header Only</h1>
      <p class="text-grayscale-600">This layout has only a header, no sidebar. The main content takes up the full width.</p>
    </div>
  <% end %>
<% end %>

No notes provided.

No params configured.