main.component.html

<SymMainActionBar [title]="actionBarTitle"></SymMainActionBar>

<GridLayout rows="*, auto">
    <GridLayout row="0">
        <StackLayout [visibility]="selectedTab === NavigationTab.Progress ? 'visible' : 'collapsed'">
            <SymProgressContainer></SymProgressContainer>
        </StackLayout>
        <StackLayout [visibility]="selectedTab === NavigationTab.Places ? 'visible' : 'collapsed'">
            <SymPlacesContainer></SymPlacesContainer>
        </StackLayout>
        <StackLayout [visibility]="selectedTab === NavigationTab.Content ? 'visible' : 'collapsed'">
            <SymContentContainer></SymContentContainer>
        </StackLayout>
        <StackLayout [visibility]="selectedTab === NavigationTab.Notifications ? 'visible' : 'collapsed'">
            <SymNotificationsList></SymNotificationsList>
        </StackLayout>
    </GridLayout>
    <BottomNavigationBar
            row="1"
            (loaded)="onNavigationBarLoaded($event)"
            (unloaded)="onNavigationBarUnloaded()"
            (tabSelected)="onTabSelected($event)">
        <BottomNavigationTab title="Progreso" icon="res://round_double_arrow_black_24"></BottomNavigationTab>
        <BottomNavigationTab title="Lugares" icon="res://round_map_black_24"></BottomNavigationTab>
        <BottomNavigationTab title="Contenido" icon="res://round_library_books_black_24"></BottomNavigationTab>
        <BottomNavigationTab title="Notificaciones" icon="res://round_notifications_black_24"></BottomNavigationTab>
    </BottomNavigationBar>
</GridLayout>
<SymActivityIndicator *ngIf="isBusy"></SymActivityIndicator>