From 11e707f8502f6987d82b104c7fc71877cc2750e8 Mon Sep 17 00:00:00 2001
From: Hannah Storer <storer.h@northeastern.edu>
Date: Tue, 14 Apr 2026 15:31:45 -0400
Subject: [PATCH 1/2] Added logout button to nav bar

---
 .../navigation/app-navbar/index.tsx           | 53 +++++++++++++++----
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/web/src/components/navigation/app-navbar/index.tsx b/web/src/components/navigation/app-navbar/index.tsx
index 4f283d12..27f6193c 100644
--- a/web/src/components/navigation/app-navbar/index.tsx
+++ b/web/src/components/navigation/app-navbar/index.tsx
@@ -6,6 +6,10 @@ import { usePathname } from "next/navigation";
 import { icons } from "@/components/icons";
 import { Protected } from "@/components/rbac/Protected";
 import { cn } from "@/lib/utils";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { LogOut } from "lucide-react";
 
 type NavItem = {
   id: number;
@@ -56,7 +60,7 @@ const AppNavBarItem = ({
               : "bg-primary-dark hover:bg-accent"
           } group-hover:-translate-y-2`}
       >
-        <Icon className="h-6 w-6 text-background" />
+        <Icon className="h-5 w-5 text-background" />
         <span
           className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50"
           role="presentation"
@@ -86,8 +90,21 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
   const isBroadcastsActive = pathname.startsWith("/broadcasts");
   const isCreateBroadcastActive = pathname.startsWith("/broadcasts/new");
 
+  const router = useRouter();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleSignOut = async () => {
+    setIsSigningOut(true);
+  const res = await authClient.signOut();
+    if (res.error) {
+      setIsSigningOut(false);
+      return;
+    }
+    router.replace("/login");
+  };
+
   const circleButtonClasses =
-    "group relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-200 overflow-visible";
+    "group relative flex h-11 w-11 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-200 overflow-visible";
 
   return (
     <nav
@@ -114,7 +131,7 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
           />
         </Link>
 
-        <ul className="mt-6 flex flex-col items-center gap-5">
+        <ul className="mt-4 flex flex-col items-center gap-5">
           {navItems.map((item) => (
             <AppNavBarItem
               key={item.id}
@@ -126,9 +143,8 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
         </ul>
       </div>
 
-      <div className="mt-8 flex w-full flex-1 min-h-0 flex-col items-center overflow-hidden">
-        <div className="mt-auto flex w-full shrink min-h-0 flex-col items-center gap-4 pb-20">
-          <Protected requiredRole="broadcast:create">
+      <div className="mt-2 flex w-full flex-1 min-h-0 flex-col items-center overflow-hidden">
+          <div className="mt-4 flex w-full shrink min-h-0 flex-col items-center gap-2 pb-4">          <Protected requiredRole="broadcast:create">
             <Link
               href="/broadcasts/new"
               aria-label="Create broadcast"
@@ -141,7 +157,7 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
               )}
               onClick={onNavigate}
             >
-              <MegaphoneIcon className="h-6 w-6" aria-hidden="true" />
+              <MegaphoneIcon className="h-5 w-5" aria-hidden="true" />
               <span className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50">
                 Broadcast
               </span>
@@ -160,7 +176,7 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
             )}
             onClick={onNavigate}
           >
-            <BellIcon className="h-6 w-6" aria-hidden="true" />
+            <BellIcon className="h-5 w-5" aria-hidden="true" />
             <span className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50">
               Active Broadcasts
             </span>
@@ -177,7 +193,7 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
             )}
             onClick={onNavigate}
           >
-            <HelpIcon className="h-6 w-6" />
+            <HelpIcon className="h-5 w-5" />
             <span className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50">
               Help
             </span>
@@ -196,7 +212,7 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
               )}
               onClick={onNavigate}
             >
-              <AdminIcon className="h-6 w-6" />
+              <AdminIcon className="h-5 w-5" />
               <span className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50">
                 Admin
               </span>
@@ -215,11 +231,26 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
             )}
             onClick={onNavigate}
           >
-            <ProfileIcon className="h-6 w-6" strokeWidth={2} />
+            <ProfileIcon className="h-5 w-5" strokeWidth={2} />
             <span className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50">
               Profile
             </span>
           </Link>
+          <button
+            type="button"
+            aria-label="Log out"
+            disabled={isSigningOut}
+            onClick={() => void handleSignOut()}
+            className={cn(
+              circleButtonClasses,
+              "border-primary bg-accent text-primary hover:bg-error hover:border-error hover:text-background",
+            )}
+          >
+            <LogOut className="h-5 w-5" aria-hidden="true" />
+            <span className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50">
+              Log out
+          </span>
+        </button>
         </div>
       </div>
     </nav>

From c47f36b878214d856b5e9fb25661f00797171fa2 Mon Sep 17 00:00:00 2001
From: Hannah Storer <storer.h@northeastern.edu>
Date: Tue, 14 Apr 2026 16:46:12 -0400
Subject: [PATCH 2/2] Fixed checks

---
 .../navigation/app-navbar/index.tsx           | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/web/src/components/navigation/app-navbar/index.tsx b/web/src/components/navigation/app-navbar/index.tsx
index 27f6193c..9616f5cb 100644
--- a/web/src/components/navigation/app-navbar/index.tsx
+++ b/web/src/components/navigation/app-navbar/index.tsx
@@ -1,15 +1,14 @@
 "use client";
+import { LogOut } from "lucide-react";
 import type { Route } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
 import { icons } from "@/components/icons";
 import { Protected } from "@/components/rbac/Protected";
-import { cn } from "@/lib/utils";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 import { authClient } from "@/lib/auth-client";
-import { LogOut } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 type NavItem = {
   id: number;
@@ -95,7 +94,7 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
 
   const handleSignOut = async () => {
     setIsSigningOut(true);
-  const res = await authClient.signOut();
+    const res = await authClient.signOut();
     if (res.error) {
       setIsSigningOut(false);
       return;
@@ -144,7 +143,9 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
       </div>
 
       <div className="mt-2 flex w-full flex-1 min-h-0 flex-col items-center overflow-hidden">
-          <div className="mt-4 flex w-full shrink min-h-0 flex-col items-center gap-2 pb-4">          <Protected requiredRole="broadcast:create">
+        <div className="mt-4 flex w-full shrink min-h-0 flex-col items-center gap-2 pb-4">
+          {" "}
+          <Protected requiredRole="broadcast:create">
             <Link
               href="/broadcasts/new"
               aria-label="Create broadcast"
@@ -163,7 +164,6 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
               </span>
             </Link>
           </Protected>
-
           <Link
             href="/broadcasts"
             aria-label="Active broadcasts"
@@ -181,7 +181,6 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
               Active Broadcasts
             </span>
           </Link>
-
           <Link
             href="/help-page"
             aria-label="Help"
@@ -198,7 +197,6 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
               Help
             </span>
           </Link>
-
           <Protected requiredRole="global:create-invite">
             <Link
               href="/admin"
@@ -218,7 +216,6 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
               </span>
             </Link>
           </Protected>
-
           <Link
             href="/profile"
             aria-label="Profile"
@@ -249,8 +246,8 @@ export const AppNavBar = ({ className, onNavigate }: AppNavBarProps = {}) => {
             <LogOut className="h-5 w-5" aria-hidden="true" />
             <span className="pointer-events-none absolute left-[calc(100%+14px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-background px-3 py-1 text-sm font-semibold text-primary opacity-0 shadow-lg shadow-black/20 ring-1 ring-border transition-all duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover:translate-x-1 z-50">
               Log out
-          </span>
-        </button>
+            </span>
+          </button>
         </div>
       </div>
     </nav>