Sidebar i18n

This commit is contained in:
headlessdev 2025-04-28 23:28:34 +02:00
parent 4665b22514
commit eff7901b67
2 changed files with 26 additions and 12 deletions

View File

@ -37,7 +37,7 @@ import { useRouter } from "next/navigation"
import packageJson from "@/package.json" import packageJson from "@/package.json"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { useTranslations } from "next-intl"
interface NavItem { interface NavItem {
title: string title: string
icon?: React.ComponentType<any> icon?: React.ComponentType<any>
@ -46,49 +46,52 @@ interface NavItem {
items?: NavItem[] items?: NavItem[]
} }
const data: { navMain: NavItem[] } = {
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const t = useTranslations('Sidebar')
const data: { navMain: NavItem[] } = {
navMain: [ navMain: [
{ {
title: "Dashboard", title: t('Dashboard'),
icon: LayoutDashboardIcon, icon: LayoutDashboardIcon,
url: "/dashboard", url: "/dashboard",
}, },
{ {
title: "My Infrastructure", title: t('My Infrastructure'),
url: "#", url: "#",
icon: Briefcase, icon: Briefcase,
items: [ items: [
{ {
title: "Servers", title: t('Servers'),
icon: Server, icon: Server,
url: "/dashboard/servers", url: "/dashboard/servers",
}, },
{ {
title: "Applications", title: t('Applications'),
icon: AppWindow, icon: AppWindow,
url: "/dashboard/applications", url: "/dashboard/applications",
}, },
{ {
title: "Uptime", title: t('Uptime'),
icon: Activity, icon: Activity,
url: "/dashboard/uptime", url: "/dashboard/uptime",
}, },
{ {
title: "Network", title: t('Network'),
icon: Network, icon: Network,
url: "/dashboard/network", url: "/dashboard/network",
}, },
], ],
}, },
{ {
title: "Settings", title: t('Settings'),
icon: Settings, icon: Settings,
url: "/dashboard/settings", url: "/dashboard/settings",
}, },
], ],
} }
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const router = useRouter() const router = useRouter()
const pathname = usePathname() const pathname = usePathname()
@ -132,7 +135,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<SidebarContent className="flex flex-col h-full py-4"> <SidebarContent className="flex flex-col h-full py-4">
<SidebarGroup className="flex-grow"> <SidebarGroup className="flex-grow">
<SidebarGroupLabel className="text-xs font-medium text-sidebar-foreground/60 uppercase tracking-wider px-4 mb-2"> <SidebarGroupLabel className="text-xs font-medium text-sidebar-foreground/60 uppercase tracking-wider px-4 mb-2">
Main Navigation {t('Main Navigation')}
</SidebarGroupLabel> </SidebarGroupLabel>
<SidebarGroupContent> <SidebarGroupContent>
<SidebarMenu> <SidebarMenu>
@ -197,7 +200,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
onClick={logout} onClick={logout}
> >
<LogOut className="h-4 w-4 mr-2" /> <LogOut className="h-4 w-4 mr-2" />
Logout {t('Logout')}
</Button> </Button>
</SidebarFooter> </SidebarFooter>
</SidebarContent> </SidebarContent>

View File

@ -1,4 +1,15 @@
{ {
"Sidebar": {
"Main Navigation": "Main Navigation",
"Dashboard": "Dashboard",
"My Infrastructure": "My Infrastructure",
"Servers": "Servers",
"Applications": "Applications",
"Uptime": "Uptime",
"Network": "Network",
"Settings": "Settings",
"Logout": "Logout"
},
"Home": { "Home": {
"TitleUnder": "Dashboard to manage your entire server infrastructure", "TitleUnder": "Dashboard to manage your entire server infrastructure",
"LoginCardTitle": "Login", "LoginCardTitle": "Login",