sidebar item disable if domain not verified

src/shared/SideBar.tsx

@@ -8,17 +8,29 @@ import { clx } from '../helpers/utils'
 import { useTranslation } from 'react-i18next'
 import { Paths } from '@/utils/Paths'
 import Storage from './components/Storage'
+import { useGetDomains } from '@/pages/setting/domain/hooks/useDomainData'
+import { toast } from '@/components/Toast'
 
 const SideBar: FC = () => {
 
     const { t } = useTranslation()
     const { openSidebar, setOpenSidebar } = useSharedStore()
     const location = useLocation()
+    const { data: domains } = useGetDomains()
 
     const isActive = (path: string) => location.pathname === path
-
+    const isDomainActive = !!domains?.data?.domain?.isVerified
     const iconSizeSideBar = 20
 
+    const handleItemClick = (link: string, isLogout?: boolean) => (e: React.MouseEvent<HTMLAnchorElement>) => {
+        if (!isDomainActive && link !== Paths.settingDomain && !isLogout) {
+            e.preventDefault()
+            toast('ابتدا باید یک دامنه تایید شده داشته باشید', 'error')
+            return
+        }
+        setOpenSidebar(false)
+    }
+
     return (
         <>
             {
@@ -45,6 +57,7 @@ const SideBar: FC = () => {
                             title={t('setting.mail_server')}
                             isActive={isActive(Paths.settingMailServer)}
                             link={Paths.settingMailServer}
+                            onClick={handleItemClick(Paths.settingMailServer)}
                         />
 
                         <SideBarItem
@@ -52,6 +65,7 @@ const SideBar: FC = () => {
                             title={t('setting.domain')}
                             isActive={isActive(Paths.settingDomain)}
                             link={Paths.settingDomain}
+                            onClick={handleItemClick(Paths.settingDomain)}
                         />
 
                         <SideBarItem
@@ -59,6 +73,7 @@ const SideBar: FC = () => {
                             title={t('setting.address')}
                             isActive={isActive(Paths.settingAddress)}
                             link={Paths.settingAddress}
+                            onClick={handleItemClick(Paths.settingAddress)}
                         />
 
                         <SideBarItem
@@ -66,6 +81,7 @@ const SideBar: FC = () => {
                             title={t('setting.personality')}
                             isActive={isActive(Paths.settingPersonalityList)}
                             link={Paths.settingPersonalityList}
+                            onClick={handleItemClick(Paths.settingPersonalityList)}
                         />
 
                         {/* <SideBarItem
@@ -80,6 +96,7 @@ const SideBar: FC = () => {
                             title={t('setting.signature')}
                             isActive={isActive(Paths.settingSignature)}
                             link={Paths.settingSignature}
+                            onClick={handleItemClick(Paths.settingSignature)}
                         />
                     </div>
 
@@ -92,6 +109,7 @@ const SideBar: FC = () => {
                                 isActive={isActive('logout')}
                                 link={`#`}
                                 isLogout
+                                onClick={handleItemClick('#', true)}
                             />
                         </div>
                     </div>

src/shared/SideBarItem.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import { FC, ReactNode, MouseEvent } from 'react'
 import { Link } from 'react-router-dom'
 import { clx } from '../helpers/utils'
 
@@ -9,13 +9,14 @@ type Props = {
     isActive: boolean,
     link: string,
     isLogout?: boolean,
-    isWithoutLine?: boolean
+    isWithoutLine?: boolean,
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void
 }
 
 const SideBarItem: FC<Props> = (props: Props) => {
 
     return (
-        <Link to={props.link} className='flex text-xs gap-9 mt-4'>
+        <Link to={props.link} className='flex text-xs gap-9 mt-4' onClick={props.onClick}>
             {
                 !props.isWithoutLine &&
                 <div className={clx(