Sidebar
The sidebar provides application-level navigation and quick access to top-level content collections in your application. Selecting an item in the sidebar allows users to navigate to a specific piece of content.
Create sidebar
As with any navigation element, it is best to
use the foreground to create the tab bar. This way the tab bar is persistent throughout the application and you can use the states to represent the selection of each icon.
Go to the foreground.
Design sidebar
In the first state, prepare your sidebar when it is hidden. By creating a new state, you'll create the opening effect of this sidebar thanks to the transitions.
Import the graphic elements of your sidebar: the background bar and the icons (menu, close). For the background bar, you can use a Shape. Insert text blocks.
Create link to each screen
Above each text, add an Interactive Zone component, which allows you to expand the tap area. Link the Go to screen action to the right screen.
Create the opening effect of the sidebar
Create a new state linked to the previous one to keep the links and transitions. Move your sidebar elements to the left side of the screen.
Return to the previous state and select the menu icon. Create the
Go to foreground >
Display sidebar action.
Associate foreground to screens
At the screen level, go to the
Properties window and select the foreground in which the sidebar is hidden. The sidebar can only be opened by clicking on the menu.
