diff --git a/src/assets/styles/nav.css b/src/assets/styles/nav.css
new file mode 100644
index 0000000..ad9669c
--- /dev/null
+++ b/src/assets/styles/nav.css
@@ -0,0 +1,126 @@
+/* Desktop navigation - visible on medium screens and up */
+.desktop-nav {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ .desktop-nav {
+ display: flex;
+ }
+}
+
+/* Mobile navigation - visible below medium screens */
+.mobile-nav {
+ display: flex;
+}
+
+@media (min-width: 768px) {
+ .mobile-nav {
+ display: none;
+ }
+}
+
+/* Mobile menu dropdown */
+.mobile-menu-dropdown {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+ opacity: 0;
+}
+
+.mobile-menu-dropdown.open {
+ max-height: 500px;
+ opacity: 1;
+}
+
+@media (min-width: 768px) {
+ .mobile-menu-dropdown {
+ display: none;
+ }
+}
+
+nav {
+ transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.nav-bar-row {
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .desktop-nav {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ margin-left: 2rem;
+ gap: clamp(0.75rem, 1.5vw, 1.25rem);
+ }
+}
+
+.desktop-nav-list {
+ display: flex;
+ flex: 1;
+ justify-content: flex-end;
+ align-items: center;
+ gap: clamp(0.75rem, 1.5vw, 1.25rem);
+ margin: 0;
+ padding: 0;
+}
+
+.desktop-nav-list li {
+ flex-shrink: 1;
+}
+
+.desktop-nav-list a {
+ white-space: nowrap;
+}
+
+.nav-user-inline {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.3rem 0.85rem;
+ border-radius: 999px;
+ border: 1px solid rgba(148, 163, 184, 0.4);
+ font-size: 0.82rem;
+ font-weight: 500;
+ color: #1e293b;
+ background: linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.85));
+ box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+[data-theme="dark"] .nav-user-inline {
+ color: #f1f5f9;
+ border-color: rgba(59, 130, 246, 0.25);
+ background: linear-gradient(120deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.7));
+ box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.nav-user-inline__icon {
+ display: inline-flex;
+ width: 0.95rem;
+ height: 0.95rem;
+ color: inherit;
+}
+
+.nav-user-inline__icon svg {
+ width: 100%;
+ height: 100%;
+}
+
+.nav-user-inline__label {
+ text-transform: uppercase;
+ font-size: 0.65rem;
+ letter-spacing: 0.08em;
+ opacity: 0.8;
+}
+
+.nav-user-inline__name {
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.nav-user-inline--mobile {
+ margin: 0.75rem 0;
+}
diff --git a/src/components/TRip/MediaRequestForm.jsx b/src/components/TRip/MediaRequestForm.jsx
index 2ae9d7e..5acf1bf 100644
--- a/src/components/TRip/MediaRequestForm.jsx
+++ b/src/components/TRip/MediaRequestForm.jsx
@@ -6,6 +6,7 @@ import { AutoComplete } from "primereact/autocomplete";
import { authFetch } from "@/utils/authFetch";
import BreadcrumbNav from "./BreadcrumbNav";
import { API_URL, ENVIRONMENT } from "@/config";
+import "./MediaRequestForm.css";
export default function MediaRequestForm() {
const [type, setType] = useState("artist");
diff --git a/src/layouts/Nav.astro b/src/layouts/Nav.astro
index 13a32aa..1aad17b 100644
--- a/src/layouts/Nav.astro
+++ b/src/layouts/Nav.astro
@@ -1,29 +1,22 @@
---
import { metaData, API_URL } from "../config";
import { Icon } from "astro-icon/components";
+import { requireAuthHook } from "@/hooks/requireAuthHook";
+import { padlockIconSvg, userIconSvg, externalLinkIconSvg } from "@/utils/navAssets";
+import "@/assets/styles/nav.css";
-const isLoggedIn = Boolean(Astro.cookies.get('access_token') || Astro.cookies.get('refresh_token'));
+const user = await requireAuthHook(Astro);
+const isLoggedIn = Boolean(user);
+const userDisplayName = user?.user ?? null;
+const userInitial = userDisplayName ? String(userDisplayName).charAt(0).toUpperCase() : '?';
-const padlockIconSvg = `
-
-`;
-
-const externalLinkIconSvg = `
-
-`;
const navItems = [
{ label: "Home", href: "/" },
{ label: "Radio", href: "/radio" },
{ label: "Memes", href: "/memes" },
+ { label: "TRip", href: "/TRip", auth: true, icon: "pirate" },
{ label: "Lighting", href: "/lighting", auth: true },
- { label: "TRip", href: "/TRip", auth: true, icon: "pirate" },
{ label: "Status", href: "https://status.boatson.boats", icon: "external" },
{ label: "Git", href: "https://kode.boatson.boats", icon: "external" },
{ label: "Login", href: "/login", guestOnly: true },
@@ -102,6 +95,13 @@ const currentPath = Astro.url.pathname;
})}
+ {isLoggedIn && userDisplayName && (
+
+
+ {userDisplayName}
+
+ )}
+