页面 · Laravilt
Layouts
Page layouts and structure for Laravilt admin panels.
Laravilt provides several layouts for different page types.
Available Layouts
AppLayout (Default)
The main admin panel layout with sidebar, header, and content area:
vue
Features:
- Collapsible sidebar
- Top header with global search
- User menu
- Breadcrumbs support
- Theme switching
AuthLayout
Simple centered layout for authentication pages:
vue
Features:
- Centered card
- Logo display
- Clean background
GuestLayout
Public pages layout without authentication:
vue
Layout Structure
AppLayout Anatomy
text
Sidebar States
Expanded:
- Full width (256px default)
- Icon + text navigation items
- Group labels visible
- Full user info display
Collapsed:
- Icon-only width (64px)
- Navigation groups become dropdowns
- Tooltips on hover
- Mini user avatar
Using Layouts
With Inertia Pages
vue
With Page Actions
vue
With Breadcrumbs
vue
Customizing Layouts
Custom Sidebar Width
css
Custom Theme Colors
css
Adding Layout Slots
Create a custom layout with additional slots:
vue
Responsive Behavior
Mobile Sidebar
On mobile devices (< 768px):
- Sidebar becomes an overlay sheet
- Toggle button in header
- Swipe to close support
- Dark backdrop when open
Tablet Mode
On tablets (768px - 1024px):
- Sidebar defaults to collapsed
- Can be expanded by user
- Content uses full width
Desktop Mode
On desktop (> 1024px):
- Sidebar defaults to expanded
- Collapsible with toggle
- Content respects sidebar width
Best Practices
Use Semantic Structure
vue
Handle Loading States
vue
Persist User Preferences
Sidebar state and theme preferences are automatically persisted in localStorage.