Header Component

[sandilsranasinghe]

Create a header component. The following needs to be done

• [x] Create file with template for header components/AppHeader.vue
  • We'll probably need a separate template file for the menu, components/AppHeaderMenu.vue
• [x] Include containers for the relevant children (logo, menu - shown in wireframes) and position them
• [x] Create Menu
  • Use a list to render menu items (https://vuejs.org/guide/essentials/list.html#v-for) Make it a prop for the component.
  • Create a function and bind it to the onclick. Add logic to change active menu item
  • Has to be responsive so we might want to use some of bootstraps navbar classes (add the bootstrap css files from a cdn for now)
  • Keep styling minimum for now (only what is required for positioning and functionality). Use scoped styles.
  • Once routing is setup #4 we will need to use router links here
• [x] Make sure that everything is responsive for laptop and mobile screensizes

Normal

Mobile

[sandilsranasinghe]

Since we don't have a pagelayout created yet, you might have to make a sample page and put the header in there to see what it looks like on a page