add: SideMenu & BottomNavbar locales

2025-07-24 15:16:54 +03:30
parent 1b3fac2f43
commit 6551b466ad
4 changed files with 78 additions and 26 deletions
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
  description: 'Webapp dashboard'
 }

-const i18nNamespaces = ['auth'];
+const i18nNamespaces = ['auth', 'common'];

 export default async function RootLayout({
  children,
@@ -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: 'my-services', title: 'باشگاه مشتریان', icon: <CupIcon width={20} height={20} /> },
-        { href: 'services', title: 'کد های تخفیف', icon: <TicketDiscountIcon width={20} height={20} /> },
-        { href: 'orders', title: 'لیست سفارشات', icon: <CalendarSearchIcon width={20} height={20} /> },
-        { href: 'transactions', title: 'لیست تراکنش ها', icon: <ReceiptIcon width={20} height={20} /> },
-        { href: '/', title: 'بازی و سرگرمی ها', icon: <GameControllerIcon width={20} height={20} /> },
-        { href: 'my-services', title: 'معرفی به دوستان', icon: <ThumbsUpIcon width={20} height={20} /> },
-        { href: 'services', title: 'گزارش اشکال', icon: <NoteBoardIcon width={20} height={20} /> },
-        { href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon width={20} height={20} /> }
+        { href: '/', title: 'Notifications', icon: <NotificationBellIcon width={20} height={20} /> },
+        { href: 'my-services', title: 'CustomerClub', icon: <CupIcon width={20} height={20} /> },
+        { href: 'services', title: 'Discounts', icon: <TicketDiscountIcon width={20} height={20} /> },
+        { href: 'orders', title: 'Orders', icon: <CalendarSearchIcon width={20} height={20} /> },
+        { href: 'transactions', title: 'Transactions', icon: <ReceiptIcon width={20} height={20} /> },
+        { href: '/', title: 'Games', icon: <GameControllerIcon width={20} height={20} /> },
+        { href: 'my-services', title: 'ShareWithFriends', icon: <ThumbsUpIcon width={20} height={20} /> },
+        { href: 'services', title: 'ReportProblem', icon: <NoteBoardIcon 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: '?logout', title: 'خروج', icon: <ExitIcon width={20} height={20} /> }
+        { auth: true, href: undefined, title: 'Preferences', icon: <SettingIcon 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>
-                        <p className="text-xs font-medium mt-6">آیا میخواهید از سیستم خارج شوید؟</p>
+                        <h2 className="text-base font-medium">
+                            {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={toggleLogoutModalVisiblity} className="bg-disabled! text-disabled2! text-sm font-normal">منصرف شدم</Button>
+                            <Button onClick={onLogout} className="text-sm font-normal">
+                                {tLogoutModal('ButtonOk')}
+                            </Button>
+                            <Button onClick={toggleLogoutModalVisiblity} className="bg-disabled! text-disabled2! text-sm font-normal">
+                                {tLogoutModal('ButtonCancel')}
+                            </Button>
                        </div>
                    </motion.div>
                </div>
@@ -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}/pager`} icon={<PagerIcon 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={t('Pager')} />
              <BottomNavHighlightLink
                href={`/${name}`}
                icon={
@@ -49,9 +53,9 @@ function BottomNavBar() {
                    strokeWidth={1} 
                    width={20} 
                    height={20} />}
-                value="منو" />
-              <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon width={20} height={20} />} value="اعلان ها" />
-              <BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value="پسند ها" />
+                value={t('Menu')} />
+              <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon width={20} height={20} />} value={t('Notifications')} />
+              <BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value={t('Favorites')} />
            </nav>
          </foreignObject>

@@ -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": "منصرف شدم"
+    }
+}