From 5a31d869698709472514a8dd7a01e21f1eb09f54 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sun, 30 Nov 2025 18:55:41 -0500
Subject: [PATCH] Split navbar from main app

---
 ui/src/App.vue                          | 107 ++----------------------
 ui/src/components/Navigation/Navbar.vue |  98 ++++++++++++++++++++++
 ui/src/pages/Homepage.vue               |  25 +++---
 ui/src/router/index.js                  |  16 ++--
 4 files changed, 124 insertions(+), 122 deletions(-)
 create mode 100644 ui/src/components/Navigation/Navbar.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 26b6dd5..87bd1f1 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,41 +1,13 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router';
-import Separator from './components/ui/separator/Separator.vue';
+import { RouterView } from 'vue-router';
 import Button from './components/ui/button/Button.vue';
-import { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './components/ui/dropdown-menu';
-import { onMounted } from 'vue';
 import { useUserStore } from './stores/user';
 import Alert from './components/ui/alert/Alert.vue';
 import AlertDescription from './components/ui/alert/AlertDescription.vue';
+import Navbar from './components/Navigation/Navbar.vue';
 
 const userStore = useUserStore();
 
-// onMounted(async () => {
-//   const res = await fetch(`${import.meta.env.VITE_APIHOST}/members/me`, {
-//     credentials: 'include',
-//   });
-//   const data = await res.json();
-//   console.log(data);
-//   userStore.user = data;
-// });
-const APIHOST = import.meta.env.VITE_APIHOST;
-
-async function logout() {
-  // await fetch(`${APIHOST}/logout`, {
-  //   method: 'GET',
-  //   credentials: 'include',
-  // });
-
-  userStore.user = null;
-  window.location.href = APIHOST + "/logout";
-}
-
 function formatDate(dateStr) {
   if (!dateStr) return "";
   return new Date(dateStr).toLocaleDateString("en-US", {
@@ -49,77 +21,8 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
 </script>
 
 <template>
-  <div>
-    <div class="flex items-center justify-between px-10">
-      <div></div>
-      <div class="h-15 flex items-center justify-center gap-20">
-        <RouterLink to="/">
-          <Button variant="link">Home</Button>
-        </RouterLink>
-        <RouterLink to="/calendar">
-          <Button variant="link">Calendar</Button>
-        </RouterLink>
-        <RouterLink to="/members">
-          <Button variant="link">Members</Button>
-        </RouterLink>
-        <Popover>
-          <PopoverTrigger as-child>
-            <Button variant="link">Forms</Button>
-          </PopoverTrigger>
-          <PopoverContent class="flex flex-col gap-4 items-center w-min">
-            <RouterLink to="/transfer">
-              <Button variant="link">Transfer Request</Button>
-            </RouterLink>
-            <RouterLink to="/trainingReport">
-              <Button variant="link">Training Report</Button>
-            </RouterLink>
-          </PopoverContent>
-        </Popover>
-        <Popover>
-          <PopoverTrigger as-child>
-            <Button variant="link">Administration</Button>
-          </PopoverTrigger>
-          <PopoverContent class="flex flex-col gap-4 items-center w-min">
-            <RouterLink to="/administration/rankChange">
-              <Button variant="link">Promotions</Button>
-            </RouterLink>
-            <RouterLink to="/administration/loa">
-              <Button variant="link">Leave of Absence</Button>
-            </RouterLink>
-            <RouterLink to="/administration/transfer">
-              <Button variant="link">Transfer Requests</Button>
-            </RouterLink>
-            <RouterLink to="/administration/applications">
-              <Button variant="link">Recruitment</Button>
-            </RouterLink>
-            <RouterLink to="/administration/roles">
-              <Button variant="link">Role Management</Button>
-            </RouterLink>
-          </PopoverContent>
-        </Popover>
-
-      </div>
-      <div>
-        <DropdownMenu v-if="userStore.isLoggedIn">
-          <DropdownMenuTrigger class="cursor-pointer">
-            <p>{{ userStore.user.name }}</p>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem>My Profile</DropdownMenuItem>
-            <DropdownMenuItem>Settings</DropdownMenuItem>
-            <DropdownMenuItem>
-              <RouterLink to="/loa">
-                Submit LOA
-              </RouterLink>
-            </DropdownMenuItem>
-            <DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        <a v-else :href="APIHOST + '/login'">Login</a>
-      </div>
-    </div>
-    <Separator></Separator>
+  <div class="flex flex-col min-h-screen">
+    <Navbar class="flex"></Navbar>
     <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
       <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
         <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
@@ -132,7 +35,7 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
       </AlertDescription>
     </Alert>
 
-    <RouterView class=""></RouterView>
+    <RouterView class="flex-1 min-h-0"></RouterView>
   </div>
 </template>
 
diff --git a/ui/src/components/Navigation/Navbar.vue b/ui/src/components/Navigation/Navbar.vue
new file mode 100644
index 0000000..2d422cc
--- /dev/null
+++ b/ui/src/components/Navigation/Navbar.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import Separator from '../ui/separator/Separator.vue';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import { useUserStore } from '@/stores/user';
+import Button from '../ui/button/Button.vue';
+
+
+const userStore = useUserStore();
+
+//@ts-ignore
+const APIHOST = import.meta.env.VITE_APIHOST;
+
+async function logout() {
+    userStore.user = null;
+    window.location.href = APIHOST + "/logout";
+}
+</script>
+
+<template>
+    <div class="w-full border-b">
+        <div class="max-w-screen-xl mx-auto flex items-center justify-between px-10">
+            <div class="flex items-center">
+                <RouterLink to="/">
+                    <Button variant="link">Home</Button>
+                </RouterLink>
+                <div class="h-15 flex items-center justify-center">
+                    <RouterLink to="/calendar">
+                        <Button variant="link">Calendar</Button>
+                    </RouterLink>
+                    <RouterLink to="/members">
+                        <Button variant="link">Members</Button>
+                    </RouterLink>
+                    <Popover>
+                        <PopoverTrigger as-child>
+                            <Button variant="link">Forms</Button>
+                        </PopoverTrigger>
+                        <PopoverContent class="flex flex-col gap-4 items-center w-min">
+                            <RouterLink to="/transfer">
+                                <Button variant="link">Transfer Request</Button>
+                            </RouterLink>
+                            <RouterLink to="/trainingReport">
+                                <Button variant="link">Training Report</Button>
+                            </RouterLink>
+                        </PopoverContent>
+                    </Popover>
+                    <Popover>
+                        <PopoverTrigger as-child>
+                            <Button variant="link">Administration</Button>
+                        </PopoverTrigger>
+                        <PopoverContent class="flex flex-col gap-4 items-center w-min">
+                            <RouterLink to="/administration/rankChange">
+                                <Button variant="link">Promotions</Button>
+                            </RouterLink>
+                            <RouterLink to="/administration/loa">
+                                <Button variant="link">Leave of Absence</Button>
+                            </RouterLink>
+                            <RouterLink to="/administration/transfer">
+                                <Button variant="link">Transfer Requests</Button>
+                            </RouterLink>
+                            <RouterLink to="/administration/applications">
+                                <Button variant="link">Recruitment</Button>
+                            </RouterLink>
+                            <RouterLink to="/administration/roles">
+                                <Button variant="link">Role Management</Button>
+                            </RouterLink>
+                        </PopoverContent>
+                    </Popover>
+                </div>
+            </div>
+            <div>
+                <DropdownMenu v-if="userStore.isLoggedIn">
+                    <DropdownMenuTrigger class="cursor-pointer">
+                        <p>{{ userStore.user.name }}</p>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuItem>My Profile</DropdownMenuItem>
+                        <DropdownMenuItem>Settings</DropdownMenuItem>
+                        <DropdownMenuItem>
+                            <RouterLink to="/loa">
+                                Submit LOA
+                            </RouterLink>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+                <a v-else :href="APIHOST + '/login'">Login</a>
+            </div>
+        </div>
+        <!-- <Separator></Separator> -->
+    </div>
+</template>
\ No newline at end of file
diff --git a/ui/src/pages/Homepage.vue b/ui/src/pages/Homepage.vue
index 739d09e..ec8a114 100644
--- a/ui/src/pages/Homepage.vue
+++ b/ui/src/pages/Homepage.vue
@@ -13,17 +13,18 @@ function goToApplication() {
 </script>
 
 <template>
-    <div v-if="user.state == 'guest'"
-        class="min-h-screen flex flex-col items-center justify-center text-center bg-neutral-950 text-white px-4">
-        <h1 class="text-4xl font-bold mb-4">Welcome to the 17th</h1>
-        <p class="text-neutral-400 mb-8 max-w-md">
-            To join our unit, please fill out an application to continue.
-        </p>
-        <Button @click="goToApplication" class="px-6 py-3 text-lg">
-            Begin Application
-        </Button>
-    </div>
-    <div v-else>
-        HOMEPAGEEEEEEEEEEEEEEEEEEE
+    <div>
+        <div v-if="user.state == 'guest'" class="flex flex-col items-center justify-center">
+            <h1 class="text-4xl font-bold mb-4">Welcome to the 17th</h1>
+            <p class="text-neutral-400 mb-8 max-w-md">
+                To join our unit, please fill out an application to continue.
+            </p>
+            <Button @click="goToApplication" class="px-6 py-3 text-lg">
+                Begin Application
+            </Button>
+        </div>
+        <div v-else>
+            HOMEPAGEEEEEEEEEEEEEEEEEEE
+        </div>
     </div>
 </template>
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 2beaec0..f6230ae 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -63,15 +63,15 @@ router.beforeEach(async (to) => {
   }
 
 
-  // // Must be a member
-  // if (to.meta.memberOnly && user.state !== 'member') {
-  //   return '/unauthorized'
-  // }
+  // Must be a member
+  if (to.meta.memberOnly && user.state !== 'member') {
+    return '/unauthorized'
+  }
 
-  // // Must have specific role
-  // if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) {
-  //   return '/unauthorized'
-  // }
+  // Must have specific role
+  if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) {
+    return '/unauthorized'
+  }
 })
 
 export default router;
\ No newline at end of file