Over the course of this past sprint, our team has continued to make more progress in providing a functional side navigation bar for the AMPATH mobile application. In fact, at the very end of this sprint, we found that we now have a minimum viable product for this component! Every member of the team had a part to play in this development.
For this sprint, we divided each section of the side navigation bar component into parts, such that each of us would have a smaller contribution to complete. Each of the roles were as follows: creating skeleton code for the side navigation bar so that it could provide a template for adding styling and further functionality, fixing the toggle button for opening and closing the navigation bar, adding styling and design based on the uniform style for the rest of the app, determining the type of content that will be displayed and navigated to with this bar, and adjusting the scaling of the navigation bar depending on the type of device used to access the application.
Most of these tasks were able to be completed by the end of the sprint! One of the team members created a blank Angular project on GitLab and provided code for a functioning dropdown navigation menu, which was a great template for our next step to creating the navigation bar.
The next step was figuring out the styling and design for the application overall (which would reflect in the navigation bar). This ended up being Angular Material (powered by Google), which is an implementation of Google Material Design that is compatible with Angular applications. Because the wireframes that were provided from the AMPATH team utilized Google Material Design, it made sense to work with this sort of design. So, using the Angular Material Getting Started guide (found here), I followed the 5 steps to change the skeleton Angular project into an Angular Material project. This first involved using the following command to install required packages: npm install –save @angular/material @angular/cdk @angular/animations. Next, the BrowserAnimationsModule was imported into the Angular project such that animations that come with Angular Material would be supported. Then, the NgModules for each of the desired components of the project were also imported. A prebuilt theme was also added, so that all core and theme styles could be incorporated into the application. This required the following statement in the styling sheet: @import ~@angular/material/prebuilt-themes/indigo-pink.css;. Finally, in order to allow for gesture support in the application, the HammerJS library was installed using the following command: npm install –save hammerjs. With all of these steps in place, we had a project with Angular Material! One of my teammates found a useful video tutorial about Angular Material (found here), and this resulted in even further developments on our navigation bar, in terms of better aesthetic, as well as functional pages to navigate to, and a working toggle button!
This upcoming sprint will be devoted more towards adding more features to this working navigation bar, and these will all be discussed in more detail in the next sprint retrospective.
Thanks for reading!