diff --git a/dashboard/src/features/sidebar/sidebar.tsx b/dashboard/src/features/sidebar/sidebar.tsx
@@ -1,4 +1,4 @@
-import { Sidebar, SidebarItem } from "@marzneshin/components";
+import { Sidebar, SidebarItem, Tooltip, TooltipContent, TooltipTrigger } from "@marzneshin/components";
import { useRouterState } from "@tanstack/react-router";
import { FC, useEffect } from "react";
import { sidebarItems } from ".";
@@ -31,12 +31,19 @@ export const DashboardSidebar: FC<DashboardSidebarProps> = ({ collapsed, setColl
<div className="w-full" key={key}>
<Sidebar.Group>{key}</Sidebar.Group>
{sidebarItems[key].map((item: SidebarItem, i) => (
- <Sidebar.Item
- variant={currentActivePath === item.to ? "active" : "default"}
- className={cn("my-2 border-transparent", { "w-10 h-10": collapsed })}
- item={item}
- key={i}
- />
+ <Tooltip>
+ <TooltipTrigger className="w-full">
+ <Sidebar.Item
+ variant={currentActivePath === item.to ? "active" : "default"}
+ className={cn("my-2 border-transparent", { "w-10 h-10": collapsed })}
+ item={item}
+ key={i}
+ />
+ </TooltipTrigger>
+ <TooltipContent>
+ {collapsed && item.title}
+ </TooltipContent>
+ </Tooltip>
)
)}
</div>
diff --git a/dashboard/src/routes/__root.tsx b/dashboard/src/routes/__root.tsx
@@ -1,3 +1,4 @@
+import { TooltipProvider } from '@marzneshin/components';
import { ThemeProvider } from '@marzneshin/features/theme-switch'
import { queryClient } from '@marzneshin/utils';
import { QueryClientProvider } from '@tanstack/react-query';
@@ -17,10 +18,12 @@ export const Route = createRootRoute({
component: () => (
<QueryClientProvider client={queryClient}>
<ThemeProvider defaultTheme="light" storageKey="ui-theme">
- <Suspense>
- <Outlet />
- <TanStackRouterDevtools />
- </Suspense>
+ <TooltipProvider>
+ <Suspense>
+ <Outlet />
+ <TanStackRouterDevtools />
+ </Suspense>
+ </TooltipProvider>
</ThemeProvider>
</QueryClientProvider>
),
diff --git a/dashboard/src/routes/_dashboard.tsx b/dashboard/src/routes/_dashboard.tsx
@@ -6,7 +6,6 @@ import {
ResizablePanel,
ResizablePanelGroup,
Toaster,
- TooltipProvider
} from '@marzneshin/components'
import { NavigationDirectory } from '@marzneshin/components/nav-dir';
import { useAuth } from '@marzneshin/features/auth'
@@ -50,12 +49,10 @@ export const DashboardLayout = () => {
</ResizablePanel>
<ResizableHandle withHandle className="w-[2px]" />
<ResizablePanel>
- <TooltipProvider>
- <main>
- <Outlet />
- <Toaster position="top-center" />
- </main>
- </TooltipProvider>
+ <main>
+ <Outlet />
+ <Toaster position="top-center" />
+ </main>
</ResizablePanel>
</ResizablePanelGroup>
) : (