Adds in authentication system and overhauls the navigation bar to be built dynamically.

src/stores/auth.js

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+import axios from 'axios';
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    isAuthenticated: false,
+    user: null,
+    loading: false, // Optional: track loading state
+    error: null, // Optional: track errors
+  }),
+  actions: {
+    async checkAuthStatus() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const res = await axios.get('/auth/check-auth');
+        if (res.data.isAuthenticated) {
+          this.isAuthenticated = true;
+          this.user = res.data.user;
+        } else {
+          this.isAuthenticated = false;
+          this.user = null;
+        }
+      } catch (error) {
+        console.error('Failed to check authentication status:', error);
+        this.error = 'Could not verify login status.';
+        this.isAuthenticated = false;
+        this.user = null;
+      } finally {
+        this.loading = false;
+      }
+    },
+    // Action to manually set user as logged out (e.g., after logout)
+    logout() {
+      this.isAuthenticated = false;
+      this.user = null;
+    }
+  },
+});

src/stores/index.js

@@ -0,0 +1,20 @@
+import { defineStore } from '#q-app/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default defineStore((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})