test.blade.php

<x-mj-app>
    <x-slot:nav>
        <x-mj-vertical-stack justify="between">
            <x-mj-profile-card />

            <x-mj-vertical-stack gap="1">
                <x-mj-global-nav />

                <x-mj-side-nav title="My Mailboxes">
                    <x-mj-side-nav-link count="128">
                        <x-slot:prefix>
                            <x-mj-icon name="some_icon" />
                        </x-slot:prefix>

                        Demo Inbox
                    </x-mj-side-nav-link>

                    <x-mj-side-nav-link count="6">
                        <x-slot:prefix>
                            <x-mj-icon name="some_icon" />
                        </x-slot:prefix>

                        DocuMocu Inbox
                    </x-mj-side-nav-link>

                    <x-mj-side-nav-link>
                        <x-slot:prefix>
                            <x-mj-icon name="some_icon" />
                        </x-slot:prefix>

                        Kitchen Inbox
                    </x-mj-side-nav-link>
                </x-mj-side-nav>

                <x-mj-side-nav title="Shared with me">
                    <x-mj-side-nav-link count="128">
                        <x-slot:prefix>
                            <x-mj-icon name="some_icon" />
                        </x-slot:prefix>

                        HB Inbox
                    </x-mj-side-nav-link>
                </x-mj-side-nav>
            </x-mj-vertical-stack>

            <x-mj-billing-limits-card />
        </x-mj-vertical-stack>
    </x-slot:nav>

    <x-slot:sidebar>
        <x-mj-sidebar>
            <x-mj-vertical-stack>
                <x-mj-horizontal-stack height="2" justify="between">
                    <x-mj-vertical-stack gap="0.5">
                        <x-mj-heading>
                            DocuMocu inbox
                        </x-mj-heading>
    
                        <x-mj-text variant="light">
                            32 messages, 6 unread
                        </x-mj-text>
                    </x-mj-vertical-stack>
    
                    <x-mj-horizontal-stack gap="0.5">
                        <x-mj-icon-button icon="refresh" />
    
                        <x-mj-icon-button icon="envelope" />
    
                        <x-mj-icon-button icon="trash" />
    
                        <x-mj-icon-button variant="primary" icon="cog" />
                    </x-mj-horizontal-stack>
                </x-mj-horizontal-stack>

                <div class="flex-1">
                    <x-mj-vertical-stack>
                        <x-mj-box height="2">
                            <x-mj-search-field />
                        </x-mj-box>

                        <x-mj-scrollable>
                            <x-mj-inbox-emails />
                        </x-mj-scrollable>
                    </x-mj-vertical-stack>
                </div>
            </x-mj-vertical-stack>
        </x-mj-sidebar>
    </x-slot:sidebar>

    <x-slot:content>
        <x-mj-inbox>
            <x-mj-horizontal-stack justify="between">
                <x-mj-horizontal-stack gap="0.5">
                    <x-mj-heading>
                        Some Inbox
                    </x-mj-heading>

                    <x-mj-icon-button icon="pencil" />
                </x-mj-horizontal-stack>

                <x-mj-icon-button icon="horizontal-more-dots" />
            </x-mj-horizontal-stack>

            <x-mj-box height="1">
                <x-mj-text variant="light"></x-mj-text>
            </x-mj-box>

            <x-mj-tabs-nav>
                <x-mj-tabs-nav-tab>SMTP Settings</x-mj-tabs-nav-tab>

                <x-mj-tabs-nav-tab :active="true">Members</x-mj-tabs-nav-tab>
            </x-mj-tabs-nav>

            <x-mj-box height="2">
                <x-mj-horizontal-stack>
                    <x-mj-icon name="users" />

                    <x-mj-text>
                        3 users have access to this mailbox
                    </x-mj-text>
                </x-mj-horizontal-stack>
            </x-mj-box>

            <x-mj-vertical-stack gap="4">
                <x-mj-table>
                    <colgroup>
                        <col />
                        <col />
                        <col />
                    </colgroup>

                    <tr>
                        <td>
                            <x-mj-user-card />
                        </td>

                        <td>
                            <x-mj-user-role-select />
                        </td>

                        <td>
                            <x-icon-button icon="horizontal-dots-more" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <x-mj-user-card />
                        </td>

                        <td>
                            <x-mj-user-role-select />
                        </td>

                        <td>
                            <x-icon-button icon="horizontal-dots-more" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <x-mj-user-card />
                        </td>

                        <td>
                            <x-mj-user-role-select />
                        </td>

                        <td>
                            <x-mj-menu>
                                <x-slot:trigger>
                                    <x-icon-button icon="horizontal-dots-more" />
                                </x-slot:trigger>

                                <x-mj-menu-item>
                                    <x-slot:prefix>
                                        <x-icon name="trash" />
                                    </x-slot:prefix>

                                    Remove
                                </x-mj-menu-item>
                            </x-mj-menu>
                        </td>
                    </tr>
                </x-mj-table> 

                <x-mj-button variant="primary">
                    Add members
                </x-mj-button>
            </x-mj-vertical-stack>
        </x-mj-inbox>
    </x-slot:content>
</x-mj-app>