diff --git a/src/components/application/app-navigation/base-components/nav-account-card.tsx b/src/components/application/app-navigation/base-components/nav-account-card.tsx index 8946da8..8da9970 100644 --- a/src/components/application/app-navigation/base-components/nav-account-card.tsx +++ b/src/components/application/app-navigation/base-components/nav-account-card.tsx @@ -44,8 +44,9 @@ const placeholderAccounts: NavAccountType[] = [ export const NavAccountMenu = ({ className, selectedAccountId = "olivia", + onSignOut, ...dialogProps -}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string }) => { +}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string; onSignOut?: () => void }) => { const focusManager = useFocusManager(); const dialogRef = useRef(null); @@ -115,7 +116,7 @@ export const NavAccountMenu = ({
- +
); @@ -156,10 +157,12 @@ export const NavAccountCard = ({ popoverPlacement, selectedAccountId = "olivia", items = placeholderAccounts, + onSignOut, }: { popoverPlacement?: Placement; selectedAccountId?: string; items?: NavAccountType[]; + onSignOut?: () => void; }) => { const triggerRef = useRef(null); const isDesktop = useBreakpoint("lg"); @@ -200,7 +203,7 @@ export const NavAccountCard = ({ ) } > - + diff --git a/src/components/layout/auth-guard.tsx b/src/components/layout/auth-guard.tsx new file mode 100644 index 0000000..7fc8acd --- /dev/null +++ b/src/components/layout/auth-guard.tsx @@ -0,0 +1,12 @@ +import { Navigate, Outlet } from 'react-router'; +import { useAuth } from '@/providers/auth-provider'; + +export const AuthGuard = () => { + const { isAuthenticated } = useAuth(); + + if (!isAuthenticated) { + return ; + } + + return ; +}; diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx index a8cd367..177a5ff 100644 --- a/src/components/layout/sidebar.tsx +++ b/src/components/layout/sidebar.tsx @@ -8,13 +8,12 @@ import { faGrid2, faPlug, } from "@fortawesome/pro-regular-svg-icons"; +import { useNavigate } from "react-router"; import { MobileNavigationHeader } from "@/components/application/app-navigation/base-components/mobile-header"; import { NavAccountCard } from "@/components/application/app-navigation/base-components/nav-account-card"; import { NavItemBase } from "@/components/application/app-navigation/base-components/nav-item"; import type { NavItemType } from "@/components/application/app-navigation/config"; - -// TODO: Wire to useAuth() once auth-provider.tsx is implemented -const isAdmin = false; +import { useAuth } from "@/providers/auth-provider"; const MAIN_SIDEBAR_WIDTH = 292; @@ -58,10 +57,18 @@ interface SidebarProps { } export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => { + const { logout, isAdmin: authIsAdmin, user } = useAuth(); + const navigate = useNavigate(); + + const handleSignOut = () => { + logout(); + navigate('/login'); + }; + const navSections = [ { label: "Main", items: mainItems }, { label: "Insights", items: insightsItems }, - ...(isAdmin ? [{ label: "Admin", items: adminItems }] : []), + ...(authIsAdmin ? [{ label: "Admin", items: adminItems }] : []), ]; const content = ( @@ -103,7 +110,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => { {/* Account card */}
- +
); diff --git a/src/main.tsx b/src/main.tsx index 5642ba0..39a1802 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,6 +2,7 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter, Outlet, Route, Routes } from "react-router"; import { AppShell } from "@/components/layout/app-shell"; +import { AuthGuard } from "@/components/layout/auth-guard"; import { NotFound } from "@/pages/not-found"; import { AllLeadsPage } from "@/pages/all-leads"; import { CampaignDetailPage } from "@/pages/campaign-detail"; @@ -24,19 +25,21 @@ createRoot(document.getElementById("root")!).render( } /> - - - - } - > - } /> - } /> - } /> - } /> - } /> - } /> + }> + + + + } + > + } /> + } /> + } /> + } /> + } /> + } /> +