separate how it works

src/corp/MenuBar.vue

@@ -3,10 +3,11 @@
 <!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
 
     <v-app-bar-title>
-      <logo/>
+      <logo @click="nav('Home')" class="clickable"/>
     </v-app-bar-title>
 
-    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn>
+    <v-btn @click="nav('HowItWorks')" prepend-icon="mdi-information-outline" text="How It Works"/>
+    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp" text="Launch App"/>
 
   </v-app-bar>
 </template>
@@ -14,6 +15,7 @@
 <script setup>
 import {useTheme} from "vuetify";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
 
 const theme = useTheme().current