add: SideMenu & BottomNavbar locales

src/app/[locale]/layout.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
   description: 'Webapp dashboard'
 }
 
-const i18nNamespaces = ['auth'];
+const i18nNamespaces = ['auth', 'common'];
 
 export default async function RootLayout({
   children,

src/components/menu/SideMenu.tsx

@@ -20,6 +20,7 @@ import Button from '../button/PrimaryButton';
 import { useAuthStore } from '@/zustand/authStore';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
 
 type MenuItemType = {
     href: string | undefined;
@@ -30,20 +31,20 @@ type MenuItemType = {
 
 const menuItems: Array<Array<MenuItemType>> = [
     [
-        { href: '/', title: 'اعلان ها', icon: <NotificationBellIcon width={20} height={20} /> },
+        { href: '/', title: 'Notifications', icon: <NotificationBellIcon width={20} height={20} /> },
-        { href: 'my-services', title: 'باشگاه مشتریان', icon: <CupIcon width={20} height={20} /> },
+        { href: 'my-services', title: 'CustomerClub', icon: <CupIcon width={20} height={20} /> },
-        { href: 'services', title: 'کد های تخفیف', icon: <TicketDiscountIcon width={20} height={20} /> },
+        { href: 'services', title: 'Discounts', icon: <TicketDiscountIcon width={20} height={20} /> },
-        { href: 'orders', title: 'لیست سفارشات', icon: <CalendarSearchIcon width={20} height={20} /> },
+        { href: 'orders', title: 'Orders', icon: <CalendarSearchIcon width={20} height={20} /> },
-        { href: 'transactions', title: 'لیست تراکنش ها', icon: <ReceiptIcon width={20} height={20} /> },
+        { href: 'transactions', title: 'Transactions', icon: <ReceiptIcon width={20} height={20} /> },
-        { href: '/', title: 'بازی و سرگرمی ها', icon: <GameControllerIcon width={20} height={20} /> },
+        { href: '/', title: 'Games', icon: <GameControllerIcon width={20} height={20} /> },
-        { href: 'my-services', title: 'معرفی به دوستان', icon: <ThumbsUpIcon width={20} height={20} /> },
+        { href: 'my-services', title: 'ShareWithFriends', icon: <ThumbsUpIcon width={20} height={20} /> },
-        { href: 'services', title: 'گزارش اشکال', icon: <NoteBoardIcon width={20} height={20} /> },
+        { href: 'services', title: 'ReportProblem', icon: <NoteBoardIcon width={20} height={20} /> },
-        { href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon width={20} height={20} /> }
+        { href: 'invoices', title: 'InstallApp', icon: <DirectboxReceiveIcon width={20} height={20} /> }
     ],
     [],
     [
-        { auth: true, href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} /> },
+        { auth: true, href: undefined, title: 'Preferences', icon: <SettingIcon width={20} height={20} /> },
-        { auth: true, href: '?logout', title: 'خروج', icon: <ExitIcon width={20} height={20} /> }
+        { auth: true, href: '?logout', title: 'Logout', icon: <ExitIcon width={20} height={20} /> }
     ]
 ];
 
@@ -64,6 +65,12 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const params = useParams();
     const { name } = params;
     const pathname = usePathname();
+    const { t: tMenu } = useTranslation('common', {
+        keyPrefix: 'SideMenu'
+    });
+    const { t: tLogoutModal } = useTranslation('common', {
+        keyPrefix: 'LogoutModal'
+    });
 
     const variants: Variants = {
         hidden: { x: '100%', transition: { duration: 0.1, ease: 'easeInOut' } },
@@ -95,7 +102,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
         <>
             <div className='w-full' ref={closeRef} onClick={toggleMenuState}>
                 <BlurredOverlayContainer bgOpacity={40} visible={menuStateMemo} outDelay={150} inDuration={200}>
-                    <aside aria-label="منوی کناری">
+                    <aside aria-label={tMenu('AriaLabel')}>
                         <motion.nav
                             drag='x'
                             dragConstraints={{ left: 0, right: 20 }}
@@ -117,7 +124,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                         <h6 className="text-start text-sm text-menu-header mt-2 mb-[23px]">منو</h6>
                                     </header>
 
-                                    <nav aria-label="لینک‌های اصلی">
+                                    <nav aria-label={tMenu('NavAriaLabel')}>
                                         <ul>
                                             {menuItems[0]
                                                 .filter(item => !item.auth || (item.auth && userIsAuthenticated))
@@ -128,7 +135,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                             <SideMenuItem
                                                                 className={clsx(isActive && 'text-foreground!')}
                                                                 href={item.href ?? ''}
-                                                                title={item.title}
+                                                                title={tMenu(item.title)}
                                                                 icon={
                                                                     <span className={clsx(isActive ? 'text-foreground!' : 'text-icon-deactive')}>
                                                                         {item.icon}
@@ -142,7 +149,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                     </nav>
                                 </div>
 
-                                <section aria-label="پایین منو">
+                                <section aria-label={tMenu('ControlsAriaLabel')}>
                                     <ul className="flex flex-col gap-6 pt-16">
                                         {menuItems[2]
                                             .filter(item => !item.auth || (item.auth && userIsAuthenticated))
@@ -154,7 +161,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                         typeof item.href === 'string'
                                                             ? hrefOnClicks.find((i) => i.href === item.href)?.handler
                                                             : undefined
-                                                    } title={item.title}
+                                                    }
+                                                    title={tMenu(item.title)}
                                                     icon={<span className="text-icon-deactive">{item.icon}</span>}
                                                 />
                                             ))}
@@ -177,11 +185,19 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                         transition={{ duration: 0.1, ease: 'easeInOut' }}
                         className="top-1/2 min-w-xs w-full max-w-sm text-center -translate-y-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-white/63 rounded-4xl"
                     >
-                        <h2 className="text-base font-medium">خروج از سیستم</h2>
+                        <h2 className="text-base font-medium">
-                        <p className="text-xs font-medium mt-6">آیا میخواهید از سیستم خارج شوید؟</p>
+                            {tLogoutModal('Heading')}
+                        </h2>
+                        <p className="text-xs font-medium mt-6">
+                            {tLogoutModal('Description')}
+                        </p>
                         <div className="grid grid-cols-2 gap-5.5 mt-8">
-                            <Button onClick={onLogout} className="text-sm font-normal">بله خارج می‌شوم</Button>
+                            <Button onClick={onLogout} className="text-sm font-normal">
-                            <Button onClick={toggleLogoutModalVisiblity} className="bg-disabled! text-disabled2! text-sm font-normal">منصرف شدم</Button>
+                                {tLogoutModal('ButtonOk')}
+                            </Button>
+                            <Button onClick={toggleLogoutModalVisiblity} className="bg-disabled! text-disabled2! text-sm font-normal">
+                                {tLogoutModal('ButtonCancel')}
+                            </Button>
                         </div>
                     </motion.div>
                 </div>

src/components/navigation/BottomNavBar.tsx

@@ -9,12 +9,16 @@ import BagIcon from '../icons/BagIcon'
 import HeartIcon from '../icons/HeartIcon'
 import { useParams, usePathname } from 'next/navigation'
 import HomeIcon from '../icons/HomeIcon'
+import { useTranslation } from 'react-i18next';
 
 function BottomNavBar() {
   const params = useParams();
   const { name } = params;
   const pathname = usePathname();
   const isHomeRoute = pathname === `/${name}`;
+  const { t } = useTranslation('common', {
+    keyPrefix: 'BottomNavbar'
+  });
 
   return (
     <div className="fixed bottom-0 left-0 w-full bg-transparent">
@@ -38,8 +42,8 @@ function BottomNavBar() {
             <nav
               className="h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
             >
-              <BottomNavLink href={`/${name}/orders`} icon={<BagIcon width={20} height={20} />} value="سبد خرید" />
+              <BottomNavLink href={`/${name}/orders`} icon={<BagIcon width={20} height={20} />} value={t('Cart')} />
-              <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value="پیجر" />
+              <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value={t('Pager')} />
               <BottomNavHighlightLink
                 href={`/${name}`}
                 icon={
@@ -49,9 +53,9 @@ function BottomNavBar() {
                     strokeWidth={1} 
                     width={20} 
                     height={20} />}
-                value="منو" />
+                value={t('Menu')} />
-              <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon width={20} height={20} />} value="اعلان ها" />
+              <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon width={20} height={20} />} value={t('Notifications')} />
-              <BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value="پسند ها" />
+              <BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value={t('Favorites')} />
             </nav>
           </foreignObject>
 

src/locales/fa/common.json

@@ -0,0 +1,32 @@
+{
+    "BottomNavbar": {
+        "Menu": "منو",
+        "Cart": "سبد خرید",
+        "Pager": "پیجر",
+        "Notifications": "اعلان ها",
+        "Favorites": "پسند ها",
+        "AriaLabel": ""
+    },
+    "SideMenu": {
+        "Notifications": "اعلان ها",
+        "CustomerClub": "باشگاه مشتریان",
+        "Discounts": "کد های تخفیف",
+        "Orders": "لیست سفارشات",
+        "Transactions": "لیست تراکنش ها",
+        "Games": "بازی و سرگرمی ها",
+        "ShareWithFriends": "معرفی به دوستان",
+        "ReportProblem": "گزارش اشکال",
+        "InstallApp": "نصب اپلیکیشن",
+        "Preferences": "تنظیمات",
+        "Logout": "خروج",
+        "AriaLabel": "منوی کناری",
+        "NavAriaLabel": "لینک‌های اصلی",
+        "ControlsAriaLabel": "پایین منو"
+    },
+    "LogoutModal": {
+        "Heading": "خروج از سیستم",
+        "Description": "آیا میخواهید از سیستم خارج شوید؟",
+        "ButtonOk": "بله خارج می‌شوم",
+        "ButtonCancel": "منصرف شدم"
+    }
+}