adding latest

firebase.md

@@ -163,5 +163,106 @@ If you want to apply a fade gradient colour on top of the image, you should use
 
 If you want to just use a gradient (no img), then apply a solid colour image and then use a scoped slot with the gradient you want.
 
+## Router
 
-To do
+When linking to routes, you should use `<router-link>`:
+
+```html
+<router-link :to="{ name: 'Login' }">
+    <span class="mr-3">Sign In</span>
+</router-link>
+```
+
+You can apply transitions on a route change:
+
+```html
+<transition name="slide">
+    <router-view></router-view>
+</transition>
+```
+
+## vue-responsive-video-background-player
+
+<https://github.com/avidofood/vue-responsive-video-background-player>
+
+yarn add vue-responsive-video-background-player
+
+ffmpeg -an -i Optical\ Fibers\ 1.mov -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 optical.mp4
+
+<https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation>
+
+If using the public folder (not `./assets`) then follow these instructions:
+<https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder>
+
+For videos in ./assets do the following:
+
+```javascript
+export default {
+  data() {
+    return {
+      video: require("../assets/videos/optical.mp4")
+    }
+  },
+};
+```
+
+and reference it in the component:
+
+```html
+<video-background :src="video" style=" height: 100vh;"> </video-background>
+```
+
+This is done this way because webpack will apply custom names to the assets - this is so it can handle caching.
+
+You can find full props to customise the video:
+<https://github.com/avidofood/vue-responsive-video-background-player#props>
+
+You can set a gradient to the image to improve visibility:
+
+```javascript
+    style=" height: 100vh;"
+    overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
+```
+
+## Dynamically hide app bar
+
+Use the Vuex store to determine when you want to hide the app bar:
+
+```javascript
+  state: {
+    fullScreen: false
+  },
+  getters: {
+    fullScreen: state => {
+      return state.fullScreen
+    }
+  },
+  mutations: {
+    fullScreen(state, fullScreen) {
+      state.fullScreen = fullScreen;
+    }
+  },
+  ```
+
+and create the lifecycle actions in the component that houses the appbar:
+
+```javascript
+  created () {
+    this.$store.commit("fullScreen", true);
+  },
+  beforeDestroy () {
+    this.$store.commit("fullScreen", false);
+  },
+```
+
+Then you can wrap the appbar in a `v-if`:
+
+```html
+    <v-app-bar
+      flat
+      app
+      class="hidden-sm-and-down"
+      color="#EEEEEE"
+      v-if="!this.$store.getters.fullScreen"
+    >
+```