feat: 💄 basic layout

eslint.config.js

@@ -1,6 +1,5 @@
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import pluginVue from 'eslint-plugin-vue'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 import vueTsEslintConfig from '@vue/eslint-config-typescript'
 
 export default [
@@ -16,7 +15,6 @@ export default [
 
   ...pluginVue.configs['flat/recommended'],
   ...vueTsEslintConfig(),
-  skipFormatting,
   eslintPluginPrettierRecommended,
 
   {

frontend/App.vue

@@ -1,11 +1,41 @@
 <template>
-  <RouterView />
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+        <span class="icon-text">
+          <span class="icon">
+            <i class="fa fa-paper-plane"></i>
+          </span>
+          <span>Pilotwings</span>
+        </span>
+      </a>
+    </div>
+    <div class="navbar-menu">
+      <div class="navbar-start">
+        <a class="navbar-item" :href="`${$api}doc`">
+          <span class="icon-text">
+            <span class="icon">
+              <i class="fa fa-book"></i>
+            </span>
+            <span>API Documentation</span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </nav>
+
+  <section class="section">
+    <div class="container">
+      <RouterView />
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
 import { RouterView } from 'vue-router'
 
 export default {
+  name: 'App',
   components: {
     RouterView,
   },

frontend/main.ts

@@ -1,7 +1,15 @@
+import 'bulma/css/bulma.min.css'
+import 'font-awesome/css/font-awesome.min.css'
 import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router'
 
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $api: string
+  }
+}
+
 const app = createApp(App)
 app.config.globalProperties.$api = import.meta.env.PROD
   ? `${import.meta.env.BASE_URL}api`