useDock

src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx

@@ -1,18 +1,13 @@
-import { useMemo } from 'react';
-import { useAuth } from 'hooks/useAuth';
+import { useDock } from 'officerdev';
 import { Background } from './Background';
 import { Header } from './Header';
-import { Dock, dockItems } from './Dock';
+import { Dock, ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS } from './Dock';
 
 type DashboardLayoutProps = {
   children?: React.ReactNode;
 };
 export function DashboardLayout({ children }: DashboardLayoutProps) {
-  const { user } = useAuth();
-  const visibleItems = useMemo(
-    () => dockItems.filter((item) => !item.role || item.role === user?.role),
-    [user?.role],
-  );
+  const { items: visibleItems } = useDock(ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS);
 
   return (
     <div className="relative overflow-hidden h-dvh outline-none inset-0">