frontend/src/App.vue

<script setup>
import NavBar from '@/components/Navbar/NavBar.vue'
import Footer from '@/components/Footer/Footer.vue'
</script>

<template>
  <n-config-provider>
    <n-message-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <div class="app-layout">
            <NavBar />
            <div class="main-content">
              <n-grid
                responsive="screen"
                item-responsive
                cols="24"
                :x-gap="16"
                :y-gap="16"
                class="shift"
              >
                <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />

                <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
                  <router-view />
                </n-gi>

                <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
              </n-grid>
            </div>
            <Footer />
          </div>
        </n-notification-provider>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<style scoped>
.shift {
  padding-top: 10px;
}
</style>