feat: internationalize sidebar collapse and expand labels using translation keys

This commit is contained in:
Firman Ramdhani
2026-07-06 15:21:04 +07:00
parent d91293eac1
commit a43ea0697a
3 changed files with 9 additions and 5 deletions
@@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { Box, NavLink, Stack, Tooltip, ActionIcon, Divider, Menu, TextInput } from '@repo/ui/components'; import { Box, NavLink, Stack, Tooltip, ActionIcon, Divider, Menu, TextInput } from '@repo/ui/components';
import { useCoreAppShell } from '@repo/ui/components'; import { useCoreAppShell } from '@repo/ui/components';
import { ChevronsLeft, ChevronsRight, PanelTopClose, PanelTopOpen, Search, X } from 'lucide-react'; import { ChevronsLeft, ChevronsRight, PanelTopClose, PanelTopOpen, Search, X } from 'lucide-react';
import type { MenuItemType } from '../types/menu.types'; import type { MenuItemType } from '../types/menu.types';
import type { SidebarVariant } from '@repo/ui/components'; import type { SidebarVariant } from '@repo/ui/components';
import { useTranslation } from '@repo/core-i18n'; import { useTranslation } from '@repo/core-i18n';
@@ -387,7 +387,7 @@ export const SidebarMenu = memo(function SidebarMenu({
<> <>
<Divider /> <Divider />
<Stack align="center" p="xs"> <Stack align="center" p="xs">
<Tooltip label="Expand sidebar" position="right" withArrow> <Tooltip label={t('common:expandSidebar')} position="right" withArrow>
<ActionIcon variant="subtle" color="gray" size="lg" onClick={handleToggle} aria-label="Expand sidebar"> <ActionIcon variant="subtle" color="gray" size="lg" onClick={handleToggle} aria-label="Expand sidebar">
<ChevronsRight size={18} /> <ChevronsRight size={18} />
</ActionIcon> </ActionIcon>
@@ -485,7 +485,7 @@ export const SidebarMenu = memo(function SidebarMenu({
<Divider /> <Divider />
<Box p="xs"> <Box p="xs">
<NavLink <NavLink
label="Collapse" label={t('common:collapse')}
leftSection={<ChevronsLeft size={18} />} leftSection={<ChevronsLeft size={18} />}
onClick={handleToggle} onClick={handleToggle}
variant="subtle" variant="subtle"
@@ -35,6 +35,8 @@
"systemNotificationsDesc": "View and manage all system notifications.", "systemNotificationsDesc": "View and manage all system notifications.",
"expandAll": "Expand all menu", "expandAll": "Expand all menu",
"collapseAll": "Collapse all menu", "collapseAll": "Collapse all menu",
"searchMenu": "Search menu" "searchMenu": "Search menu",
"collapse": "Collapse",
"expandSidebar": "Expand Sidebar"
} }
} }
@@ -35,6 +35,8 @@
"systemNotificationsDesc": "Lihat dan kelola semua notifikasi sistem.", "systemNotificationsDesc": "Lihat dan kelola semua notifikasi sistem.",
"expandAll": "Buka semua menu", "expandAll": "Buka semua menu",
"collapseAll": "Tutup semua menu", "collapseAll": "Tutup semua menu",
"searchMenu": "Cari menu" "searchMenu": "Cari menu",
"collapse": "Tutup",
"expandSidebar": "Perluas Sidebar"
} }
} }