App Tabs

<AppTabs action={tabAction} tabs={tabLinks} menu={demoMenu}>
	<h4>Headline</h4>

	<p>This is normal text in the app.</p>
</AppTabs>

Primary navigation for the application that responds to the container width, going from a bottom tab bar to leading-side navigation.

On small screens, the icons are fixed to the bottom of the screen with the action in the middle:

At 45rem, the icons move to the leading side with the action at the end and menu at the bottom.

At 60rem, visible labels are added.

The component uses container queries, so it can be used for side-panel navigation as well and will respond accordingly. If this is the global navigation, adding the global prop will make the component full-height as well as adding some padding at the end to clear the iPhone home indicator. (See this site to see it in action. 😎)