Skip to main content
The AdminLayout.vue component provides a structured layout for admin pages, integrating essential elements like navigation, branding, and user interactions. It includes slots for customizable sections, ensuring flexibility while maintaining consistency across admin pages.

​
Features

Logo Section

Includes a dedicated area for displaying your logo.

Top Navigation

Provides top navigation elements for easy access to key features.

Sidebar Menu

Features a sidebar navigation menu for structured navigation.

Customizable Content

Offers a flexible main content area to suit your needs.

Extensible Slots

Allows customization and extension through default slots.

​
Usage

Here’s an example of how to use the AdminLayout component: 
import { Head, Link, router } from '@inertiajs/vue3';
import { AdminLayout, Avatar, SidebarLink, SidebarTitle} from '@robojuice/velure-ui';

<AdminLayout>
    <Head :title="title" />

    <template #logo>
        <Link :href="route('dashboard')">
            <!-- Logo -->
        </Link>
    </template>

    <template #nav-top-left-first>
        <div></div>
    </template>

    <template #nav-top-left-last>
        <Link :href="route('profile.show')" class="button-center-content flex-shrink-0">
            <Avatar
                :image="$page.props.auth.user.profile_photo_url || ''"
                :alt="$page.props.auth.user.name"
                :monogram="`${$page.props.auth.user.name.charAt(0)}`"
            />
            <strong>{{ $page.props.auth.user.name }}</strong>
        </Link>
    </template>

    <template #nav-side>
        <SidebarLink :href="route('dashboard')" :is-active="['Dashboard'].includes($page.component)">
            <template #icon><IconHome :fill="['Dashboard'].includes($page.component)" size="20" /></template>
            Home
        </SidebarLink>
        <SidebarTitle>Account</SidebarTitle>
        <SidebarLink :href="route('profile.show')" :is-active="['Profile/Show'].includes($page.component)">
            <template #icon><IconUser :fill="['Profile/Show'].includes($page.component)" size="20" /></template>
            Profile
        </SidebarLink>
    </template>

    <div class="p-2">
        <slot />
    </div>
</AdminLayout>

​
Slots

Slot for the logo, typically displayed at the top of the sidebar. <template #logo></template>
​
nav-top-left-first
slot
Slot for additional content or controls in the top-left navigation area (first position). <template #nav-top-left-first></template>
​
nav-top-left-last
slot
Slot for user-related elements (e.g., avatar, name) in the top-left navigation area (last position). <template #nav-top-left-last></template>
​
nav-side
slot
Slot for sidebar navigation links and titles. This is the primary navigation area. <template #nav-side></template>
​
default
slot
Slot for the main page content.

​
Example Implementations

<template #logo>
    <Link :href="route('dashboard')">
        <ApplicationMark class="block h-9 w-auto" />
    </Link>
</template>

​
Top Navigation with User Info

<template #nav-top-left-last>
    <Link :href="route('profile.show')" class="button-center-content flex-shrink-0">
        <Avatar
            :image="$page.props.auth.user.profile_photo_url || ''"
            :alt="$page.props.auth.user.name"
            :monogram="`${$page.props.auth.user.name.charAt(0)}`"
        />
        <strong>{{ $page.props.auth.user.name }}</strong>
    </Link>
</template>

<template #nav-side>
    <SidebarLink :href="route('dashboard')" :is-active="['Dashboard'].includes($page.component)">
        <template #icon><IconHome :fill="['Dashboard'].includes($page.component)" size="20" /></template>
        Home
    </SidebarLink>
    <SidebarTitle>Account</SidebarTitle>
    <SidebarLink :href="route('profile.show')" :is-active="['Profile/Show'].includes($page.component)">
        <template #icon><IconUser :fill="['Profile/Show'].includes($page.component)" size="20" /></template>
        Profile
    </SidebarLink>
</template>

​
Logout Button

<template #nav-side>
    <form class="mt-8" @submit.prevent="logout">
        <Button kind="text">
            <span>Log out</span><IconArrowRightUp size="12" />
        </Button>
    </form>
</template>