95 lines
4.2 KiB
TypeScript
95 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname } from 'next/navigation';
|
|
import { ObjectUtils, classNames } from 'primereact/utils';
|
|
import React, { useContext, useEffect, useRef, useState } from 'react';
|
|
import { LayoutContext } from './context/layoutcontext';
|
|
import { Breadcrumb } from '../types/layout';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { Button } from 'primereact/button';
|
|
|
|
const AppBreadcrumb = () => {
|
|
const [searchActive, setSearchActive] = useState(false);
|
|
const pathname = usePathname();
|
|
const [breadcrumb, setBreadcrumb] = useState<Breadcrumb | null>(null);
|
|
const { breadcrumbs, showSidebar } = useContext(LayoutContext);
|
|
const searchInput = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const filteredBreadcrumbs = breadcrumbs?.find((crumb) => {
|
|
const lastPathSegment = crumb.to.split('/').pop();
|
|
const lastRouterSegment = pathname.split('/').pop();
|
|
|
|
if (lastRouterSegment?.startsWith('[') && !isNaN(Number(lastPathSegment))) {
|
|
return pathname.split('/').slice(0, -1).join('/') === crumb.to?.split('/').slice(0, -1).join('/');
|
|
}
|
|
return crumb.to === pathname;
|
|
});
|
|
|
|
setBreadcrumb(filteredBreadcrumbs);
|
|
}, [pathname, breadcrumbs]);
|
|
|
|
const activateSearch = () => {
|
|
setSearchActive(true);
|
|
setTimeout(() => {
|
|
searchInput.current.focus();
|
|
}, 100);
|
|
};
|
|
|
|
const deactivateSearch = () => {
|
|
setSearchActive(false);
|
|
};
|
|
|
|
const onSidebarButtonClick = () => {
|
|
showSidebar();
|
|
};
|
|
|
|
return (
|
|
<div className="layout-breadcrumb flex align-items-center relative h-3rem">
|
|
<nav className="layout-breadcrumb">
|
|
<ol>
|
|
{ObjectUtils.isNotEmpty(breadcrumb) && pathname !== '/' ? (
|
|
breadcrumb.labels.map((label, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{index !== 0 && <li className="layout-breadcrumb-chevron"> / </li>}
|
|
<li key={index}>{label}</li>
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
) : (
|
|
<li key={'home'}>E-Commerce Dashboard</li>
|
|
)}
|
|
</ol>
|
|
</nav>
|
|
<ul className="breadcrumb-menu flex align-items-center justify-content-end lg:hidden absolute right-0 top-0 z-4 h-3rem w-screen">
|
|
<li className="w-full m-0 ml-3">
|
|
<div className={classNames('breadcrumb-search flex justify-content-end', { 'breadcrumb-search-active': searchActive })}>
|
|
<Button icon="pi pi-search" className="breadcrumb-searchbutton p-button-text p-button-secondary text-color-secondary p-button-rounded flex-shrink-0" type="button" onClick={activateSearch}></Button>
|
|
<div className="search-input-wrapper">
|
|
<span className="p-input-icon-right">
|
|
<InputText
|
|
ref={searchInput}
|
|
type="text"
|
|
placeholder="Search"
|
|
onBlur={deactivateSearch}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'ESCAPE') deactivateSearch();
|
|
}}
|
|
/>
|
|
<i className="pi pi-search"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li className="right-panel-button relative lg:block">
|
|
<Button type="button" label="Today" style={{ width: '6.7rem' }} icon="pi pi-bookmark" className="layout-rightmenu-button hidden md:block font-normal" onClick={onSidebarButtonClick}></Button>
|
|
<Button type="button" style={{ width: '3.286rem' }} icon="pi pi-bookmark" className="layout-rightmenu-button block md:hidden font-normal" onClick={onSidebarButtonClick}></Button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppBreadcrumb;
|