Layout

Layout component.

Layout, Personalization Blocks

Example:

TallStackUi::personalize()
    ->layout()
    ->block('block', 'classes');

Layout Header, Personalization Blocks

Example:

TallStackUi::personalize()
    ->layout('header')
    ->block('block', 'classes');

Sidebar, Personalization Blocks

Example:

TallStackUi::personalize()
    ->sideBar()
    ->block('block', 'classes');

Sidebar Item, Personalization Blocks

Example:

TallStackUi::personalize()
    ->sideBar('item')
    ->block('block', 'classes');

Sidebar Separator, Personalization Blocks

Example:

TallStackUi::personalize()
    ->sideBar('separator')
    ->block('block', 'classes');

# Concept

The version 2.x of the TallStackUI introduces a new layout component for dashboard creation. While this component is simple, it is complete in every way. Due to the format of the TallStackUI documentation, there will be no code examples of the layout that makes it display.

# Layout Example

Here is a complete example of using the layout component:

<body>
 
    <x-layout> 
        <x-slot:header>
            <x-layout.header>
                <x-slot:right>
                    <x-dropdown text="Hello, {{ auth()->user()->name }}!">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <x-dropdown.items text="Logout" onclick="event.preventDefault(); this.closest('form').submit();" />
                        </form>
                    </x-dropdown>
                </x-slot:right>
            </x-layout.header>
        </x-slot:header>
 
        <x-slot:menu>
            <x-side-bar>
                <x-side-bar.item text="Home" icon="home" :route="route('dashboard')" />
                <x-side-bar.item text="Settings" icon="cog" :route="route('settings')" />
            </x-side-bar>
        </x-slot:menu>
 
        {{ $slot }}
    </x-layout>
 
    @livewireScripts
</body>

Before continuing, you may have noticed the following:

The layout component has multiple slots
The layout component has other components, such as layout.header
In this example, we are using other components from TallStackUI, such as dropdown

Layout Slots

# Slot: Header

This slot is used to position the component layout.header :

<x-slot:header>
    <x-layout.header>
        <!-- ... -->
    </x-layout.header>
</x-slot:header>

# Slot: Menu

This slot is used to position the comonent side-bar :

<x-slot:menu>
    <x-side-bar>
        <!-- ... -->
    </x-side-bar>
</x-slot:menu>

# Slot: Top

Although it was not used in the example above, this slot is positioned above the menu slot and was created to receive any content added in this position. Internally it is applied like this:

<div x-data="{ tallStackUiMenuMobile : false }" x-on:tallstackui-menu-mobile.window="tallStackUiMenuMobile = $event.detail.status">
    @if ($top) 
        {{ $top }}
    @endif
    @if ($menu)
        {{ $menu }}
    @endif
 
    <!-- ... -->
</div>

# Slot: Footer

Same as top , but positioned in the bottom of the layout component:

<div x-data="{ tallStackUiMenuMobile : false }" x-on:tallstackui-menu-mobile.window="tallStackUiMenuMobile = $event.detail.status">
    <!-- ... -->
 
    @if ($footer) 
        {{ $footer }}
    @endif
</div>

Children Components

# Layout Header

The layout.header component is used to group three specific slots that vary the positions of content in the top horizontal bar, called the header.

<x-layout.header>
    <x-slot:left>
        <!-- ... -->
    </x-slot:left>
 
    <x-slot:middle>
        <!-- ... -->
    </x-slot:middle>
 
    <x-slot:right>
        <!-- ... -->
    </x-slot:right>
</x-layout.header>

left : adds content to the left of the horizontal bar
middle : adds content to the middle of the horizontal bar
right : adds content to the right of the horizontal bar

Additionally, you can control the display of a button that opens the side-bar on mobile devices. You will learn more about this as you continue reading the documentation below.

# Side Bar

The side-bar is the component that creates the structure to receive the options menu. It is unique between the desktop and mobile versions, which means that the same options menu you see on the desktop will be the same as the one you see on the mobile version.

<x-side-bar>
    <!-- ... -->
</x-side-bar>

Since the side-bar is applied to both desktop and mobile, if for some reason you do not want to use the menu for mobile devices, you can hide the button that is displayed in the layout.header so that when clicked it activates the side-bar on mobile:

<x-layout.header without-mobile-button>
    <!-- ... -->
</x-layout.header>

If you hide the default side-bar opening button on mobile, but want to use another button to control the side-bar opening on mobile, just trigger AlpineJS events:

<!-- Opening -->
<button x-on:click="$dispatch('tallstackui-menu-mobile', { status : true })">
    Open Mobile
</button>
 
<!-- Closing -->
<button x-on:click="$dispatch('tallstackui-menu-mobile', { status : false })">
    Close Mobile
</button>

The side-bar has few settings available, but they are all useful for a purpose:

Slot: brand : special slot for adding an image/text above the options menu
Attribute: smart : enable route detection behavior to enable the "current" routes effect
Attribute: navigate : enable wire:navigate routes
Attribute: navigate-hover : enable wire:navigate.hover routes

Full example:

<x-side-bar smart navigate>
    <x-slot:brand>
        <div class="flex justify-center">
            <img src="..." />
        </div>
    </x-slot:brand>
 
    <!-- side-bar items goes here... -->
</x-side-bar>

# Side Bar Item

The side-bar.item component is used to add clickable options to the side-bar . It can be used to add an individual item or create a group of items.

<!-- Individual -->
<x-side-bar.item text="Home" icon="home" :route="route('dashboard')" />
 
<!-- Grouped -->
<x-side-bar.item text="Admin">
    <x-side-bar.item text="Home" icon="home" :route="route('admin.dashboard')" />
</x-side-bar.item>

If you don't want to use the side-bar component's smart to activate automatic route detection, you can control the route detection behavior manually, through the boolean attributes: opened - for the group of items, and current for the item itself:

<x-side-bar.item text="Admin" opened>
    <x-side-bar.item text="Home" icon="home" current :route="route('admin.dashboard')" />
</x-side-bar.item>

These attributes are boolean, which means you can pass conditions to them:

<x-side-bar.item text="Admin" :opened="route()->requestIs('admin.*')">
    <x-side-bar.item text="Home"
                     icon="home"
                     :current="route()->requestIs('admin.dashboard')"
                     :route="route('admin.dashboard')" />
</x-side-bar.item>

# Side Bar Separator

The side-bar.separator is a component used to create decorated separations between items:

<x-side-bar.item text="Home" icon="home" :route="route('dashboard')" />
<x-side-bar.separator text="Configurations" /> 
<x-side-bar.item text="Settings" icon="cog" :route="route('settings')" />

There are three different options available. Each offers a unique style:

<!-- Default, only text -->
<x-side-bar.separator text="Configurations" />
 
<!-- Line separator between text -->
<x-side-bar.separator text="Configurations" line />
 
<!-- Line separator at right -->
<x-side-bar.separator text="Configurations" line-right />

# Personalization

All the components mentioned above are available to be fully customized through one of the TallStackUI personalization methods: soft personalization or deep personalization.