add: logout dialog and auth based side menu items

2025-07-18 20:20:55 +03:30
parent 77505d5098
commit ee056ee947
3 changed files with 115 additions and 44 deletions
@@ -27,7 +27,7 @@ function Button({ children, className, disabled, pending, ...rest }: Props) {
        >
          <motion.div
            animate={pending && { rotateZ: [0, 360] }}
-            transition={{ duration: 1.2, repeat: Infinity, ease: 'linear'  }}
+            transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            className='-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 absolute'>
@@ -1,6 +1,6 @@
 'use client';

-import React, { useMemo, useRef } from 'react'
+import React, { useMemo, useRef, useState } from 'react'
 import { motion, PanInfo, Variants } from 'framer-motion';
 import MenuItemType from './SideMenuItem'
 import SideMenuItem from './SideMenuItem';
@@ -17,11 +17,15 @@ import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer';
 import SettingIcon from '../icons/SettingsIcon';
 import ExitIcon from '../icons/ExitIcon';
 import NightModeSwitch from '../button/NightModeSwitch';
+import Button from '../button/PrimaryButton';
+import { useAuthStore } from '@/zustand/authStore';
+import { useRouter } from 'next/navigation';

 type MenuItemType = {
    href: string | undefined;
    title: string;
-    icon: React.ReactElement
+    icon: React.ReactElement;
+    auth?: boolean;
 }

 const menuItems: Array<Array<MenuItemType>> = [
@@ -57,10 +61,10 @@ const menuItems: Array<Array<MenuItemType>> = [
    [],
    [
        {
-            href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} className='text-icon-deactive' />
+            auth: true, href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} className='text-icon-deactive' />
        },
        {
-            href: undefined, title: 'خروج', icon: <ExitIcon width={20} height={20} className='text-icon-deactive' />
+            auth: true, href: '?logout', title: 'خروج', icon: <ExitIcon width={20} height={20} className='text-icon-deactive' />
        },
    ]
 ]
@@ -74,15 +78,24 @@ type Props = {

 function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
    const menuStateMemo = useMemo(() => menuState, [menuState]);
+    const [logoutModalVisible, setLogoutModalVisible] = useState(false);
    const closeRef: React.Ref<HTMLDivElement> | undefined = useRef(null);
+    const userIsAuthenticated = true; //useAuthStore((state) => state.isAuthenticated);
+    const authLogout = useAuthStore((state) => state.logout);
+    const router = useRouter();

    const variants: Variants = {
        hidden: {
            x: '100%',
+            transition: {
+                duration: 0.1,
+                ease: 'easeInOut',
+            },
        },
        visible: {
            x: 0,
            transition: {
+                delay: 0.075,
                duration: 0.1,
                ease: 'easeInOut',
            },
@@ -90,51 +103,105 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
    };

    const onDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
-        if (info.offset.x > 100) {
+        if (info.offset.x > 20) {
            if (closeRef.current) {
                closeRef.current.click();
            }
        }
    }

+    const toggleLogoutModalVisiblity = (e: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLDivElement> | undefined) => {
+        e?.stopPropagation();
+        setLogoutModalVisible((state) => !state);
+    }
+
+    const onLogout = (e: React.MouseEvent<HTMLButtonElement> | null) => {
+        if (!e) return;
+        if (userIsAuthenticated) {
+            authLogout();
+            router.replace('/');
+        }
+    };
+
+    const hrefOnClicks: Array<{ href: string, handler: React.MouseEventHandler<HTMLAnchorElement> | undefined }> = [
+        { href: '?logout', handler: toggleLogoutModalVisiblity }
+    ]
+
    return (
-        <div className='w-full' ref={closeRef} onClick={toggleMenuState} >
-            <BlurredOverlayContainer bgOpacity={40} visible={menuStateMemo} outDelay={150}>
-                <motion.div
-                    drag='x'
-                    dragConstraints={{ left: 0, right: 0 }}
-                    transition={{ type: "spring", stiffness: 200, damping: 20 }}
-                    dragTransition={{ bounceDamping: 10, bounceStiffness: 600 }}
-                    dragElastic={0.05}
-                    onDragEnd={onDrag}
-                    initial="hidden"
-                    animate={menuState ? 'visible' : 'hidden'}
-                    variants={variants}
-                    data-visible={menuState}
-                    data-isvisible={menuStateMemo}
-                    onClick={(e) => { e.stopPropagation(); }}
-                    className={`fixed top-0 bottom-0 -right-full data-[isvisible=true]:right-0 transition-all duration-100 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-dvh flex flex-col z-40`}>
-                    <ul className="overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between h-full ">
-                        <li>
-                            <div className='flex flex-col gap-[60px]'>
-                                <div className='flex flex-col gap-[23px]'>
-                                    <div className='pt-2 text-start px-12 text-menu-header'>منو</div>
-                                    {menuItems[0].map((v, i) => {
-                                        return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
-                                    })}
+        <>
+            <div className='w-full' ref={closeRef} onClick={toggleMenuState} >
+                <BlurredOverlayContainer bgOpacity={40} visible={menuStateMemo} outDelay={150} inDuration={200}>
+                    <motion.div
+                        drag='x'
+                        dragConstraints={{ left: 0, right: 20 }}
+                        transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                        dragTransition={{ bounceDamping: 10, bounceStiffness: 600 }}
+                        dragElastic={0.05}
+                        onDragEnd={onDrag}
+                        initial="hidden"
+                        animate={menuState ? 'visible' : 'hidden'}
+                        variants={variants}
+                        data-visible={menuState}
+                        data-isvisible={menuStateMemo}
+                        onClick={(e) => { e.stopPropagation(); }}
+                        className={`fixed top-0 bottom-0 right-0 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-dvh flex flex-col z-40`}>
+                        <ul className="overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between h-full ">
+                            <li>
+                                <div className='flex flex-col gap-[60px]'>
+                                    <div className='flex flex-col gap-[23px]'>
+                                        <div className='pt-2 text-start px-12 text-menu-header'>منو</div>
+                                        {menuItems[0].filter((x) => x.auth ? userIsAuthenticated && x : x).map((v, i) => {
+                                            return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
+                                        })}
+                                    </div>
                                </div>
-                            </div>
-                        </li>
-                        <li className='flex flex-col gap-6 pt-16'>
-                            {menuItems[2].map((v, i) => {
-                                return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
-                            })}
-                            <SideMenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></SideMenuItem>
-                        </li>
-                    </ul>
-                </motion.div>
+                            </li>
+                            <li className='flex flex-col gap-6 pt-16'>
+                                {menuItems[2].filter((x) => x.auth ? userIsAuthenticated && x : x).map((v, i) => {
+                                    return <SideMenuItem
+                                        key={i}
+                                        href={v.href || ''}
+                                        onClick={v.href && hrefOnClicks.find((i) => i.href === v.href)?.handler || undefined}
+                                        title={v.title}
+                                        icon={v.icon}
+                                    />
+                                })}
+                                <SideMenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></SideMenuItem>
+                            </li>
+                        </ul>
+                    </motion.div>
+
+                </BlurredOverlayContainer>
+            </div>
+            <BlurredOverlayContainer visible={logoutModalVisible} onClick={toggleLogoutModalVisiblity} inDuration={100} outDuration={100} outDelay={75}>
+                <div 
+                className='absolute top-1/2 left-0 w-full px-6' onClick={toggleLogoutModalVisiblity}>
+                    <motion.div
+                        animate={{ y: logoutModalVisible ? [10, 0] : [0, 10], }}
+                        transition={{ duration: 0.1, ease: 'easeInOut' }}
+                        className='top-1/2 min-w-xs w-full max-w-sm justify-self-center text-center -translate-y-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-white/63 rounded-4xl'
+                    >
+                        <div className='text-base font-medium'>خروج از سیستم</div>
+                        <div className='text-xs font-medium mt-6'>آیا میخواهید از سیستم خارج شوید؟</div>
+                        <div className='grid grid-cols-2 gap-5.5 mt-8'>
+                            <Button
+                                onClick={onLogout}
+                                className='text-sm font-normal'
+                            >
+                                بله خارج میشوم
+                            </Button>
+
+                            <Button
+                                className='bg-disabled! text-disabled2! text-sm font-normal'
+                                onClick={toggleLogoutModalVisiblity}
+                            >
+                                منصرف شدم
+                            </Button>
+                        </div>
+                    </motion.div>
+                </div>
            </BlurredOverlayContainer>
-        </div>
+        </>
    )
 }

@@ -10,6 +10,8 @@ export type BlurredOverlayContainerProps = {
  inDelay?: number
  outDelay?: number
  transitionDelay?: number
+  inDuration?: number
+  outDuration?: number
  children: ReactNode
 } & React.ComponentProps<typeof motion.div>

@@ -17,7 +19,9 @@ const BlurredOverlayContainer = ({
  visible = true,
  bgOpacity = 30,
  inDelay = 0,
-  outDelay = 0,
+  outDelay = 200,
+  inDuration = 300,
+  outDuration = 300,
  transitionDelay: transitionDelay = 0,
  children,
  className,
@@ -45,7 +49,7 @@ const BlurredOverlayContainer = ({
      display: 'none',
      transition: {
        delay: transitionDelay / 1000,
-        duration: 0.3,
+        duration: outDuration / 1000,
        ease: 'easeInOut',
      },
    },
@@ -55,7 +59,7 @@ const BlurredOverlayContainer = ({
      display: 'block',
      transition: {
        delay: transitionDelay / 1000,
-        duration: 0.3,
+        duration: inDuration / 1000,
        ease: 'easeInOut',
      },
    },