BrainBlast/src/App.vue

<template>
  <v-app>
    <v-system-bar>
      <v-icon icon="mdi-wifi-strength-4"></v-icon>
      <v-icon icon="mdi-signal" class="ms-2"></v-icon>
      <v-icon icon="mdi-battery" class="ms-2"></v-icon>

      <span class="ms-2">3:14AM</span>
    </v-system-bar>
    <v-app-bar :elevation="12">
      <template v-slot:prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>

      <v-app-bar-title>Brain Blast</v-app-bar-title>

      <template v-slot:append>
        <v-btn @click="toggleTheme">Toggle Theme</v-btn>
        <v-btn icon="mdi-heart"></v-btn>

        <v-btn icon="mdi-magnify"></v-btn>

        <v-btn icon="mdi-dots-vertical"></v-btn>
      </template>
    </v-app-bar>
    <v-navigation-drawer>
      <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
      <v-divider></v-divider>
      <v-list-item link title="List Item 1"></v-list-item>
      <v-list-item link title="List Item 2"></v-list-item>
      <v-list-item link title="List Item 3"></v-list-item>
    </v-navigation-drawer>
    <v-main>
      <HelloWorld msg="PIGNOUF ! " />
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
      <RouterLink to="/mqtt-debugger">MQTT Debugger</RouterLink>

      <RouterView />
    </v-main>
    <v-footer :elevation=12 border><v-row justify="center">ASCO - Fablab</v-row></v-footer>
  </v-app>
</template>

<script setup>
  import { useTheme } from 'vuetify'

  const theme = useTheme()

  function toggleTheme () {
    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
  }
</script>