feat: sign out button

Author: izadoesdev

apps/dashboard/app/demo/layout.tsx

@@ -21,7 +21,7 @@ import { toast } from 'sonner';
 import { AnalyticsToolbar } from '@/app/(main)/websites/[id]/_components/analytics-toolbar';
 import { Logo } from '@/components/layout/logo';
 import { ThemeToggle } from '@/components/layout/theme-toggle';
-import { UserMenu } from '@/components/layout/user-menu';
+import { SignOutButton } from '@/components/layout/sign-out-button';
 import { NotificationsPopover } from '@/components/notifications/notifications-popover';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -144,7 +144,7 @@ function Sidebar() {
 						</Button>
 
 						<NotificationsPopover />
-						<UserMenu />
+						<SignOutButton />
 					</div>
 				</div>
 			</header>

apps/dashboard/components/layout/category-sidebar.tsx

@@ -18,8 +18,8 @@ import {
 	getDefaultCategory,
 	getNavigationWithWebsites,
 } from './navigation/navigation-config';
+import { SignOutButton } from './sign-out-button';
 import { ThemeToggle } from './theme-toggle';
-import { UserMenu } from './user-menu';
 
 const HelpDialog = dynamic(
 	() => import('./help-dialog').then((mod) => mod.HelpDialog),
@@ -161,16 +161,7 @@ export function CategorySidebar({
 
 					{/* Profile */}
 					<div className="flex justify-center">
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<div className="flex h-8 w-8 items-center justify-center">
-									<UserMenu />
-								</div>
-							</TooltipTrigger>
-							<TooltipContent side="right" sideOffset={8}>
-								Profile Menu
-							</TooltipContent>
-						</Tooltip>
+						<SignOutButton />
 					</div>
 				</div>
 

apps/dashboard/components/layout/sign-out-button.tsx

@@ -0,0 +1,57 @@
+import { authClient } from '@databuddy/auth/client';
+import { SignOutIcon } from '@phosphor-icons/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+export function SignOutButton() {
+	const [isLoggingOut, setIsLoggingOut] = useState(false);
+	const router = useRouter();
+
+	const handleLogout = async () => {
+		setIsLoggingOut(true);
+		await authClient.signOut({
+			fetchOptions: {
+				onSuccess: () => {
+					toast.success('Logged out successfully');
+					router.push('/login');
+				},
+				onError: (error) => {
+					router.push('/login');
+					toast.error(error.error.message || 'Failed to log out');
+				},
+			},
+		});
+		setIsLoggingOut(false);
+	};
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					aria-label={isLoggingOut ? 'Signing out...' : 'Sign out'}
+					className="h-8 w-8 not-dark:text-primary hover:bg-destructive/10 hover:text-destructive"
+					disabled={isLoggingOut}
+					onClick={handleLogout}
+					size="icon"
+					variant="ghost"
+				>
+					<SignOutIcon
+						className={isLoggingOut ? 'animate-pulse' : ''}
+						size={16}
+						weight="duotone"
+					/>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent side="right">
+				<p>{isLoggingOut ? 'Signing out...' : 'Sign out'}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+}

apps/dashboard/components/layout/theme-toggle.tsx

@@ -25,7 +25,7 @@ export function ThemeToggle({ className }: ThemeTogglerProps) {
 			onClick={switchTheme}
 			type="button"
 			variant="ghost"
-		>
+		>	
 			<SunIcon
 				className="dark:-rotate-90 h-5 w-5 rotate-0 scale-100 not-dark:text-primary transition-all duration-300 dark:scale-0"
 				size={32}