feat: log out and auth redirect

src/dashboard/dashboard-sidebar.tsx

@@ -1,7 +1,17 @@
 import { Link, useLocation } from "@tanstack/react-router"
-import { FilesIcon, HomeIcon, User2Icon } from "lucide-react"
+import { useAuth } from "@workos-inc/authkit-react"
+import {
+	ChevronDownIcon,
+	FilesIcon,
+	HomeIcon,
+	LogOutIcon,
+	SettingsIcon,
+	User2Icon,
+} from "lucide-react"
 import {
 	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
@@ -19,7 +29,7 @@ export function DashboardSidebar() {
 			<SidebarHeader>
 				<SidebarMenu>
 					<SidebarMenuItem>
-						<UserSwitcher />
+						<UserMenu />
 					</SidebarMenuItem>
 				</SidebarMenu>
 				<MainSidebarMenu />
@@ -61,17 +71,34 @@ function MainSidebarMenu() {
 	)
 }
 
-function UserSwitcher() {
+function UserMenu() {
+	const { signOut } = useAuth()
+
+	function handleSignOut() {
+		signOut()
+	}
+
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<SidebarMenuButton size="lg" className="w-fit px-1.5">
-					<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
-						<User2Icon className="size-4" />
+				<SidebarMenuButton className="w-fit px-1.5 group-data-[collapsible=icon]:px-1.5! data-[state=open]:bg-sidebar-accent">
+					<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+						<User2Icon className="size-3" />
 					</div>
-					<span>Kenneth</span>
+					<span className="truncate font-medium">Kenneth</span>
+					<ChevronDownIcon className="opacity-50" />
 				</SidebarMenuButton>
 			</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-64" align="start" side="bottom">
+				<DropdownMenuItem>
+					<SettingsIcon />
+					Settings
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={handleSignOut}>
+					<LogOutIcon />
+					Log out
+				</DropdownMenuItem>
+			</DropdownMenuContent>
 		</DropdownMenu>
 	)
 }