Now that we have our PageComponent working, it's time to add functionality to the bottom navigation. For this, the first thing that we will do is to create a function that will hide and show the necessary elements so that the App Bar and the bottom navigation represent the view in which we are. The function will show the elements of one or the other view according to a parameter that we will have to pass on the call.

The function we created first puts all the elements of the bottom navigation in the deselected state, making the gray state of each one visible and hiding all the elements of the App Bar from all the views.

After analyzing the parameter that we passed to the function with a switch structure, and according to the view that we have said is visible, it will hide the unselected state of the bottom navigation in the corresponding view, showing its blue state, which represents the selected state. It will also show the elements of the App Bar corresponding to that view:

# CHANGE VIEW FUNCTIONALITY
# Change View Function
changeView = (view) ->
    sketch.Find_Blue.opacity = 0
    sketch.Find_Grey.opacity = 1
    sketch.Calendar_Blue.opacity = 0
    sketch.Calendar_Grey.opacity = 1
    sketch.Contacts_Blue.opacity = 0
    sketch.Contacts_Grey.opacity = 1
    sketch.Messages_Blue.opacity = 0
    sketch.Messages_Grey.opacity = 1
    sketch.Find_App_Bar.opacity = 0
    sketch.Calendar_App_Bar.opacity = 0
    sketch.Contacts_App_Bar.opacity = 0
    sketch.Messages_App_Bar.opacity = 0
    switch view
        when 'find'
            sketch.Find_Blue.opacity = 1
            sketch.Find_Grey.opacity = 0
            sketch.Find_App_Bar.opacity = 1
        when 'calendar'
            sketch.Calendar_Blue.opacity = 1
            sketch.Calendar_Grey.opacity = 0
            sketch.Calendar_App_Bar.opacity = 1
        when 'contacts'
            sketch.Contacts_Blue.opacity = 1
            sketch.Contacts_Grey.opacity = 0
            sketch.Contacts_App_Bar.opacity = 1
        else
            sketch.Messages_Blue.opacity = 1
            sketch.Messages_Grey.opacity = 0
            sketch.Messages_App_Bar.opacity = 1
changeView 'find'

After the function definition, we initialize our prototype with the Find view. Therefore, the Calendar, Contact, and Messages views will show their gray tab in the bottom navigation and have their items hidden in the App Bar.

With all these elements, we only need to relate the state of the PageComponent with the bottom navigation. To do this, the first thing we will do is to select the page chosen by the user when tapping on an element of the bottom navigation. Each time the user taps on an element of the bottom navigation, we will call page.snapToPage, indicating the page to which it should move. As argument, we will tell the name of the layer to which we want it to move:

# BOTTOM NAVIGATION
# Bottom Navigation Behaviour
sketch.Find_Blue.on Events.Tap, ->
    page.snapToPage(sketch.scrollFind)
    changeView 'find'
sketch.Calendar_Blue.on Events.Tap, ->
    page.snapToPage(sketch.Calendar)
    changeView 'calendar'
sketch.Contacts_Blue.on Events.Tap, ->
    page.snapToPage(sketch.Contacts)
    changeView 'contacts'
sketch.Messages_Blue.on Events.Tap, ->
    page.snapToPage(sketch.Messages)
    changeView 'messages'

Note that in addition to the changes to the PageComponent, we have also added a call to our changeView function so that the bottom navigation also represents the new status of our prototype.

Currently, our bottom navigation allows us to navigate between the different layers that we have added to the PageComponent.

Finally, we also want the new state reflected in the bottom navigation area when the user changes page by swiping on the PageComponent. To do this, we will add a listener to the PageComponent.

# Page Behaviour Control
page.on "change:currentPage", ->
    if page.currentPage == scrollFind
        changeView 'find'
    if page.currentPage == sketch.Calendar
        changeView 'calendar'
    if page.currentPage == sketch.Contacts
        changeView 'contacts'
    if page.currentPage == sketch.Messages
        changeView 'messages'

With this, we will have the basic structure of our application making use of the page component.