1

src/app/dashboard/_components/header.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import React, {useEffect} from 'react';
 import {AlertCircle, CheckCircle2, Clock, CreditCard, LayoutGrid, LogOut, SettingsIcon, XCircle} from "lucide-react";
-import {usePathname} from "next/navigation";
+import {usePathname, useRouter} from "next/navigation";
 import useUserStore from "@/store/user";
 import useSubscribeStore from "@/store/subscribe";
 import {formatSecond} from "@/utils/format";
@@ -126,6 +126,13 @@ const NavTabs = () => {
  */
 const UserMenu = () => {
     const userStore = useUserStore();
+    const router = useRouter();
+
+    function handleSignOut() {
+        userStore.logout();
+        router.replace("/login");
+    }
+
     return (
         <div className="flex items-center gap-2">
             <div className="hidden max-w-50 truncate text-xs text-muted-foreground md:inline">
@@ -134,7 +141,7 @@ const UserMenu = () => {
             <div
                 className="cursor-pointer inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                 title="Sign out"
-                onClick={() => userStore.logout()}>
+                onClick={handleSignOut}>
                 <LogOut className="h-3 w-3"/>
                 <span className="hidden sm:inline">Sign out</span>
             </div>