add logout

ui/LogoutButton.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { handleAxiosError } from "@/core/utils";
+import { useLogout } from "@/services/hooks/auth.hook";
+import { Logout } from "@mui/icons-material";
+import { Button } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { toast } from "react-toastify";
+
+export default function LogoutButton() {
+  const { mutateAsync, isPending } = useLogout();
+  const router = useRouter();
+  const handleLogout = async () => {
+    try {
+      const { message } = await mutateAsync();
+      toast.success(message);
+      router.push("/");
+    } catch (error) {
+      toast.error(handleAxiosError(error));
+    }
+  };
+  return (
+    <>
+      <Button
+        className="flex items-center text-[#2a5298] w-full  justify-start gap-x-4    hover:cursor-pointer transition-all duration-300
+            "
+        onClick={handleLogout}
+      >
+        <span>
+          <Logout />
+        </span>
+        <span> خروج از حساب</span>
+      </Button>
+    </>
+  );
+}

ui/layout/Sidebar.tsx

@@ -1,7 +1,12 @@
-import { Apartment, Dashboard, Logout, Notes, Person, PictureInPicture, ShowChart } from "@mui/icons-material";
+import {
+  Logout,
+  Notes,
+  PictureInPicture,
+  ShowChart,
+} from "@mui/icons-material";
 import { Button } from "@mui/material";
 import Link from "next/link";
-import React from "react";
+import LogoutButton from "../LogoutButton";
 
 export default function Sidebar() {
   return (
@@ -67,15 +72,7 @@ export default function Sidebar() {
           </span>
           <span> گزارش گيري</span>
         </Link>
-        <Button
-          className="flex items-center text-[#2a5298] w-full  justify-start gap-x-4    hover:cursor-pointer transition-all duration-300
-            "
-        >
-          <span>
-            <Logout />
-          </span>
-          <span> خروج از حساب</span>
-        </Button>
+        <LogoutButton />
       </div>
     </>
   );