Skip to content

useAppShellMobile

@astryxdesign/core v0.7.1 · useAppShellMobile

Returns ​

NameTypeDescription
isMobilebooleanWhether the current viewport is below the AppShell mobile navigation breakpoint. Use this to synchronize AppShell-adjacent mobile UI with the same breakpoint as mobile nav.
isMobileNavOpenbooleanWhether the AppShell-managed mobile navigation drawer is open.
mobileNavIdstring | undefinedDOM id of the mobile navigation drawer, set by AppShell. Point aria-controls of a custom toggle at this so screen-reader users know which element the toggle expands. Undefined outside an AppShell that manages the drawer.
toggleMobileNav() => voidToggle the AppShell-managed mobile navigation drawer. No-ops when mobile nav is disabled.
openMobileNav() => voidOpen the AppShell-managed mobile navigation drawer. No-ops when mobile nav is disabled.
closeMobileNav() => voidClose the AppShell-managed mobile navigation drawer.
isMobileNavEnabledbooleanWhether AppShell mobile navigation is enabled and managed by AppShell. False when mobileNav is false, there is no nav content, or a fully custom mobileNav slot owns the drawer.
hasAutoTogglebooleanWhether AppShell auto-toggle behavior is enabled. False when mobileNav.hasToggle is set to false; combine with isMobile and isMobileNavEnabled before rendering custom toggles.
hasSideNavbooleanWhether the AppShell has a sideNav slot. Mobile navigation is only managed when there is nav content to show.

The returned object is stable and reactive. Read the fields in a template or a computed and they follow the AppShell as the viewport changes.