add About page placeholder and link

src/layouts/default.vue

@@ -1,53 +1,37 @@
 <template>
   <v-app>
     <v-app-bar :absolute="true">
-      <v-app-bar-title>{{ appConfig?.title }}</v-app-bar-title>
+      <router-link to="/">
+        <v-app-bar-title>{{ appConfig?.title }}</v-app-bar-title>
+      </router-link>
+      <v-spacer></v-spacer>
+      <router-link to="/about">
+        <v-btn icon>
+          <v-icon>mdi-information-outline</v-icon>
+          <v-tooltip activator="parent">About</v-tooltip>
+        </v-btn>
+      </router-link>
     </v-app-bar>
     <v-main>
       <router-view />
     </v-main>
-    <div class="sticky-footer">
-      <div v-for="name in indicatorNames">
-        <v-btn link
-                   class="floating-btn mb-2 "
-                   :class="name === selectedIndicator ? 'bg-blue' : 'bg-black'"
-                   rounded="xl"
-                   @click="selectedIndicator = name">{{ name }}
-        </v-btn>
-      </div>
-    </div>
   </v-app>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAppStore } from '../stores/appStore';
 
-// TODO: Indicators floating in footer as options rather than nav drawer
-// TODO: Excel and image download also as footer option in footer rhs
-// TODO: Make preselected regions available as zoom regions - tick state, select bounding box of all selected + selected countries
-// TODO: auto zoom to selected countries on click (if haven't previously selected region?)
 
-const drawer = ref(null);
+// TODO: Excel and image download also as footer option in footer rhs
+// TODO: auto zoom and lock to selected country on click
 
 const { initialiseData }  = useAppStore();
-const { appConfig, selectedIndicator } = storeToRefs(useAppStore());
-
-const indicatorNames = computed(() => appConfig.value ?  Object.keys(appConfig.value.indicators) : {});
+const { appConfig } = storeToRefs(useAppStore());
 
 initialiseData();
 watch(appConfig, () => {
   window.document.title = appConfig.value.title;
 });
 
 </script>
-<style lang="scss">
-.sticky-footer {
-  position: fixed;
-  bottom: 1rem;
-  left: 2rem;
-  background-color: rgba(0,0,0,0);
-  z-index: 999;
-}
-</style>

src/pages/about.vue

@@ -0,0 +1,11 @@
+<template>
+  <p v-if="appConfig" class="ma-4 text-body-1">
+    {{ appConfig.title }} is in development. Check back later for more about the application.
+  </p>
+</template>
+<script setup>
+import {storeToRefs} from "pinia";
+import {useAppStore} from "../stores/appStore";
+
+const { appConfig } = storeToRefs(useAppStore());
+</script>

src/pages/index.vue

@@ -1,7 +1,32 @@
 <template>
   <Choropleth />
+  <div class="sticky-footer">
+    <div v-for="name in indicatorNames">
+      <v-btn link
+             class="floating-btn mb-2 "
+             :class="name === selectedIndicator ? 'bg-blue' : 'bg-black'"
+             rounded="xl"
+             @click="selectedIndicator = name">{{ name }}
+      </v-btn>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-  //
+  import {storeToRefs} from "pinia";
+  import {useAppStore} from "../stores/appStore";
+  import {computed} from "vue";
+
+  const { appConfig, selectedIndicator } = storeToRefs(useAppStore());
+
+  const indicatorNames = computed(() => appConfig.value ?  Object.keys(appConfig.value.indicators) : {});
 </script>
+<style lang="scss">
+.sticky-footer {
+  position: fixed;
+  bottom: 1rem;
+  left: 2rem;
+  background-color: rgba(0,0,0,0);
+  z-index: 999;
+}
+</style>

src/styles/settings.scss

@@ -15,7 +15,14 @@
   cursor: grab;
 }
 
+// Don't show bounding box on click
 .leaflet-container :focus:not(:focus-visible) {
   outline: 0;
 }
 
+// TODO: probably do this through theme once we've decided what to do with those
+.v-toolbar a {
+  color: #fff;
+  text-decoration: none;
+}
+

src/typed-router.d.ts

@@ -19,5 +19,6 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
   }
 }