revamp template

src/layouts/demo2/toolbar/Toolbar.tsx

@@ -0,0 +1,18 @@
+import { Container } from '@/components';
+import { ReactNode } from 'react';
+
+export interface IToolbarProps {
+  children?: ReactNode;
+}
+
+const Toolbar = ({ children }: IToolbarProps) => {
+  return (
+    <div className="mb-5 lg:mb-5">
+      <Container className="flex items-center justify-between flex-wrap gap-5">
+        {children}
+      </Container>
+    </div>
+  );
+};
+
+export { Toolbar };

src/layouts/demo2/toolbar/ToolbarActions.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface IToolbarActionsProps {
+  children?: ReactNode;
+}
+
+const ToolbarActions = ({ children }: IToolbarActionsProps) => {
+  return <div className="flex items-center gap-1">{children}</div>;
+};
+
+export { ToolbarActions };

src/layouts/demo2/toolbar/ToolbarBreadcrumbs.tsx

@@ -0,0 +1,32 @@
+import { Fragment } from 'react';
+import { useMenuBreadcrumbs } from '@/components';
+import { Link } from 'react-router-dom';
+import { useMenus } from '@/providers';
+import { useLocation } from 'react-router';
+
+const ToolbarBreadcrumbs = () => {
+  const { getMenuConfig } = useMenus();
+  const { pathname } = useLocation();
+  const items = useMenuBreadcrumbs(pathname, getMenuConfig('primary'));
+
+  return (
+    <div className="flex items-center gap-1 text-sm font-normal">
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          {item.path ? (
+            <Link to={item.path} className="text-gray-700 hover:text-primary">
+              {item.title}
+            </Link>
+          ) : (
+            <span className={index === items.length - 1 ? 'text-gray-900' : 'text-gray-700'}>
+              {item.title}
+            </span>
+          )}
+          {index !== items.length - 1 && <span className="text-gray-400 text-sm">/</span>}
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+export { ToolbarBreadcrumbs };

src/layouts/demo2/toolbar/ToolbarHeading.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { useMenus } from '@/providers';
+import { useMenuCurrentItem } from '@/components';
+import { useLocation } from 'react-router';
+import { ToolbarBreadcrumbs } from './ToolbarBreadcrumbs';
+
+export interface IToolbarHeadingProps {
+  title?: string | ReactNode;
+}
+
+const ToolbarHeading = ({ title = '' }: IToolbarHeadingProps) => {
+  const { getMenuConfig } = useMenus();
+  const { pathname } = useLocation();
+  const currentMenuItem = useMenuCurrentItem(pathname, getMenuConfig('primary'));
+
+  return (
+    <div className="flex items-center flex-wrap gap-1 lg:gap-5">
+      <h1 className="font-medium text-lg text-gray-900">{title || currentMenuItem?.title}</h1>
+      <ToolbarBreadcrumbs />
+    </div>
+  );
+};
+
+export { ToolbarHeading };

src/layouts/demo2/toolbar/index.ts

@@ -0,0 +1,4 @@
+export * from './Toolbar';
+export * from './ToolbarBreadcrumbs';
+export * from './ToolbarHeading';
+export * from './ToolbarActions';