adding latest

temp.md

@@ -796,7 +796,24 @@ We can set two different appbars which can change on the viewport.
 
 You should use `<v-row>`, `<v-col>` and `<v-spacer>` inside the `<v-app-bar>`. You can use the helper classes `hidden-sm-and-down` etc to display a row for different viewports.
 
-<!-- TODO insert link to appbar of base-template -->
+Example of a dynamic appbar:
+<https://git.panaetius.co.uk/web-development/base-examples/src/branch/develop/src/components/Appbar.vue>
+
+### Subcomponents
+
+You can use `<v-toolbar-title>` for a title in the appbar:
+
+```html
+<v-toolbar-title class="title">
+  <p class="mb-0">Savvy Firebase Tutorial</p>
+</v-toolbar-title>
+```
+
+You can use `<v-app-bar-nav-icon>` for a hamburger button (for mobile layouts):
+
+```html
+<v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>
+```
 
 ## To Do
 
@@ -817,3 +834,7 @@ Do buttons: <https://www.gatsbyjs.org>
 
 Doc setting an image as background without transparent appbar
 Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
+
+Tomorrow:
+
+- Finish appbar (modal to popout)