add localization to sidebar items

doroudi · Nov 18, 2023 · fa2c195 · fa2c195
1 parent f8b061d
commit fa2c195
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 25 deletions.
diff --git a/locales/en.yml b/locales/en.yml
@@ -5,11 +5,23 @@ en: English
 fa: Persian
 menu:
   dashboard: Dashboard
-  stats: Stats
+  productManagement: Products Management
   products: Products
   categories: Categories
+  brands: Brands
+  colors: Colors
   orders: Orders
+  feedbacks: Feedbacks
+  reviews: Reviews
+  messages: Messages
+  support: Support
   comments: Comments
+  announcement: Announcement
+  news: News
+  notifications: Notifications
+  sms: Sms
+  accountSettings: Account Settings
+  websiteSettings: Website Settings
   blog: Blog
   users: Users
   customers: Customers

diff --git a/locales/fa.yml b/locales/fa.yml
@@ -4,14 +4,26 @@ en: انگلیسی
 fa: فارسی
 menu:
   dashboard: داشبورد
-  stats: آمار
+  productManagement: مدیریت محصولات
   products: محصولات
-  categories: دسته ها
-  orders: سفارش ها
+  categories: دسته بندی ها
+  brands: برند ها
+  colors: رنگ ها
+  orders: سفارشات
+  feedbacks: بازخورد ها
+  reviews: بررسی ها
+  messages: نظرات
+  support: پشتیبانی
   comments: نظرات
-  blog: وبلاگ
+  announcement: اطلاع رسانی
+  news: اخبار
+  notifications: نوتیفیکشن ها
+  sms: پیامک
+  accountSettings: تنظیمات کاربر
+  websiteSettings: تنظیمات وبسایت
+  blog: بلاگ
   users: کاربران
-  customers: مشتریان
+  customers: مشتری ها
   settings: تنظیمات
 userMenu:
   language: زبان

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -41,7 +41,7 @@ function renderLabel(title: string, path: string) {
 }
 const menuOptions: MenuOption[] = [
   {
-    label: () => renderLabel('Dashboard', '/'),
+    label: () => renderLabel(t('menu.dashboard'), '/'),
     key: 'dashboard',
     icon: renderIcon(DashboardIcon),
   },
@@ -51,99 +51,99 @@ const menuOptions: MenuOption[] = [
   //   icon: renderIcon(StatsIcon),
   // },
   {
-    label: 'Product Management',
+    label: t('menu.productManagement'),
     key: 'productManagement',
     icon: renderIcon(ProductsIcon),
     children: [
       {
-        label: () => renderLabel('Products', 'products'),
+        label: () => renderLabel(t('menu.products'), 'products'),
         key: 'Products',
         icon: renderIcon(ProductsIcon2),
       },
       {
-        label: () => renderLabel('Categories', 'categories'),
+        label: () => renderLabel(t('menu.categories'), 'categories'),
         key: 'categories',
         icon: renderIcon(CategoryIcon),
       },
       {
-        label: () => renderLabel('Brands', 'brands'),
+        label: () => renderLabel(t('menu.brands'), 'brands'),
         key: 'brands',
         icon: renderIcon(BrandsIcon),
       },
       {
-        label: () => renderLabel('Colors', 'colors'),
+        label: () => renderLabel(t('menu.colors'), 'colors'),
         key: 'colors',
         icon: renderIcon(ColorsIcon),
       },
 
     ],
   },
   {
-    label: () => renderLabel('Orders', 'orders'),
+    label: () => renderLabel(t('menu.orders'), 'orders'),
     key: 'orders',
     icon: renderIcon(InvoicesIcon),
   },
   {
-    label: 'Feedbacks',
+    label: t('menu.feedbacks'),
     key: 'feedbacks',
     icon: renderIcon(FeedbackIcon),
     children: [
       {
-        label: () => renderLabel('Reviews', 'reviews'),
+        label: () => renderLabel(t('menu.reviews'), 'reviews'),
         key: 'reviews',
         icon: renderIcon(ReviewIcon),
       },
       {
-        label: () => renderLabel('Messages', 'messages'),
+        label: () => renderLabel(t('menu.messages'), 'messages'),
         key: 'messages',
         icon: renderIcon(CommentsIcon),
       },
       {
-        label: () => renderLabel('Support', 'support'),
+        label: () => renderLabel(t('menu.support'), 'support'),
         key: 'messages',
         icon: renderIcon(SupportIcon),
       },
     ],
   },
   {
-    label: () => renderLabel('Customers', 'customers'),
+    label: () => renderLabel(t('menu.customers'), 'customers'),
     key: 'customers',
     icon: renderIcon(CustomersIcon),
   },
   {
-    label: () => renderLabel('Announcement', 'announcement'),
+    label: () => renderLabel(t('menu.announcement'), 'announcement'),
     key: 'notify',
     icon: renderIcon(NewsIcon),
     children: [
       {
-        label: () => renderLabel('News', 'news'),
+        label: () => renderLabel(t('menu.news'), 'news'),
         key: 'news',
         icon: renderIcon(NewsIcon),
       },
       {
-        label: () => renderLabel('Notifications', 'notify'),
+        label: () => renderLabel(t('menu.notifications'), 'notify'),
         key: 'notifications',
         icon: renderIcon(NotifyIcon),
       },
       {
-        label: () => renderLabel('SMS', 'sms'),
+        label: () => renderLabel(t('menu.sms'), 'sms'),
         key: 'sms',
         icon: renderIcon(SmsIcon),
       },
     ],
   },
   {
-    label: 'Settings',
+    label: t('menu.settings'),
     key: 'settings',
     icon: renderIcon(SettingsIcon),
     children: [
       {
-        label: () => renderLabel('AccountSettings', 'account'),
+        label: () => renderLabel(t('menu.accountSettings'), 'account'),
         key: 'account-settings',
         icon: renderIcon(AccountSettingsIcon),
       },
       {
-        label: () => renderLabel('Website Settings', 'website-settings'),
+        label: () => renderLabel(t('menu.websiteSettings'), 'website-settings'),
         key: 'website-settings',
         icon: renderIcon(WebsiteSettingsIcon),
       },