Setup/frontend user identity

apps/site/src/app/layout.tsx

@@ -4,7 +4,7 @@ import Footer from "@/lib/components/Footer/Footer";
 import "./globals.css";
 
 import { Layout } from "@/components/dom/Layout";
-import Navbar from "@/lib/components/Navbar/Navbar";
+import NavbarParent from "@/lib/components/Navbar/NavbarParent";
 
 export const metadata: Metadata = {
 	title: "IrvineHacks 2024",
@@ -26,7 +26,7 @@ export default function RootLayout({
 				className="overflow-x-hidden bg-top bg-repeat-y bg-[length:100%]"
 			>
 				{/* reference: https://github.com/pmndrs/react-three-next */}
-				<Navbar/>
+				<NavbarParent />
 				<Layout>{children}</Layout>
 				<Footer />
 			</body>

apps/site/src/lib/components/Navbar/Navbar.tsx

@@ -1,19 +1,25 @@
 "use client";
 
+import Image from "next/image";
+import React, { useState, useEffect } from "react";
 import * as NavMenu from "@radix-ui/react-navigation-menu";
 
-import styles from "./Navbar.module.scss";
-import React from "react";
-import { useState, useEffect } from "react";
-
 import NavLinkItem from "./NavbarHelpers";
 import Button from "@/lib/components/Button/Button";
 import HackLogo from "@/lib/components/HackLogo/HackLogo";
 
 import hamburger from "@/assets/icons/navigation-icon.svg";
-import Image from "next/image";
+import { Identity } from "@/lib/utils/getUserIdentity";
+
+import styles from "./Navbar.module.scss";
+
+interface NavbarProps {
+	identity: Identity;
+}
+
+function Navbar({ identity }: NavbarProps) {
+	const { uid, role, status } = identity;
 
-function Navbar() {
 	const [listShown, setListShown] = useState(false);
 	const [hasScrolled, setHasScrolled] = useState(false);
 	const [hidden, setHidden] = useState(true);
@@ -27,9 +33,8 @@ function Navbar() {
 
 	return (
 		<NavMenu.Root
-			className={`${
-				hasScrolled ? "md:bg-opacity-50" : ""
-			} transition-colors duration-0 md:duration-700 ease-out w-full z-10 flex flex-col fixed bg-black bg-opacity-0 md:flex-row md:items-center`}
+			className={`${hasScrolled ? "md:bg-opacity-50" : ""
+				} transition-colors duration-0 md:duration-700 ease-out w-full z-10 flex flex-col fixed bg-black bg-opacity-0 md:flex-row md:items-center`}
 		>
 			<NavMenu.List className="bg-black bg-opacity-50 md:bg-opacity-0 flex p-3">
 				<NavLinkItem href="/">
@@ -66,7 +71,19 @@ function Navbar() {
 					<NavLinkItem href="/">Schedule</NavLinkItem>
 					<NavLinkItem href="/">Resources</NavLinkItem>
 					<NavLinkItem href="/">Stage</NavLinkItem> */}
-					<Button text="Login" href="/login" isLightVersion />
+					{!status && <NavLinkItem href="/apply">Apply</NavLinkItem>}
+					{status !== null && (
+						<NavLinkItem href="/portal">Portal</NavLinkItem>
+					)}
+					{uid === null ? (
+						<Button text="Login" href="/login" isLightVersion />
+					) : (
+						<Button
+							text="Logout"
+							href="/api/user/logout"
+							isLightVersion
+						/>
+					)}
 				</NavMenu.List>
 			</div>
 		</NavMenu.Root>

apps/site/src/lib/components/Navbar/NavbarParent.tsx

@@ -0,0 +1,13 @@
+import getUserIdentity from "@/lib/utils/getUserIdentity";
+import Navbar from "./Navbar";
+export interface Identity {
+    uid: string | null;
+    role: string | null;
+    status: string | null;
+}
+
+export default async function NavbarParent() {
+    const identity = await getUserIdentity();
+
+    return <><Navbar identity={identity} /></>
+}

apps/site/src/lib/utils/getUserIdentity.ts

@@ -0,0 +1,12 @@
+import api from "./api";
+
+export interface Identity {
+	uid: string | null;
+	role: string | null;
+	status: string | null;
+}
+
+export default async function getUserIdentity() {
+	const identity = await api.get<Identity>("/user/me");
+	return identity.data;
+}