useAppShellMobile
@astryxdesign/core v0.7.1 · useAppShellMobile
Returns
| Name | Type | Description |
|---|---|---|
isMobile | boolean | Whether 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. |
isMobileNavOpen | boolean | Whether the AppShell-managed mobile navigation drawer is open. |
mobileNavId | string | undefined | DOM 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 | () => void | Toggle the AppShell-managed mobile navigation drawer. No-ops when mobile nav is disabled. |
openMobileNav | () => void | Open the AppShell-managed mobile navigation drawer. No-ops when mobile nav is disabled. |
closeMobileNav | () => void | Close the AppShell-managed mobile navigation drawer. |
isMobileNavEnabled | boolean | Whether 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. |
hasAutoToggle | boolean | Whether AppShell auto-toggle behavior is enabled. False when mobileNav.hasToggle is set to false; combine with isMobile and isMobileNavEnabled before rendering custom toggles. |
hasSideNav | boolean | Whether 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.