fix sidebar - complete auth layout

src/components/ui/dashboard/layout.tsx

@@ -11,7 +11,9 @@ export const DashboardLayout = () => {
     return (
         <div className="w-full min-h-screen flex flex-col lg:flex-row">
             <Sidebar />
+            <div className="w-screen min-w-full h-full lg:hidden bg-red-900">
                 <SidebarMobile show={show} setShow={setShow} />
+            </div>
             <div className="w-full min-h-screen p-4 pb-0 xl:p-[30px] xl:pb-0 flex flex-col overflow-y-auto">
                 <Header setShow={handleSidebar} />
                 <div className="flex-grow w-full">

src/components/ui/dashboard/sidebar-mobile.tsx

@@ -1,18 +1,28 @@
-import { FC } from "react"
-import { SidebarInterface } from "../../../types"
-import { sidebarItems } from "../../../utility/sidebar"
-import { SidebarItem } from "./sidebar-item"
-import { CloseCircle, LogoutCurve } from "iconsax-react"
+import { FC } from "react";
+import { SidebarInterface } from "../../../types";
+import { sidebarItems } from "../../../utility/sidebar";
+import { SidebarItem } from "./sidebar-item";
+import { CloseCircle, LogoutCurve } from "iconsax-react";
+import { useNavigate } from "react-router-dom";
 
 type Props = {
     setShow: (value: boolean) => void,
     show: any,
-}
+};
 
 export const SidebarMobile: FC<Props> = ({ setShow, show }) => {
-    const handleCloseSidebar = () => setShow(false)
+    const navigate = useNavigate()
+    const handleCloseSidebar = () => setShow(false);
+    const handleExit = () => {
+        window.localStorage.clear()
+        navigate("/auth/login")
+    }
     return (
-        show && <div className="lg:hidden fixed top-0 left-full !z-50 h-screen transition-transform -translate-x-full bg-auth-form w-max">
+        <>
+            {show && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={handleCloseSidebar}></div>
+            )}
+            <div className={`lg:hidden fixed top-0 left-full !z-50 h-screen transition ease-in-out duration-1000  ${show ? '-translate-x-full' : ''} bg-auth-form w-max`}>
                 <div className="relative p-4 h-full">
                     <CloseCircle color="gray" variant="Bold" className="size-7 text-white absolute top-2 right-2" onClick={handleCloseSidebar} />
                     <div className="lg:hidden w-full h-full max-w-max p-[21px] flex flex-col gap-y-[44px] items-center xl:max-w-fit bg-secondry-color">
@@ -21,7 +31,7 @@ export const SidebarMobile: FC<Props> = ({ setShow, show }) => {
                             <div className="flex flex-col gap-y-3">
                                 {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
                             </div>
-                        <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer">
+                            <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer" onClick={handleExit}>
                                 <LogoutCurve color="#777577" className="size-[27px]" />
                                 <p className="font-normal text-base text-secondary-text-color">خروج</p>
                             </div>
@@ -29,5 +39,6 @@ export const SidebarMobile: FC<Props> = ({ setShow, show }) => {
                     </div>
                 </div>
             </div>
-    )
-}
+        </>
+    );
+};

src/components/ui/dashboard/sidebar.tsx

@@ -2,8 +2,14 @@ import { LogoutCurve } from "iconsax-react"
 import { SidebarInterface } from "../../../types"
 import { sidebarItems } from "../../../utility/sidebar"
 import { SidebarItem } from "./sidebar-item"
+import { useNavigate } from "react-router-dom"
 
 export const Sidebar = () => {
+    const navigate = useNavigate()
+    const handleExit = () => {
+        window.localStorage.clear()
+        navigate("/auth/login")
+    }
     return (
         <div className="hidden lg:flex bg-auth-form  min-w-[318px] max-w-[318px] flex-col items-center py-[42px] gap-y-20">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
@@ -11,7 +17,7 @@ export const Sidebar = () => {
                 <div className="flex flex-col gap-y-3">
                     {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
                 </div>
-                <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer">
+                <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer" onClick={handleExit}>
                     <LogoutCurve color="#777577" className="size-[27px]" />
                     <p className="font-normal text-base text-secondary-text-color">خروج</p>
                 </div>

src/guard/index.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+
+export const Guard = ({ children }: PropsWithChildren) => {
+    const navigate = useNavigate()
+    const token = window.localStorage.getItem("token")
+
+    useEffect(() => {
+        if (!token || token?.length <= 0 || token === undefined || token === null) {
+            navigate("/auth/login")
+        }
+    }, [token , navigate])
+
+    return (
+        <>
+            {children}
+        </>
+    )
+}

src/router/index.tsx

@@ -17,11 +17,12 @@ import { TransactionsPage } from "../pages/dashboard/transactions";
 import { ScorePage } from "../pages/dashboard/score";
 import { SubscriptionReportPage } from "../pages/dashboard/subscription-report";
 import { AwardsPage } from "../pages/dashboard/awards";
+import { Guard } from "../guard";
 
 
 export const router = createBrowserRouter([
     {
-        element: <DashboardLayout />,
+        element: <Guard><DashboardLayout /></Guard>,
         path: "/",
         children: [
             {