> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Admin Layout
> AdminLayout.vue Component Documentation
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
Includes a dedicated area for displaying your logo.
Provides top navigation elements for easy access to key features.
Features a sidebar navigation menu for structured navigation.
Offers a flexible main content area to suit your needs.
Allows customization and extension through default slots.
***
## Usage
Here's an example of how to use the `AdminLayout` component:
```js theme={null}
import { Head, Link, router } from '@inertiajs/vue3';
import { AdminLayout, Avatar, SidebarLink, SidebarTitle} from '@robojuice/velure-ui';
```
```vue theme={null}
{{ $page.props.auth.user.name }}
Home
Account
Profile
```
***
## Slots
Slot for the logo, typically displayed at the top of the sidebar. ``
Slot for additional content or controls in the top-left navigation area (first position). ``
Slot for user-related elements (e.g., avatar, name) in the top-left navigation area (last position). ``
Slot for sidebar navigation links and titles. This is the primary navigation area. ``
Slot for the main page content.
***
## Example Implementations
### Adding a Logo
```vue theme={null}
```
### Top Navigation with User Info
```vue theme={null}
{{ $page.props.auth.user.name }}
```
### Sidebar with Navigation Links
```vue theme={null}
Home
Account
Profile
```
### Logout Button
```vue theme={null}
```