frontend/src/App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ref } from 'vue'

const state = ref({
  position: 'top-right',
  url: 'https://github.com/xribene',
  background: '#FFF',
  fill: '#0a2050',
})
</script>

<template>
  <div class="app-container">
    <v-github-icon
      :position="state.position"
      :url="state.url"
      :bg-color="state.background"
      :fill-color="state.fill"
    />

    <nav class="navbar">
      <ul class="nav-list">
        <li>
          <RouterLink :to="{ name: 'Home' }">
            Home
          </RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'Analyzer' }">
            Analyzer
          </RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'DrawAndListen' }">
            Draw&Listen
          </RouterLink>
        </li>
      </ul>
    </nav>

    <div class="content">
      <RouterView v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" :key="$route.fullPath" />
        </keep-alive>
      </RouterView>
    </div>
  </div>
</template>

<style scoped>
.app-container {
    display: block;
    flex-direction: column;
    /* align-items: center; */
    margin: 0px;
}

.navbar {
    background-color: var(--background-light2);
    /* margin: 10px; */
    padding: 5px;
    /* padding: 1rem; */
    /* width: 100%; */
    /* margin-left: 10px; */
}

.nav-list {
    list-style: none;
    /* padding: auto; */
    /* margin: 0; */
    display: flex;

    /* background-color: #0a2050; */
}

.nav-list li {
    margin-right: 1rem;
}

.nav-list li a {
    text-decoration: none;
    color: var(--text-color-dark);
    background-color: var(--accent-color2);
    padding: 0.8rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.content {
    /* margin: 2rem; */
    text-align: center;

}
</style>