Layout
LayoutMobileSidebar
Slide-over sidebar for mobile viewports, backed by USlideover.
LayoutMobileSidebar
Mobile slide-over sidebar driven by USlideover. Renders brand header, nav items, and optional footer items. Closes automatically on navigation when closeOnNavigate is true. Integrates with useXNavigation automatically.
Components
<XALayoutMobileSidebar />
Mobile slide-over sidebar driven by USlideover. Renders brand header, nav items, and optional footer items. Closes automatically on navigation when closeOnNavigate is true.
<XALayoutMobileSidebar
v-model:open="mobileOpen"
:items="navItems"
color="primary"
close-on-navigate
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | Boolean | false | Controls slide-over visibility |
items | Array | undefined | Navigation items |
footerItems | Array | undefined | Footer navigation items |
brand | Object | undefined | Brand config: { title, logo, to } |
closeOnNavigate | Boolean | true | Close on route change |
useNavigation | Boolean | true | Merge config from useXNavigation composable |
color | String | 'primary' | Active item color |
textMode | String | 'dark' | Text color mode: 'light' or 'dark' |
AI Context
component: XALayoutMobileSidebar
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Mobile drawer navigation; XALayout composes this automatically — use directly only when building a custom mobile navigation solution
patterns:
- Use v-model:open to toggle the slide-over from a hamburger button.
- closeOnNavigate defaults to true — the drawer closes automatically on route change.