Adaptive layouts
What it is
Section titled “What it is”Syndik8 renders the same shell navigation three different ways depending on the width of your viewport. The layout switches automatically — there is no setting to override it.
This matters because the same build runs on phones, tablets, and desktop browsers, and the tab bar at the bottom of a phone would be wasted chrome on a 27-inch monitor.
Who can use it
Section titled “Who can use it”Everyone. There is no per-role or per-user override — layout follows viewport width only.
Where to find it
Section titled “Where to find it”Adaptive layouts apply to both shells:
- Home shell — the four-tab top-level shell.
- Syndicate shell — the five-tab shell inside a syndicate.
Fields / options
Section titled “Fields / options”Syndik8 follows the Material Design 3 window size classes. Breakpoints are measured in device-independent pixels (dp).
| Window class | Viewport width | Layout |
|---|---|---|
| Compact | under 600 dp | Bottom NavigationBar with icon + label per tab. |
| Medium | 600 dp to 1199 dp | Left-hand NavigationRail with icon above label. |
| Expanded | 1200 dp and above | Extended NavigationRail with icon beside label. |
Typical viewports:
- Phone in portrait: compact.
- Phone in landscape, small tablet in portrait: still compact or medium, depending on device.
- iPad in landscape, a resized browser window: medium.
- Desktop browser at full width: expanded.
Behaviour rules
Section titled “Behaviour rules”- The switch is live. Resize the browser window or rotate the device and the shell switches without reloading.
- When navigation is hidden — for example, during onboarding — the rail and the bottom bar are both suppressed.
- The layout rule is global. There is no per-screen or per-user override.
- Tab content is identical across all three layouts. The shell adapts; the tabs themselves do not.
- Tap targets in each layout meet the 48×48 dp minimum regardless of window class.