fix: side menu links

src/app/[name]/(Main)/transactions/discount/club/page.tsx

@@ -0,0 +1,90 @@
+import { Button } from '@/components/ui/button'
+import React from 'react'
+
+function TransactionsIndex() {
+    return (
+        <section className='pt-6'>
+            <h1 className='font-medium'>کدهای تخفیف</h1>
+
+            <section
+                aria-label="درباره کدهای تخفیف"
+                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
+            >
+                <div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
+                    <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
+                        <svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g opacity="0.15">
+                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="#AFAFAF" />
+                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="#AFAFAF" />
+                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="#AFAFAF" />
+                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="#AFAFAF" />
+                            </g>
+                        </svg>
+                    </div>
+                    <h2 className='font-bold text-base'>کدهای تخفیف شما</h2>
+                    <p className='text-xs mt-[7px]'>کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت‌ها استفاده کنید</p>
+                </div>
+
+                <div
+                    className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal'
+                    style={{
+                        background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)',
+                    }}
+                >
+                    <p className='text-sm2 text-white leading-tight'>
+                        <span className='font-medium'>Your</span><br />
+                        <span className='font-bold'>Coupon</span>
+                    </p>
+
+                    <svg className='w-full' height="20" viewBox="0 0 72 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.0033 0H0.845703V20H4.0033V0Z" fill="white" />
+                        <path d="M9.266 0H6.1084V20H9.266V0Z" fill="white" />
+                        <path d="M12.4236 0H11.3711V20H12.4236V0Z" fill="white" />
+                        <path d="M16.6344 0H14.5293V20H16.6344V0Z" fill="white" />
+                        <path d="M19.7916 0H17.6865V20H19.7916V0Z" fill="white" />
+                        <path d="M24.0018 0H22.9492V20H24.0018V0Z" fill="white" />
+                        <path d="M28.2113 0H25.0537V20H28.2113V0Z" fill="white" />
+                        <path d="M30.3182 0H29.2656V20H30.3182V0Z" fill="white" />
+                        <path d="M33.4744 0H32.4219V20H33.4744V0Z" fill="white" />
+                        <path d="M36.6324 0H34.5273V20H36.6324V0Z" fill="white" />
+                        <path d="M42.9478 0H40.8428V20H42.9478V0Z" fill="white" />
+                        <path d="M47.1576 0H44V20H47.1576V0Z" fill="white" />
+                        <path d="M49.2625 0H48.21V20H49.2625V0Z" fill="white" />
+                        <path d="M55.5785 0H52.4209V20H55.5785V0Z" fill="white" />
+                        <path d="M57.6824 0H56.6299V20H57.6824V0Z" fill="white" />
+                        <path d="M62.9455 0H58.7354V20H62.9455V0Z" fill="white" />
+                        <path d="M66.1031 0H63.998V20H66.1031V0Z" fill="white" />
+                        <path d="M71.3666 0H68.209V20H71.3666V0Z" fill="white" />
+                    </svg>
+                </div>
+            </section>
+
+            <section className="mt-6 space-y-6" aria-label="لیست کدهای تخفیف">
+                {[1, 2, 3].map((_, i) => (
+                    <article
+                        key={i}
+                        className='bg-container rounded-normal flex justify-between items-center'
+                    >
+                        <div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
+                            <h3 className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</h3>
+                            <p className='text-xs mt-[7px]'>قابل استفاده برای همه‌ی منوها و محصولات</p>
+                            <Button
+                                className='w-fit px-10 py-1.5 mt-4 text-xs rounded-lg font-light'
+                                aria-label="کپی کد تخفیف"
+                            >
+                                کپی کد
+                            </Button>
+                        </div>
+                        <div>
+                            <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium' aria-label="کد تخفیف">
+                                F12BB587
+                            </p>
+                        </div>
+                    </article>
+                ))}
+            </section>
+        </section>
+    )
+}
+
+export default TransactionsIndex

src/app/[name]/(Main)/transactions/discount/page.tsx

@@ -0,0 +1,90 @@
+import { Button } from '@/components/ui/button'
+import React from 'react'
+
+function TransactionsIndex() {
+    return (
+        <section className='pt-6'>
+            <h1 className='font-medium'>کدهای تخفیف</h1>
+
+            <section
+                aria-label="درباره کدهای تخفیف"
+                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
+            >
+                <div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
+                    <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
+                        <svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g opacity="0.15">
+                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="#AFAFAF" />
+                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="#AFAFAF" />
+                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="#AFAFAF" />
+                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="#AFAFAF" />
+                            </g>
+                        </svg>
+                    </div>
+                    <h2 className='font-bold text-base'>کدهای تخفیف شما</h2>
+                    <p className='text-xs mt-[7px]'>کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت‌ها استفاده کنید</p>
+                </div>
+
+                <div
+                    className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal'
+                    style={{
+                        background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)',
+                    }}
+                >
+                    <p className='text-sm2 text-white leading-tight'>
+                        <span className='font-medium'>Your</span><br />
+                        <span className='font-bold'>Coupon</span>
+                    </p>
+
+                    <svg className='w-full' height="20" viewBox="0 0 72 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.0033 0H0.845703V20H4.0033V0Z" fill="white" />
+                        <path d="M9.266 0H6.1084V20H9.266V0Z" fill="white" />
+                        <path d="M12.4236 0H11.3711V20H12.4236V0Z" fill="white" />
+                        <path d="M16.6344 0H14.5293V20H16.6344V0Z" fill="white" />
+                        <path d="M19.7916 0H17.6865V20H19.7916V0Z" fill="white" />
+                        <path d="M24.0018 0H22.9492V20H24.0018V0Z" fill="white" />
+                        <path d="M28.2113 0H25.0537V20H28.2113V0Z" fill="white" />
+                        <path d="M30.3182 0H29.2656V20H30.3182V0Z" fill="white" />
+                        <path d="M33.4744 0H32.4219V20H33.4744V0Z" fill="white" />
+                        <path d="M36.6324 0H34.5273V20H36.6324V0Z" fill="white" />
+                        <path d="M42.9478 0H40.8428V20H42.9478V0Z" fill="white" />
+                        <path d="M47.1576 0H44V20H47.1576V0Z" fill="white" />
+                        <path d="M49.2625 0H48.21V20H49.2625V0Z" fill="white" />
+                        <path d="M55.5785 0H52.4209V20H55.5785V0Z" fill="white" />
+                        <path d="M57.6824 0H56.6299V20H57.6824V0Z" fill="white" />
+                        <path d="M62.9455 0H58.7354V20H62.9455V0Z" fill="white" />
+                        <path d="M66.1031 0H63.998V20H66.1031V0Z" fill="white" />
+                        <path d="M71.3666 0H68.209V20H71.3666V0Z" fill="white" />
+                    </svg>
+                </div>
+            </section>
+
+            <section className="mt-6 space-y-6" aria-label="لیست کدهای تخفیف">
+                {[1, 2, 3].map((_, i) => (
+                    <article
+                        key={i}
+                        className='bg-container rounded-normal flex justify-between items-center'
+                    >
+                        <div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
+                            <h3 className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</h3>
+                            <p className='text-xs mt-[7px]'>قابل استفاده برای همه‌ی منوها و محصولات</p>
+                            <Button
+                                className='w-fit px-10 py-1.5 mt-4 text-xs rounded-lg font-light'
+                                aria-label="کپی کد تخفیف"
+                            >
+                                کپی کد
+                            </Button>
+                        </div>
+                        <div>
+                            <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium' aria-label="کد تخفیف">
+                                F12BB587
+                            </p>
+                        </div>
+                    </article>
+                ))}
+            </section>
+        </section>
+    )
+}
+
+export default TransactionsIndex

src/app/[name]/(Main)/transactions/page.tsx

@@ -1,90 +1,54 @@
-import { Button } from '@/components/ui/button'
+import { DataTableDemo } from '@/components/ui/datatable'
+import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
+import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
 import React from 'react'
 
-function TransactionsIndex() {
+function TransactionsReviewIndex() {
     return (
-        <section className='pt-6'>
+        <section className='flex flex-col h-svh pb-10 pt-6 gap-4'>
-            <h1 className='font-medium'>کدهای تخفیف</h1>
+            <h1 className="font-medium text-base">لیست تراکنش ها</h1>
 
-            <section
+            <div className="grid grid-cols-3 gap-2 h-28">
-                aria-label="درباره کدهای تخفیف"
+                <div className="w-full h-full flex flex-col items-center justify-center p-2.5 text-center bg-container rounded-xl">
-                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
+                    <div className="size-8 bg-background rounded-full grid items-center">
-            >
+                        <MoneySend className='stroke-primary justify-self-center' size={20} />
-                <div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
+                    </div>
-                    <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
+                    <span className='text-xs2 pt-1'>مجموع واریز ها</span>
-                        <svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
-                            <g opacity="0.15">
+                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
-                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="#AFAFAF" />
+                        <ArrowUpRight size={10} className='stroke-green-600' />
-                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="#AFAFAF" />
+                        <div className="mt-0.5">30%</div>
-                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="#AFAFAF" />
+                    </span>
-                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="#AFAFAF" />
+                </div>
-                            </g>
+                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
-                        </svg>
+                    <div className="size-8 bg-background rounded-full grid items-center">
+                        <MoneyRecive className='stroke-primary justify-self-center' size={20} />
+                    </div>
+                    <span className='text-xs2 pt-1'>مجموع برداشت ها</span>
+                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
+                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
+                        <ArrowUpRight size={10} className='stroke-green-600' />
+                        <div className="mt-0.5">30%</div>
+                    </span>
+                </div>
+                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
+                    <div className="size-8 bg-background rounded-full grid items-center">
+                        <Wallet className='stroke-primary justify-self-center' size={20} />
+                    </div>
+                    <span className='text-xs2 pt-1'>موجودی کیف پول</span>
+                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
+                    <span className='text-xs2 text-red-600 mt-0.5 bg-red-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
+                        <ArrowDownLeft size={10} className='stroke-red-600' />
+                        <div className="mt-0.5">30%</div>
+                    </span>
                 </div>
-                    <h2 className='font-bold text-base'>کدهای تخفیف شما</h2>
-                    <p className='text-xs mt-[7px]'>کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت‌ها استفاده کنید</p>
             </div>
 
-                <div
+            <div className='w-full h-full bg-white rounded-3xl mt-0'>
-                    className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal'
+                <DataTableDemo />
-                    style={{
-                        background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)',
-                    }}
-                >
-                    <p className='text-sm2 text-white leading-tight'>
-                        <span className='font-medium'>Your</span><br />
-                        <span className='font-bold'>Coupon</span>
-                    </p>
-
-                    <svg className='w-full' height="20" viewBox="0 0 72 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M4.0033 0H0.845703V20H4.0033V0Z" fill="white" />
-                        <path d="M9.266 0H6.1084V20H9.266V0Z" fill="white" />
-                        <path d="M12.4236 0H11.3711V20H12.4236V0Z" fill="white" />
-                        <path d="M16.6344 0H14.5293V20H16.6344V0Z" fill="white" />
-                        <path d="M19.7916 0H17.6865V20H19.7916V0Z" fill="white" />
-                        <path d="M24.0018 0H22.9492V20H24.0018V0Z" fill="white" />
-                        <path d="M28.2113 0H25.0537V20H28.2113V0Z" fill="white" />
-                        <path d="M30.3182 0H29.2656V20H30.3182V0Z" fill="white" />
-                        <path d="M33.4744 0H32.4219V20H33.4744V0Z" fill="white" />
-                        <path d="M36.6324 0H34.5273V20H36.6324V0Z" fill="white" />
-                        <path d="M42.9478 0H40.8428V20H42.9478V0Z" fill="white" />
-                        <path d="M47.1576 0H44V20H47.1576V0Z" fill="white" />
-                        <path d="M49.2625 0H48.21V20H49.2625V0Z" fill="white" />
-                        <path d="M55.5785 0H52.4209V20H55.5785V0Z" fill="white" />
-                        <path d="M57.6824 0H56.6299V20H57.6824V0Z" fill="white" />
-                        <path d="M62.9455 0H58.7354V20H62.9455V0Z" fill="white" />
-                        <path d="M66.1031 0H63.998V20H66.1031V0Z" fill="white" />
-                        <path d="M71.3666 0H68.209V20H71.3666V0Z" fill="white" />
-                    </svg>
             </div>
         </section>
-
-            <section className="mt-6 space-y-6" aria-label="لیست کدهای تخفیف">
-                {[1, 2, 3].map((_, i) => (
-                    <article
-                        key={i}
-                        className='bg-container rounded-normal flex justify-between items-center'
-                    >
-                        <div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
-                            <h3 className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</h3>
-                            <p className='text-xs mt-[7px]'>قابل استفاده برای همه‌ی منوها و محصولات</p>
-                            <Button
-                                className='w-fit px-10 py-1.5 mt-4 text-xs rounded-lg font-light'
-                                aria-label="کپی کد تخفیف"
-                            >
-                                کپی کد
-                            </Button>
-                        </div>
-                        <div>
-                            <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium' aria-label="کد تخفیف">
-                                F12BB587
-                            </p>
-                        </div>
-                    </article>
-                ))}
-            </section>
-        </section>
     )
 }
 
-export default TransactionsIndex
+export default TransactionsReviewIndex

src/app/[name]/(Main)/transactions/review/page.tsx

@@ -1,54 +0,0 @@
-import { DataTableDemo } from '@/components/ui/datatable'
-import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
-import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
-import React from 'react'
-
-function TransactionsReviewIndex() {
-    return (
-        <section className='flex flex-col h-svh pb-10 pt-6 gap-4'>
-            <h1 className="font-medium text-base">لیست تراکنش ها</h1>
-
-            <div className="grid grid-cols-3 gap-2 h-28">
-                <div className="w-full h-full flex flex-col items-center justify-center p-2.5 text-center bg-container rounded-xl">
-                    <div className="size-8 bg-background rounded-full grid items-center">
-                        <MoneySend className='stroke-primary justify-self-center' size={20} />
-                    </div>
-                    <span className='text-xs2 pt-1'>مجموع واریز ها</span>
-                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
-                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
-                        <ArrowUpRight size={10} className='stroke-green-600' />
-                        <div className="mt-0.5">30%</div>
-                    </span>
-                </div>
-                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
-                    <div className="size-8 bg-background rounded-full grid items-center">
-                        <MoneyRecive className='stroke-primary justify-self-center' size={20} />
-                    </div>
-                    <span className='text-xs2 pt-1'>مجموع برداشت ها</span>
-                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
-                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
-                        <ArrowUpRight size={10} className='stroke-green-600' />
-                        <div className="mt-0.5">30%</div>
-                    </span>
-                </div>
-                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
-                    <div className="size-8 bg-background rounded-full grid items-center">
-                        <Wallet className='stroke-primary justify-self-center' size={20} />
-                    </div>
-                    <span className='text-xs2 pt-1'>موجودی کیف پول</span>
-                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
-                    <span className='text-xs2 text-red-600 mt-0.5 bg-red-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
-                        <ArrowDownLeft size={10} className='stroke-red-600' />
-                        <div className="mt-0.5">30%</div>
-                    </span>
-                </div>
-            </div>
-
-            <div className='w-full h-full bg-white rounded-3xl mt-0'>
-                <DataTableDemo />
-            </div>
-        </section>
-    )
-}
-
-export default TransactionsReviewIndex

src/components/menu/SideMenu.tsx

@@ -10,7 +10,7 @@ import Button from '../button/PrimaryButton';
 import { useParams, usePathname } from 'next/navigation';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { CalendarSearch, Cup, DirectboxReceive, DocumentCopy, Game, Icon, Instagram, Like1, LogoutCurve, Notification, Receipt1, Setting2, Share, TicketDiscount, Whatsapp } from 'iconsax-react';
+import { CalendarSearch, Cup, DirectboxReceive, DirectInbox, DocumentCopy, Game, Icon, Instagram, Like1, LogoutCurve, Notification, Receipt1, Setting2, Share, TicketDiscount, Whatsapp } from 'iconsax-react';
 import TelegramIcon from '../icons/TelegramIcon';
 import Modal from '../utils/Modal';
 import LogoutPrompt from '@/features/general/LogoutPrompt';
@@ -25,19 +25,19 @@ type MenuItemType = {
 
 const menuItems: Array<Array<MenuItemType>> = [
     [
-        { href: '/', title: 'Notifications', icon: Notification },
+        { href: 'notifications', title: 'Notifications', icon: Notification },
-        { href: 'my-services', title: 'CustomerClub', icon: Cup },
+        { href: 'transactions/discount/club', title: 'CustomerClub', icon: Cup },
-        { href: 'services', title: 'Discounts', icon: TicketDiscount },
+        { href: 'transactions/discount', title: 'Discounts', icon: TicketDiscount },
         { href: 'order/history', title: 'Orders', icon: CalendarSearch },
         { href: 'transactions', title: 'Transactions', icon: Receipt1 },
         { href: 'game', title: 'Games', icon: Game },
         { href: '?share', title: 'ShareWithFriends', icon: Like1 },
         { href: 'report', title: 'ReportProblem', icon: NoteBoardIcon },
-        { href: 'invoices', title: 'InstallApp', icon: DirectboxReceive }
+        { href: '?installpwa', title: 'InstallApp', icon: DirectboxReceive }
     ],
     [],
     [
-        { auth: true, href: undefined, title: 'Preferences', icon: Setting2 },
+        { auth: true, href: 'profile/settings', title: 'Preferences', icon: Setting2 },
         { auth: true, href: '?logout', title: 'Logout', icon: LogoutCurve }
     ]
 ];
@@ -55,6 +55,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const userIsAuthenticated = true; // useAuthStore((state) => state.isAuthenticated);
     const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
     const { state: shareModal, toggle: toggleShareModal } = useToggle();
+    const { state: installPwaModal, toggle: toggleInstallPwaModal } = useToggle();
 
     const params = useParams();
     const { name } = params;
@@ -65,6 +66,9 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const { t: tShareModal } = useTranslation('common', {
         keyPrefix: 'ShareModal'
     });
+    const { t: tInstallPwaModal } = useTranslation('common', {
+        keyPrefix: 'InstallPwaModal'
+    });
 
     const variants: Variants = {
         hidden: { x: '100%', transition: { duration: 0.1, ease: 'easeInOut' } },
@@ -79,7 +83,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
 
     const hrefOnClicks = [
         { href: '?logout', handler: toggleLogoutModal },
-        { href: '?share', handler: toggleShareModal }
+        { href: '?share', handler: toggleShareModal },
+        { href: '?installpwa', handler: toggleInstallPwaModal }
     ];
 
     const renderMenu = () => {
@@ -238,6 +243,25 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                     </div>
                 </div>
             </Modal>
+
+            {/* Install PWA modal */}
+            <Modal
+                visible={installPwaModal}
+                onClick={toggleInstallPwaModal}
+            >
+                <h2 className="text-base font-medium">
+                    <DirectInbox className="inline-block ml-2 mb-1.5 stroke-primary" size={24} />
+                    {tInstallPwaModal('Heading')}
+                </h2>
+                <p className="text-xs font-medium mt-6">
+                    {tInstallPwaModal('Description')}
+                </p>
+
+                <Button onClick={() => { }} className="text-sm mt-8">
+                    <span className="font-light">{tInstallPwaModal('ButtonOk')}</span>
+                </Button>
+
+            </Modal>
         </>
     );
 }

src/components/topbar/TopBar.tsx

@@ -60,12 +60,14 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                 <div className='flex items-center justify-end gap-3 xl:gap-6'>
                     {/* <NightModeSwitch checked={nightMode} onClick={toggleNightMode} /> */}
                     {/* <img className='hidden sm:block' src={rectangles} /> */}
-                    <span className='relative'>
+                    <Link
+                        href={`/${name}/notifications`}
+                        className='relative'>
                         <NotificationBellIcon className='size-4.5 text-icon-active' />
                         <span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-white'>
                             <div className='mt-0.25 place-self-center'>2</div>
                         </span>
-                    </span>
+                    </Link>
                     <button
                         id='profile-drop-toggle'
                         className='flex items-center justify-between'

src/locales/fa/common.json

@@ -46,5 +46,10 @@
         "ButtonOk": "بله پاک میکنم",
         "ButtonCancel": "منصرف شدم"
     },
+    "InstallPwaModal": {
+        "Heading": "نصب اپلیکیشن",
+        "Description": "برای نصب کلیک کنید.",
+        "ButtonOk": "نصب کن"
+    },
     "SearchPlaceholder": "جستجو"
 }