(VerticalAlignment.MIDDLE)
+
+ const sizeOptions = [
+ { label: 'کوچک', value: ButtonSize.SMALL },
+ { label: 'متوسط', value: ButtonSize.MEDIUM },
+ { label: 'بزرگ', value: ButtonSize.LARGE }
+ ]
+
+ const handleAddButton = () => {
+ addButtonToActiveItem({
+ text: buttonText,
+ link: buttonLink,
+ size: buttonSize,
+ isBorder,
+ borderSize,
+ textColor,
+ backgroundColor,
+ borderColor,
+ alignment: horizontalAlignment,
+ verticalAlignment,
+ })
+
+ // Reset form after adding
+ setButtonText('')
+ setButtonLink('')
+ setButtonSize(ButtonSize.MEDIUM)
+ setIsBorder(false)
+ setBorderSize(1)
+ setTextColor('#fff')
+ setBackgroundColor('#000')
+ setBorderColor('#fff')
+ setHorizontalAlignment(HorizontalAlignment.CENTER)
+ setVerticalAlignment(VerticalAlignment.MIDDLE)
+ }
+
+ return (
+
+
{t('setting.button')}
+
+
+ setButtonText(e.target.value)}
+ />
+
+
+
+ setButtonLink(e.target.value)}
+ endIcon={}
+ />
+
+
+
+
+
+
+
setIsBorder(!isBorder)}
+ />
+ {t('setting.border')}
+
+
+ {
+ isBorder &&
+
+ setBorderSize(Number(e.target.value))}
+ />
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('setting.horizontal_position')}
+
+
+
setHorizontalAlignment(HorizontalAlignment.RIGHT)}
+ >
+
+
+
setHorizontalAlignment(HorizontalAlignment.CENTER)}
+ >
+
+
+
setHorizontalAlignment(HorizontalAlignment.LEFT)}
+ >
+
+
+
+
+
+
+
+ {t('setting.vertical_position')}
+
+
+
setVerticalAlignment(VerticalAlignment.TOP)}
+ >
+
+
+
setVerticalAlignment(VerticalAlignment.MIDDLE)}
+ >
+
+
+
setVerticalAlignment(VerticalAlignment.BOTTOM)}
+ >
+
+
+
+
+
+
+
+
+
+
+
handleSectionClick(SectionName.CONTENT)}>
+
+ {
+ data.content.columnsCount > 0 ?
+
+
+
+
+
+
+
+ {
+ Array.from({ length: data.content.columnsCount }, (_, index) => {
+ const item = data.content.items[index];
+ const isActive = activeSection === SectionName.CONTENT && activeItemIndex === index;
+
+ return (
+ <>
+ {
+ e.stopPropagation();
+ handleItemClick(index);
+ }}
+ key={index}
+ style={{
+ width: `${100 / data.content.columnsCount}%`,
+ height: '246px',
+ border: isActive ? '1px dashed #0038FF' : '1px dashed #EAECF4',
+ backgroundColor: item?.backgroundColor || '#ffffff',
+ backgroundImage: item?.backgroundImage ? `url(${item.backgroundImage})` : 'none',
+ backgroundSize: item?.style?.backgroundSize || 'cover',
+ backgroundRepeat: item?.style?.backgroundRepeat || 'no-repeat',
+ backgroundPosition: item?.style?.backgroundPosition || 'center',
+ cursor: 'pointer',
+ padding: '0',
+ verticalAlign: 'top',
+ borderRadius: '8px',
+ position: 'relative'
+ }}
+ >
+
+
+ {/* اگر فقط دکمه داریم و متن نداریم */}
+ {(!item?.texts || item.texts.length === 0) && item?.buttons && item.buttons.length > 0 ? (
+
+ |
+
+ |
+
+ ) : (
+ <>
+ {/* ردیف اصلی برای متن */}
+
+ | 0 ? "203" : "230"}
+ align={item?.texts?.[0]?.alignment || 'center'}
+ valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
+ item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
+ style={{
+ padding: '8px',
+ fontSize: '14px',
+ lineHeight: '1.4'
+ }}
+ >
+
+
+ |
+
+ {/* ردیف دکمهها */}
+ {item?.buttons && item.buttons.length > 0 && (
+
+ |
+
+ |
+
+ )}
+
+ )}
+
+
+ |
+ {index < data.content.columnsCount - 1 && (
+ |
+ )}
+
+ )
+ })
+ }
+
+
+
+ |
+
+
+
+ :
+
+
+
+ |
+
+ {t('setting.content_email')}
+
+
+ |
+
+
+
+ }
+ |
+
+ )
+}
+
+export default ContentSection
\ No newline at end of file
diff --git a/src/pages/setting/personality/components/FooterSection.tsx b/src/pages/setting/personality/components/FooterSection.tsx
new file mode 100644
index 0000000..311f580
--- /dev/null
+++ b/src/pages/setting/personality/components/FooterSection.tsx
@@ -0,0 +1,198 @@
+import { FC } from 'react'
+import { usePersonalityStore } from '../store/Store'
+import { useTranslation } from 'react-i18next'
+import { AddCircle } from 'iconsax-react'
+import TextRenderer from './TextRenderer'
+import ButtonRenderer from './ButtonRenderer'
+import ImageRenderer from './ImageRenderer'
+import { SectionName, VerticalAlignment, HorizontalAlignment } from '../types/Types'
+
+const FooterSection: FC = () => {
+
+ const { t } = useTranslation()
+ const { activeSection, activeItemIndex, data, setActiveSection, setActiveItemIndex } = usePersonalityStore()
+
+ const handleSectionClick = (section: SectionName) => {
+ setActiveSection(section)
+ }
+
+ const handleItemClick = (index: number) => {
+ setActiveItemIndex(index)
+ }
+
+ // تابعهای helper برای تعیین alignment دکمهها
+ const getButtonHorizontalAlign = (button?: { alignment?: HorizontalAlignment }) => {
+ if (!button || !button.alignment) return 'center'
+ switch (button.alignment) {
+ case HorizontalAlignment.LEFT:
+ return 'left'
+ case HorizontalAlignment.RIGHT:
+ return 'right'
+ case HorizontalAlignment.CENTER:
+ default:
+ return 'center'
+ }
+ }
+
+ const getButtonVerticalAlign = (button?: { verticalAlignment?: VerticalAlignment }) => {
+ if (!button || !button.verticalAlignment) return 'middle'
+ switch (button.verticalAlignment) {
+ case VerticalAlignment.TOP:
+ return 'top'
+ case VerticalAlignment.BOTTOM:
+ return 'bottom'
+ case VerticalAlignment.MIDDLE:
+ default:
+ return 'middle'
+ }
+ }
+
+ return (
+ handleSectionClick(SectionName.FOOTER)}>
+
+ {
+ data.footer.columnsCount > 0 ?
+
+
+
+
+
+
+
+ {
+ Array.from({ length: data.footer.columnsCount }, (_, index) => {
+ const item = data.footer.items[index];
+ const isActive = activeSection === SectionName.FOOTER && activeItemIndex === index;
+
+ return (
+ <>
+ {
+ e.stopPropagation();
+ handleItemClick(index);
+ }}
+ key={index}
+ style={{
+ width: `${100 / data.footer.columnsCount}%`,
+ height: '123px',
+ border: isActive ? '1px dashed #0038FF' : '1px dashed #EAECF4',
+ backgroundColor: item?.backgroundColor || '#ffffff',
+ backgroundImage: item?.backgroundImage ? `url(${item.backgroundImage})` : 'none',
+ backgroundSize: item?.style?.backgroundSize || 'cover',
+ backgroundRepeat: item?.style?.backgroundRepeat || 'no-repeat',
+ backgroundPosition: item?.style?.backgroundPosition || 'center',
+ cursor: 'pointer',
+ padding: '0',
+ verticalAlign: 'top',
+ borderRadius: '8px',
+ position: 'relative'
+ }}
+ >
+
+
+ {/* اگر فقط دکمه داریم و متن نداریم */}
+ {(!item?.texts || item.texts.length === 0) && item?.buttons && item.buttons.length > 0 ? (
+
+ |
+
+ |
+
+ ) : (
+ <>
+ {/* ردیف اصلی برای متن */}
+
+ | 0 ? "40" : "67"}
+ align={item?.texts?.[0]?.alignment || 'center'}
+ valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
+ item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
+ style={{
+ padding: '8px',
+ fontSize: '14px',
+ lineHeight: '1.4'
+ }}
+ >
+
+
+ |
+
+ {/* ردیف دکمهها */}
+ {item?.buttons && item.buttons.length > 0 && (
+
+ |
+
+ |
+
+ )}
+
+ )}
+
+
+ |
+ {index < data.footer.columnsCount - 1 && (
+ |
+ )}
+
+ )
+ })
+ }
+
+
+
+ |
+
+
+
+ :
+
+
+
+ |
+
+ {t('setting.footer_email')}
+
+
+ |
+
+
+
+ }
+ |
+
+ )
+}
+
+export default FooterSection
\ No newline at end of file
diff --git a/src/pages/setting/personality/components/HeaderSection.tsx b/src/pages/setting/personality/components/HeaderSection.tsx
new file mode 100644
index 0000000..2e3b2ff
--- /dev/null
+++ b/src/pages/setting/personality/components/HeaderSection.tsx
@@ -0,0 +1,184 @@
+import { FC } from 'react'
+import { usePersonalityStore } from '../store/Store'
+import { useTranslation } from 'react-i18next'
+import { AddCircle } from 'iconsax-react'
+import TextRenderer from './TextRenderer'
+import ButtonRenderer from './ButtonRenderer'
+import ImageRenderer from './ImageRenderer'
+import { SectionName, VerticalAlignment, HorizontalAlignment } from '../types/Types'
+
+const HeaderSection: FC = () => {
+
+ const { t } = useTranslation()
+ const { activeSection, activeItemIndex, data, setActiveSection, setActiveItemIndex } = usePersonalityStore()
+
+ const handleSectionClick = (section: SectionName) => {
+ setActiveSection(section)
+ }
+
+ const handleItemClick = (index: number) => {
+ setActiveItemIndex(index)
+ }
+
+ // تابعهای helper برای تعیین alignment دکمهها
+ const getButtonHorizontalAlign = (button?: { alignment?: HorizontalAlignment }) => {
+ if (!button || !button.alignment) return 'center'
+ switch (button.alignment) {
+ case HorizontalAlignment.LEFT:
+ return 'left'
+ case HorizontalAlignment.RIGHT:
+ return 'right'
+ case HorizontalAlignment.CENTER:
+ default:
+ return 'center'
+ }
+ }
+
+ const getButtonVerticalAlign = (button?: { verticalAlignment?: VerticalAlignment }) => {
+ if (!button || !button.verticalAlignment) return 'middle'
+ switch (button.verticalAlignment) {
+ case VerticalAlignment.TOP:
+ return 'top'
+ case VerticalAlignment.BOTTOM:
+ return 'bottom'
+ case VerticalAlignment.MIDDLE:
+ default:
+ return 'middle'
+ }
+ }
+
+ return (
+ handleSectionClick(SectionName.HEADER)}>
+ {
+ data.header.columnsCount > 0 ?
+
+
+
+
+ {
+ Array.from({ length: data.header.columnsCount }, (_, index) => {
+ const item = data.header.items[index];
+ const isActive = activeSection === SectionName.HEADER && activeItemIndex === index;
+
+ return (
+ <>
+ {
+ e.stopPropagation();
+ handleItemClick(index);
+ }}
+ key={index}
+ style={{
+ width: `${100 / data.header.columnsCount}%`,
+ height: '123px',
+ border: isActive ? '1px dashed #0038FF' : '1px dashed #EAECF4',
+ backgroundColor: item?.backgroundColor || '#ffffff',
+ backgroundImage: item?.backgroundImage ? `url(${item.backgroundImage})` : 'none',
+ backgroundSize: item?.style?.backgroundSize || 'cover',
+ backgroundRepeat: item?.style?.backgroundRepeat || 'no-repeat',
+ backgroundPosition: item?.style?.backgroundPosition || 'center',
+ cursor: 'pointer',
+ padding: '0',
+ verticalAlign: 'top',
+ borderRadius: '8px',
+ position: 'relative'
+ }}
+ >
+
+
+ {/* اگر فقط دکمه داریم و متن نداریم */}
+ {(!item?.texts || item.texts.length === 0) && item?.buttons && item.buttons.length > 0 ? (
+
+ |
+
+ |
+
+ ) : (
+ <>
+ {/* ردیف اصلی برای متن */}
+
+ | 0 ? "60" : "87"}
+ align={item?.texts?.[0]?.alignment || 'center'}
+ valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
+ item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
+ style={{
+ padding: '8px',
+ fontSize: '14px',
+ lineHeight: '1.4'
+ }}
+ >
+
+
+ |
+
+ {/* ردیف دکمهها */}
+ {item?.buttons && item.buttons.length > 0 && (
+
+ |
+
+ |
+
+ )}
+
+ )}
+
+
+ |
+ {index < data.header.columnsCount - 1 && (
+ |
+ )}
+
+ )
+ })
+ }
+
+
+
+ |
+ :
+
+
+ {t('setting.header_email')}
+
+
+ |
+ }
+
+ )
+}
+
+export default HeaderSection
\ No newline at end of file
diff --git a/src/pages/setting/personality/components/ImageRenderer.tsx b/src/pages/setting/personality/components/ImageRenderer.tsx
new file mode 100644
index 0000000..f6f7056
--- /dev/null
+++ b/src/pages/setting/personality/components/ImageRenderer.tsx
@@ -0,0 +1,149 @@
+import { FC } from 'react'
+import { ImageType, ImageSize, HorizontalAlignment, VerticalAlignment } from '../types/Types'
+
+interface ImageRendererProps {
+ images: ImageType[]
+}
+
+const ImageRenderer: FC = ({ images }) => {
+ if (!images || images.length === 0) return null
+
+ // تابعهای helper برای تبدیل enum به string
+ const getHorizontalAlign = (alignment?: HorizontalAlignment) => {
+ switch (alignment) {
+ case HorizontalAlignment.LEFT:
+ return 'left'
+ case HorizontalAlignment.RIGHT:
+ return 'right'
+ case HorizontalAlignment.CENTER:
+ default:
+ return 'center'
+ }
+ }
+
+ const getVerticalAlign = (verticalAlignment?: VerticalAlignment) => {
+ switch (verticalAlignment) {
+ case VerticalAlignment.TOP:
+ return 'top'
+ case VerticalAlignment.BOTTOM:
+ return 'bottom'
+ case VerticalAlignment.MIDDLE:
+ default:
+ return 'middle'
+ }
+ }
+
+ const getImageStyle = (image: ImageType) => {
+ return {
+ width: image.width || '100%',
+ height: image.height || 'auto',
+ border: '0'
+ }
+ }
+
+ const shouldUseBackgroundImage = (imageSize: ImageSize) => {
+ return imageSize === ImageSize.REPEAT ||
+ imageSize === ImageSize.REPEAT_X ||
+ imageSize === ImageSize.REPEAT_Y
+ }
+
+ const getBackgroundStyle = (image: ImageType) => {
+ let backgroundRepeat = 'no-repeat'
+
+ switch (image.size) {
+ case ImageSize.REPEAT:
+ backgroundRepeat = 'repeat'
+ break
+ case ImageSize.REPEAT_X:
+ backgroundRepeat = 'repeat-x'
+ break
+ case ImageSize.REPEAT_Y:
+ backgroundRepeat = 'repeat-y'
+ break
+ default:
+ backgroundRepeat = 'no-repeat'
+ break
+ }
+
+ const horizontal = image.alignment === HorizontalAlignment.LEFT ? 'left' :
+ image.alignment === HorizontalAlignment.RIGHT ? 'right' : 'center'
+ const vertical = image.verticalAlignment === VerticalAlignment.TOP ? 'top' :
+ image.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'center'
+
+ return {
+ backgroundImage: `url(${image.src})`,
+ backgroundPosition: `${horizontal} ${vertical}`,
+ backgroundRepeat,
+ width: image.width || '100%',
+ height: image.height || '100px'
+ }
+ }
+
+ const renderImage = (image: ImageType) => {
+ if (shouldUseBackgroundImage(image.size)) {
+ // برای pattern های repeat از background استفاده میکنیم
+ return (
+
+
+
+ )
+ }
+
+ // برای تصاویر عادی
+ if (image.size === ImageSize.CONTAIN) {
+ // برای contain از table wrapper استفاده میکنیم تا نسبت حفظ شود
+ return (
+
+
+
+
+ 
+ |
+
+
+
+ )
+ }
+
+ // برای cover و auto
+ return (
+
+ )
+ }
+
+ return (
+ <>
+ {images.map((image, imageIndex) => (
+
+
+
+ |
+ {renderImage(image)}
+ |
+
+
+
+ ))}
+
+ )
+}
+
+export default ImageRenderer
\ No newline at end of file
diff --git a/src/pages/setting/personality/components/ImageSideBar.tsx b/src/pages/setting/personality/components/ImageSideBar.tsx
new file mode 100644
index 0000000..bfff861
--- /dev/null
+++ b/src/pages/setting/personality/components/ImageSideBar.tsx
@@ -0,0 +1,194 @@
+import Button from '@/components/Button'
+import Select from '@/components/Select'
+import UploadBoxDraggble from '@/components/UploadBoxDraggble'
+import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically } from 'iconsax-react'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { usePersonalityStore } from '../store/Store'
+import { ImageSize, HorizontalAlignment, VerticalAlignment } from '../types/Types'
+
+const ImageSideBar: FC = () => {
+
+ const { t } = useTranslation()
+ const { addImageToActiveItem, activeSection, activeItemIndex, data } = usePersonalityStore()
+
+ const [imageSrc, setImageSrc] = useState('')
+ const [imageSize, setImageSize] = useState(ImageSize.COVER)
+ const [horizontalAlignment, setHorizontalAlignment] = useState(HorizontalAlignment.CENTER)
+ const [verticalAlignment, setVerticalAlignment] = useState(VerticalAlignment.MIDDLE)
+ const [isLoading, setIsLoading] = useState(false)
+ const [isReset, setIsReset] = useState(false)
+
+ const sizeOptions = [
+ { label: 'کاور - تمام فضا را پوشش دهد (Cover)', value: ImageSize.COVER },
+ { label: 'در مقیاس - در فضا جا شود (Contain)', value: ImageSize.CONTAIN },
+ { label: 'تکرار - عکس تکرار شود (Repeat)', value: ImageSize.REPEAT },
+ { label: 'تکرار افقی (Repeat-X)', value: ImageSize.REPEAT_X },
+ { label: 'تکرار عمودی (Repeat-Y)', value: ImageSize.REPEAT_Y },
+ { label: 'بدون تکرار (No-Repeat)', value: ImageSize.NO_REPEAT },
+ { label: 'اندازه اصلی (Auto)', value: ImageSize.AUTO }
+ ]
+
+ const handleImageUpload = (files: File[]) => {
+ if (files.length === 0) return
+
+ const file = files[0] // فقط اولین فایل را در نظر میگیریم
+ // در اینجا باید فایل آپلود شود و URL برگردانده شود
+ // فعلاً از FileReader استفاده میکنم برای تست
+ const reader = new FileReader()
+ reader.onload = (e) => {
+ const result = e.target?.result as string
+ setImageSrc(result)
+ }
+ reader.readAsDataURL(file)
+ }
+
+ const handleAddImage = () => {
+ if (!imageSrc) return
+
+ console.log('Store state before adding image:', {
+ activeSection,
+ activeItemIndex,
+ hasActiveItem: activeSection && data[activeSection as keyof typeof data]?.items[activeItemIndex],
+ })
+
+ // Validation
+ if (!activeSection) {
+ console.error('No active section selected')
+ return
+ }
+
+ const sectionData = data[activeSection as keyof typeof data]
+ if (!sectionData?.items || activeItemIndex >= sectionData.items.length) {
+ console.error('No active item found or invalid index', {
+ activeItemIndex,
+ itemsLength: sectionData?.items?.length
+ })
+ return
+ }
+
+ console.log('Adding image with data:', {
+ src: imageSrc,
+ alt: 'عکس آپلود شده',
+ size: imageSize,
+ alignment: horizontalAlignment,
+ verticalAlignment,
+ })
+
+ setIsLoading(true)
+
+ try {
+ addImageToActiveItem({
+ src: imageSrc,
+ alt: 'عکس آپلود شده',
+ size: imageSize,
+ alignment: horizontalAlignment,
+ verticalAlignment,
+ })
+
+ console.log('Image added successfully')
+
+ // Reset form after adding
+ setImageSrc('')
+ setImageSize(ImageSize.COVER)
+ setHorizontalAlignment(HorizontalAlignment.CENTER)
+ setVerticalAlignment(VerticalAlignment.MIDDLE)
+ setIsReset(true)
+ setTimeout(() => {
+ setIsReset(false)
+ }, 1000)
+ } catch (error) {
+ console.error('Error adding image:', error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return (
+
+
{t('setting.image')}
+
+
+
+
+
+
+
+
+
+
+
+ {t('setting.horizontal_position')}
+
+
+
setHorizontalAlignment(HorizontalAlignment.RIGHT)}
+ >
+
+
+
setHorizontalAlignment(HorizontalAlignment.CENTER)}
+ >
+
+
+
setHorizontalAlignment(HorizontalAlignment.LEFT)}
+ >
+
+
+
+
+
+
+
+ {t('setting.vertical_position')}
+
+
+
setVerticalAlignment(VerticalAlignment.BOTTOM)}
+ >
+
+
+
setVerticalAlignment(VerticalAlignment.MIDDLE)}
+ >
+
+
+
setVerticalAlignment(VerticalAlignment.TOP)}
+ >
+
+
+
+
+
+
+
+
+
+
+ {t('setting.select_section')}
+
+ )
+ }
+
+ return (
+
+
{t('setting.setting')}
+
+
+
handleColumnClick(1)}
+ >
+
handleColumnClick(2)}
+ >
+
+
+
+
+
+
+
handleColumnClick(3)}
+ >
+
+
+
+
+
handleColumnClick(4)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{t('setting.text')}
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('setting.horizontal_position')}
+
+
+
setHorizontalPosition(HorizontalAlignment.RIGHT)}
+ >
+
+
+
setHorizontalPosition(HorizontalAlignment.CENTER)}
+ >
+
+
+
setHorizontalPosition(HorizontalAlignment.LEFT)}
+ >
+
+
+
+
+
+
+
+ {t('setting.vertical_position')}
+
+
+
setVerticalPosition(VerticalAlignment.TOP)}
+ >
+
+
+
setVerticalPosition(VerticalAlignment.MIDDLE)}
+ >
+
+
+
setVerticalPosition(VerticalAlignment.BOTTOM)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('setting.signature')}
+
+
+ {t('setting.signature_description')}
+
+
+
+
+
+
+
+//
+//
+//
+//
+//
+//
+// {t("footer.my_services")}
+//
+//
+//
+//
+//
+//
+//
+// {t("footer.other_services")}
+//
+//
+//
+//
+//
+//
+//
+// {t("footer.home")}
+//
+//
+//
+//
+//
+//
+//
+// {t("footer.announcements")}
+//
+//
+//
+//
+//
+//
+//
+// {t("footer.tickets")}
+//
+//
+//
+//
+//
+
+
+
+
+
setOpenSidebar(!openSidebar)} className='xl:hidden block'>
+
+
+ {/*
*/}
+
+
+
+
+
+
+
+
+
+
+ {/* {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')} */}
+
+
+
+
+
+
+ {/*
*/}
+ {/* {
+ data && (
+
+
+
+
+
+
+
+
+ {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+
+
+
+
+ setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
+
+
+
+
+
+ {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+
+
+
+ {data?.data?.user?.email}
+
+
+
+
+
+
}
+ title={t('header.wallet')}
+ link={Pages.wallet}
+ isActive
+ isWithoutLine
+ />
+
+
{t('home.balance')}
+
+ {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
+
+
+
+
+
}
+ title={t('sidebar.transactions')}
+ isActive
+ link={Pages.transactions}
+ isWithoutLine
+ />
+
+
}
+ title={t('header.discounts')}
+ isActive
+ link={Pages.discounts}
+ isWithoutLine
+ />
+
+
}
+ title={t('header.financial_info')}
+ isActive
+ link={Pages.financial}
+ isWithoutLine
+ />
+
+
}
+ title={t('header.profile')}
+ isActive
+ link={Pages.profile}
+ isWithoutLine
+ />
+
+
}
+ title={t('header.setting')}
+ isActive
+ link={Pages.setting}
+ isWithoutLine
+ />
+
+ }
+ title={t('sidebar.logout')}
+ isActive
+ link={Pages.setting}
+ isWithoutLine
+ isLogout
+ />
+
+
+
+
+ )
+ } */}
+
+
+
+
+
+
+
+
+
+
+
setOpenSidebar(false)} />
+ }
+
+
+
+
+
+
+ {/*
+ {t('setting.title')}
+
*/}
+
+
+ }
+ title={t('setting.mail_server')}
+ isActive={isActive(Paths.settingMailServer)}
+ link={Paths.settingMailServer}
+ />
+
+ }
+ title={t('setting.domain')}
+ isActive={isActive(Paths.settingDomain)}
+ link={Paths.settingDomain}
+ />
+
+ }
+ title={t('setting.address')}
+ isActive={isActive(Paths.settingAddress)}
+ link={Paths.settingAddress}
+ />
+
+ }
+ title={t('setting.personality')}
+ isActive={isActive(Paths.settingPersonality)}
+ link={Paths.settingPersonality}
+ />
+
+ }
+ title={t('setting.signature')}
+ isActive={isActive(Paths.settingSignature)}
+ link={Paths.settingSignature}
+ />
+
+
+
+
+ }
+ title={t('sidebar.logout')}
+ isActive={isActive('logout')}
+ link={`#`}
+ isLogout
+ />
+
+
+
+
+
+ )
+}
+
+export default SideBar
\ No newline at end of file
diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx
new file mode 100644
index 0000000..55560f8
--- /dev/null
+++ b/src/shared/SideBarItem.tsx
@@ -0,0 +1,37 @@
+import { FC, ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { clx } from '../helpers/utils'
+
+
+type Props = {
+ icon: ReactNode,
+ title: string,
+ isActive: boolean,
+ link: string,
+ isLogout?: boolean,
+ isWithoutLine?: boolean
+}
+
+const SideBarItem: FC
= (props: Props) => {
+
+ return (
+
+ {
+ !props.isWithoutLine &&
+
+ }
+
+ {props.icon}
+
+ {props.title}
+
+
+ {showPicker && (
+