add: SideMenu & BottomNavbar locales
This commit is contained in:
Mahyar Khanbolooki
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user