formik and yup in request design

package-lock.json

@@ -15,6 +15,7 @@
         "axios": "^1.13.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "formik": "^2.4.9",
         "html2canvas": "^1.4.1",
         "i18next": "^25.6.2",
         "iconsax-react": "^0.0.8",
@@ -32,6 +33,7 @@
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.17",
         "use-image": "^1.1.4",
+        "yup": "^1.7.1",
         "zustand": "^5.0.8"
       },
       "devDependencies": {
@@ -2081,6 +2083,18 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
+      "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2819,6 +2833,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3330,6 +3353,31 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.9.tgz",
+      "integrity": "sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3500,6 +3548,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
@@ -4053,6 +4110,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4395,6 +4464,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
@@ -4510,6 +4585,12 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "license": "MIT"
+    },
     "node_modules/react-i18next": {
       "version": "16.3.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.3.0.tgz",
@@ -4890,6 +4971,18 @@
         "utrie": "^1.0.2"
       }
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -4948,6 +5041,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -4980,6 +5079,18 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -5252,6 +5363,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yup": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
     "node_modules/zustand": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",

package.json

@@ -17,6 +17,7 @@
     "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "formik": "^2.4.9",
     "html2canvas": "^1.4.1",
     "i18next": "^25.6.2",
     "iconsax-react": "^0.0.8",
@@ -34,6 +35,7 @@
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
     "use-image": "^1.1.4",
+    "yup": "^1.7.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

src/langs/fa.json

@@ -3,7 +3,8 @@
     "menu": "منو",
     "home_page": "صفحه اصلی",
     "catalog": "کاتالوگ",
-    "logout": "خروج"
+    "logout": "خروج",
+    "request_design": "درخواست طراحی"
   },
   "header": {
     "search": "جستجو",

src/pages/designer/Request.tsx

@@ -1,11 +1,15 @@
 import { usePageTitle } from '@/hooks/usePageTitle'
-import { useMemo, useState, type FC } from 'react'
+import { type FC } from 'react'
+import { Form, Formik, type FormikProps } from 'formik'
+import * as Yup from 'yup'
 import Button from '@/components/Button'
 import DatePicker from '@/components/DatePicker'
 import Input from '@/components/Input'
 import Select from '@/components/Select'
 import Textarea from '@/components/Textarea'
 import UploadBoxDraggble from '@/components/UploadBoxDraggble'
+import Error from '@/components/Error'
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
 
 const PRICE_PER_PAGE = 1000
 
@@ -17,89 +21,184 @@ const pageCountOptions = Array.from({ length: 20 }, (_, index) => {
     }
 })
 
+export type DesignerRequestFormValues = {
+    title: string
+    count: number
+    desc: string
+    expectedDate: string
+    attachments: string[]
+}
+
+const initialValues: DesignerRequestFormValues = {
+    title: '',
+    count: 1,
+    desc: '',
+    expectedDate: '',
+    attachments: [],
+}
+
+const validationSchema = Yup.object({
+    title: Yup.string().trim().required('عنوان کاتالوگ الزامی است'),
+    count: Yup.number()
+        .min(1, 'حداقل تعداد صفحات ۱ است')
+        .max(20, 'حداکثر تعداد صفحات ۲۰ است')
+        .required('تعداد صفحات الزامی است'),
+    desc: Yup.string().trim(),
+    expectedDate: Yup.string().required('زمان تحویل الزامی است'),
+    attachments: Yup.array().of(Yup.string()),
+})
+
+type DesignerRequestFormFieldsProps = FormikProps<DesignerRequestFormValues> & {
+    uploadFile: ReturnType<typeof useSingleUpload>['mutateAsync']
+    isUploading: boolean
+}
+
+const DesignerRequestFormFields: FC<DesignerRequestFormFieldsProps> = ({
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    setFieldValue,
+    setFieldTouched,
+    handleChange,
+    handleBlur,
+    uploadFile,
+    isUploading,
+}) => {
+    const totalPrice = values.count * PRICE_PER_PAGE
+
+    const handleAttachmentChange = async (files: File[]) => {
+        if (files.length === 0) {
+            await setFieldValue('attachments', [])
+            setFieldTouched('attachments', true)
+            return
+        }
+
+        try {
+            const response = await uploadFile(files[0])
+            await setFieldValue('attachments', [response.data.url])
+        } catch {
+            await setFieldValue('attachments', [])
+        } finally {
+            setFieldTouched('attachments', true)
+        }
+    }
+
+    return (
+        <Form className='mt-6 space-y-5'>
+            <Input
+                label='عنوان کاتالوگ'
+                name='title'
+                value={values.title}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                error_text={touched.title ? errors.title : undefined}
+            />
+
+            <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+                <DatePicker
+                    label='زمان تحویل موردنظر'
+                    placeholder='تاریخ را انتخاب کنید'
+                    defaulValue={values.expectedDate}
+                    onChange={(date) => {
+                        setFieldValue('expectedDate', date)
+                        setFieldTouched('expectedDate', true)
+                    }}
+                    error_text={touched.expectedDate ? errors.expectedDate : undefined}
+                />
+                <Select
+                    label='تعداد صفحات'
+                    name='count'
+                    value={String(values.count)}
+                    items={pageCountOptions}
+                    onChange={(event) => setFieldValue('count', Number(event.target.value))}
+                    onBlur={handleBlur}
+                    error_text={touched.count ? errors.count : undefined}
+                />
+            </div>
+
+            <Textarea
+                label='توضیحات'
+                name='desc'
+                value={values.desc}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className='min-h-[96px]'
+                error_text={touched.desc ? errors.desc : undefined}
+            />
+
+            <div>
+                <div className='mb-2 text-sm'>فایل های ضمیمه</div>
+                <UploadBoxDraggble
+                    label='فایل مورد نظر را آپلود کنید'
+                    onChange={handleAttachmentChange}
+                    isMultiple={false}
+                    isFile
+                    isLoading={isUploading}
+                />
+                {touched.attachments && errors.attachments ? (
+                    <Error errorText={String(errors.attachments)} />
+                ) : null}
+            </div>
+
+            <div className='flex'>
+                <div className='flex-1'></div>
+                <div className='flex-1 flex gap-4'>
+                    <div className='w-[250px]'>
+                        <Input
+                            label='قیمت به ازای هر صفحه'
+                            value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
+                            readOnly
+                        />
+                    </div>
+                    <Input
+                        label='مبلغ قابل پرداخت برای شما'
+                        value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
+                        readOnly
+                    />
+                </div>
+            </div>
+
+            <div className='flex justify-end mt-5'>
+                <Button
+                    type='submit'
+                    className='w-fit px-6'
+                    disabled={isSubmitting || isUploading}
+                >
+                    ثبت درخواست
+                </Button>
+            </div>
+        </Form>
+    )
+}
+
 const DesignerRequest: FC = () => {
     usePageTitle('درخواست طراحی')
-    const [catalogTitle, setCatalogTitle] = useState('')
+    const { mutateAsync: uploadFile, isPending: isUploading } = useSingleUpload()
-    const [, setDeliveryDate] = useState('')
-    const [pageCount, setPageCount] = useState('1')
-    const [description, setDescription] = useState('')
-    const [, setAttachment] = useState<File[]>([])
 
-    const totalPrice = useMemo(() => {
+    const handleSubmit = (values: DesignerRequestFormValues) => {
-        return Number(pageCount || 0) * PRICE_PER_PAGE
+        console.log(values)
-    }, [pageCount])
-
-    const handleAttachmentChange = (files: File[]) => {
-        setAttachment(files)
     }
 
     return (
         <div className='mt-4 w-full'>
             <h1 className=''>درخواست طراحی کاتالوگ</h1>
             <div className='rounded-[32px] bg-white p-4 md:p-6 lg:p-8 mt-6'>
-
+                <Formik
-                <div className='mt-6 space-y-5'>
+                    initialValues={initialValues}
-                    <Input
+                    validationSchema={validationSchema}
-                        label='عنوان کاتالوگ'
+                    onSubmit={handleSubmit}
-                        value={catalogTitle}
+                >
-                        onChange={(event) => setCatalogTitle(event.target.value)}
+                    {(formikProps) => (
-                    />
+                        <DesignerRequestFormFields
-
+                            {...formikProps}
-                    <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+                            uploadFile={uploadFile}
-                        <DatePicker
+                            isUploading={isUploading}
-                            label='زمان تحویل موردنظر'
-                            placeholder='تاریخ را انتخاب کنید'
-                            onChange={(date) => setDeliveryDate(date)}
                         />
-                        <Select
+                    )}
-                            label='تعداد صفحات'
+                </Formik>
-                            value={pageCount}
+            </div>
-                            items={pageCountOptions}
+        </div>
-                            onChange={(event) => setPageCount(event.target.value)}
-                        />
-                    </div>
-
-                    <Textarea
-                        label='توضیحات'
-                        value={description}
-                        onChange={(event) => setDescription(event.target.value)}
-                        className='min-h-[96px]'
-                    />
-
-                    <div>
-                        <div className='mb-2 text-sm'>فایل های ضمیمه</div>
-                        <UploadBoxDraggble
-                            label='فایل مورد نظر را آپلود کنید'
-                            onChange={handleAttachmentChange}
-                            isMultiple={false}
-                            isFile
-                        />
-                    </div>
-
-                    <div className='flex'>
-                        <div className='flex-1'></div>
-                        <div className='flex-1 flex gap-4'>
-                            <div className='w-[250px]'>
-                                <Input
-                                    label='قیمت به ازای هر صفحه'
-                                    value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
-                                    readOnly
-                                />
-                            </div>
-                            <Input
-                                label='مبلغ قابل پرداخت برای شما'
-                                value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
-                                readOnly
-                            />
-                        </div>
-                    </div>
-
-                    <div className='flex justify-end mt-5'>
-                        <Button className='w-fit px-6'>ثبت درخواست</Button>
-                    </div>
-                </div>
-            </div >
-        </div >
     )
 }
 

src/shared/SideBar.tsx

@@ -1,124 +1,159 @@
-import { type FC, useEffect } from 'react'
+import { Brush2, DocumentText, Home2, Logout } from "iconsax-react";
-import LogoImage from '../assets/images/logo.svg'
+import { type FC, useEffect } from "react";
-import LogoSmall from '../assets/images/logo-small.svg'
+import { useTranslation } from "react-i18next";
-import { useTranslation } from 'react-i18next'
+import { useLocation } from "react-router-dom";
-import {
+import LogoSmall from "../assets/images/logo-small.svg";
-    DocumentText,
+import LogoImage from "../assets/images/logo.svg";
-    Home2,
+import { Paths } from "../config/Paths";
-    Logout,
+import { clx } from "../helpers/utils";
-} from 'iconsax-react'
+import BuyCatalog from "./components/BuyCatalog";
-import SideBarItem from './SideBarItem'
+import SideBarItem from "./SideBarItem";
-import { useLocation } from 'react-router-dom'
+import { useSharedStore } from "./store/sharedStore";
-import { useSharedStore } from './store/sharedStore'
-import { clx } from '../helpers/utils'
-import { Paths } from '../config/Paths'
-import BuyCatalog from './components/BuyCatalog'
-
 
 const SideBar: FC = () => {
+  const { t } = useTranslation("global");
+  const {
+    openSidebar,
+    setOpenSidebar,
+    hasSubMenu,
+    setSubMenuName,
+    setSubtMenu,
+    subMenuName,
+  } = useSharedStore();
+  const location = useLocation();
 
-    const { t } = useTranslation('global')
+  const isActive = (path: string) => {
-    const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
+    const pathname = location.pathname;
-    const location = useLocation()
+    if (path === "/") return pathname === "/";
+    return pathname === path || pathname.startsWith(path + "/");
+  };
 
-    const isActive = (path: string) => {
+  useEffect(() => {
-        const pathname = location.pathname
+    const split = location.pathname.split("/");
-        if (path === '/') return pathname === '/'
+
-        return pathname === path || pathname.startsWith(path + '/')
+    if (split[1] === "dashboard" || split[1] === "products") {
+      setSubMenuName(split[1]);
+      setSubtMenu(true);
+    } else {
+      setSubMenuName("");
+      setSubtMenu(false);
     }
+  }, [location.pathname, setSubMenuName, setSubtMenu]);
 
-    useEffect(() => {
+  const iconSizeSideBar = 20;
-        const split = location.pathname.split('/')
 
-        if (split[1] === 'dashboard' || split[1] === 'products') {
+  return (
-            setSubMenuName(split[1])
+    <>
-            setSubtMenu(true)
+      {openSidebar && (
-        } else {
+        <div
-            setSubMenuName('')
+          className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10"
-            setSubtMenu(false)
+          onClick={() => setOpenSidebar(false)}
-        }
+        />
-    }, [location.pathname, setSubMenuName, setSubtMenu])
+      )}
+      <div
+        className={clx(
+          "fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12",
+          openSidebar && "opacity-100 visible translate-x-0 block z-40",
+          hasSubMenu && "w-24 rounded-tl-none! rounded-bl-none!",
+        )}
+      >
+        <div className="flex justify-center">
+          {!hasSubMenu ? (
+            <img src={LogoImage} className="w-[140px]" />
+          ) : (
+            <img src={LogoSmall} className="w-7" />
+          )}
+        </div>
 
-    const iconSizeSideBar = 20
+        <div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
+          <div
+            className={clx(
+              "mt-10 px-12 text-header text-sm font-normal",
+              hasSubMenu && "px-2 text-center",
+            )}
+          >
+            {t("sidebar.menu")}
+          </div>
 
-    return (
+          <div className="text-xs text-[#8C90A3]">
-        <>
+            <SideBarItem
-            {
+              icon={
-                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
+                <Home2
-            }
+                  variant={isActive(Paths.home) ? "Bold" : "Outline"}
-            <div
+                  color={isActive(Paths.home) ? "black" : "#8C90A3"}
-                className={clx(
+                  size={iconSizeSideBar}
-                    'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
+                />
-                    openSidebar && 'opacity-100 visible translate-x-0 block z-40',
+              }
-                    hasSubMenu && 'w-24 rounded-tl-none! rounded-bl-none!'
+              title={t("sidebar.home_page")}
-                )}
+              isActive={isActive(Paths.home)}
-            >
+              link={Paths.home}
-                <div className='flex justify-center'>
+              activeName={Paths.home}
-                    {
+            />
-                        !hasSubMenu ?
-                            <img src={LogoImage} className='w-[140px]' />
-                            :
-                            <img src={LogoSmall} className='w-7' />
-                    }
-                </div>
 
-                <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
+            <SideBarItem
+              icon={
+                <DocumentText
+                  variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"}
+                  color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.catalog")}
+              isActive={isActive(Paths.catalog.list)}
+              link={Paths.catalog.list}
+              activeName={Paths.catalog.list}
+            />
 
-                    <div className={clx(
+            <SideBarItem
-                        'mt-10 px-12 text-header text-sm font-normal',
+              icon={
-                        hasSubMenu && 'px-2 text-center'
+                <Brush2
-                    )}>
+                  variant={
-                        {t('sidebar.menu')}
+                    isActive(Paths.designer.request) ? "Bold" : "Outline"
-                    </div>
+                  }
+                  color={isActive(Paths.designer.request) ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.request_design")}
+              isActive={isActive(Paths.designer.request)}
+              link={Paths.designer.request}
+              activeName={Paths.designer.request}
+            />
+          </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
+          <div className="flex-1 flex flex-col justify-end mt-14">
-                        <SideBarItem
+            <BuyCatalog />
-                            icon={<Home2 variant={isActive(Paths.home) ? 'Bold' : 'Outline'} color={isActive(Paths.home) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+            <div className="text-xs text-[#8C90A3] mt-5">
-                            title={t('sidebar.home_page')}
+              <SideBarItem
-                            isActive={isActive(Paths.home)}
+                icon={
-                            link={Paths.home}
+                  <Logout
-                            activeName={Paths.home}
+                    variant={isActive("logout") ? "Bold" : "Outline"}
-                        />
+                    color={isActive("logout") ? "black" : "#8C90A3"}
-
+                    size={iconSizeSideBar}
-                        <SideBarItem
+                  />
-                            icon={<DocumentText variant={isActive(Paths.catalog.list) ? 'Bold' : 'Outline'} color={isActive(Paths.catalog.list) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                }
-                            title={t('sidebar.catalog')}
+                title="خروج"
-                            isActive={isActive(Paths.catalog.list)}
+                isActive={isActive("logout")}
-                            link={Paths.catalog.list}
+                link={`#`}
-                            activeName={Paths.catalog.list}
+                isLogout
-                        />
+                activeName=""
-                    </div>
+              />
-
-                    <div className='flex-1 flex flex-col justify-end mt-14'>
-                        <BuyCatalog />
-                        <div className='text-xs text-[#8C90A3] mt-5'>
-                            <SideBarItem
-                                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title="خروج"
-                                isActive={isActive('logout')}
-                                link={`#`}
-                                isLogout
-                                activeName=''
-                            />
-                        </div>
-                    </div>
-                </div>
             </div>
+          </div>
+        </div>
+      </div>
 
-            {/* منوی فرعی */}
+      {/* منوی فرعی */}
-            {
+      {hasSubMenu && (openSidebar || window.innerWidth > 1139) && (
-                hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
+        <div className="fixed  xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border">
-                <div className='fixed  xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border'>
+          {subMenuName === "dashboard"
-                    {
+            ? null
-                        subMenuName === 'dashboard' ? null
+            : // <DashboardSubMenu />
-                            // <DashboardSubMenu />
+              null}
-                            : null
+        </div>
-                    }
+      )}
-                </div>
+    </>
-            }
+  );
-        </>
+};
-    )
-}
 
-
+export default SideBar;
-export default SideBar