Navigating Firesub

This article will show you how to navigate the Firesub app. It will teach you the basic layout concept and the name of the modules so you can can find what you are looking for with ease.

In this example we are viewing the team page. And what you see here is the the complete Page with all it's layout modules.


The part marked in blue is called the main content. This is where the all the essential data is being displayed. In this case a list of templates is displayed.

The top part of the page is called the header this is where all detail data is displayed. In this case you see the team name "Demo", all members of the team, the icon on the right of the team members indicate total checklists in progress within the team.

The sidebar is the main navigation module and is always accessible, on bigger screens it is always visible, and on smaller screens like smartphones you can access it by clicking the "hamburger menu" icon.

The sidebar contains navigation to your profile page, in progress (checklists you are working on), support page, and all your teams you are a member of. You can also access your personal settings from the Settings navigation.


On most of the pages you can find a action menu on the top right corner, it is a icon with 3 vertical dots. This menu displays all the actions you can perform for the current page. In this case you can filter the list of templates, add new templates to the team, add team members, leave the team or go to team settings.

On each item in the list in the main content module, there is a small icon on the right side called action bar.

This let's you perform actions on the specific object in the row. In this case with the list of templates you can directly access different actions without having to go to the template page.


There is also a layout module called flyout wich is a view that will "fly" in to the page from the right and contain additional information or actions.

The flyout is used when you need to stay on the page you are currently viewing but want to perform some actions or view some additional details for an object. In this case of you clicked on the action bar and clicked on Start checklist, a flyout would be displayed with the actions to start a new checklist from that template all without ever leaving the team page.