share

src/components/menu/SideMenu.tsx

@@ -18,6 +18,7 @@ import useToggle from '@/hooks/helpers/useToggle';
 import { useGetAbout } from '@/app/[name]/(Main)/about/hooks/useAboutData';
 import Image from 'next/image';
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
+import { toast } from '../Toast';
 
 type MenuItemType = {
     href: string | undefined;
@@ -138,6 +139,50 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
         }
     };
 
+    const getShareUrl = () => {
+        if (typeof window === 'undefined') return '';
+        return window.location.href;
+    };
+
+    const copyToClipboard = async (showToast: boolean = true) => {
+        try {
+            const url = getShareUrl();
+            await navigator.clipboard.writeText(url);
+            if (showToast) {
+                toast('لینک با موفقیت کپی شد', 'success');
+            }
+            return true;
+        } catch {
+            if (showToast) {
+                toast('خطا در کپی کردن لینک', 'error');
+            }
+            return false;
+        }
+    };
+
+    const handleCopyLink = async () => {
+        await copyToClipboard();
+        toggleShareModal();
+    };
+
+    const handleShareTelegram = () => {
+        const url = encodeURIComponent(getShareUrl());
+        window.open(`https://t.me/share/url?url=${url}`, '_blank');
+    };
+
+    const handleShareWhatsApp = () => {
+        const url = encodeURIComponent(getShareUrl());
+        const text = encodeURIComponent('اپلیکیشن ما را ببینید!');
+        window.open(`https://wa.me/?text=${text}%20${url}`, '_blank');
+    };
+
+    const handleShareInstagram = async () => {
+        const success = await copyToClipboard(false);
+        if (success) {
+            toast('لینک کپی شد. لطفاً آن را در اینستاگرام به اشتراک بگذارید', 'info');
+        }
+    };
+
     const hrefOnClicks = [
         { href: '?logout', handler: toggleLogoutModal },
         { href: '?share', handler: toggleShareModal },
@@ -299,24 +344,33 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                     {tShareModal('Description')}
                 </p>
 
-                <Button onClick={() => { }} className="text-sm mt-8">
+                <Button onClick={handleCopyLink} className="text-sm mt-8">
                     <DocumentCopy className="inline-block ml-2 mb-0.5 stroke-container dark:stroke-foreground" size={20} />
                     <span className="font-light">{tShareModal('ButtonCopy')}</span>
                 </Button>
 
                 <div className="grid grid-cols-3 gap-5.5 mt-6 px-12">
-                    <div className="flex flex-col items-center">
+                    <button
+                        onClick={handleShareTelegram}
+                        className="flex flex-col items-center cursor-pointer hover:opacity-80 transition-opacity"
+                    >
                         <TelegramIcon width={24} height={24} className="mb-1.5 text-primary dark:text-foreground" />
                         <span className='text-xs2 font-medium'>Telegram</span>
-                    </div>
+                    </button>
-                    <div className="flex flex-col items-center">
+                    <button
+                        onClick={handleShareWhatsApp}
+                        className="flex flex-col items-center cursor-pointer hover:opacity-80 transition-opacity"
+                    >
                         <Whatsapp size={24} className="mb-1.5 stroke-primary dark:stroke-foreground" />
                         <span className='text-xs2 font-medium'>WhatsApp</span>
-                    </div>
+                    </button>
-                    <div className="flex flex-col items-center">
+                    <button
+                        onClick={handleShareInstagram}
+                        className="flex flex-col items-center cursor-pointer hover:opacity-80 transition-opacity"
+                    >
                         <Instagram size={24} className="mb-1.5 stroke-primary dark:stroke-foreground" />
                         <span className='text-xs2 font-medium'>Instagram</span>
-                    </div>
+                    </button>
                 </div>
             </Modal>