110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import { Button } from 'primereact/button';
|
|
import fusero_logo from '../assets/fusero_logo.svg';
|
|
import roc_logo from '../assets/roc_logo.png';
|
|
|
|
import 'primeicons/primeicons.css';
|
|
|
|
const systemConfig = {
|
|
council: {
|
|
routes: [{ path: 'chat', label: 'chat', icon: 'pi pi-users' }],
|
|
logo: fusero_logo,
|
|
},
|
|
fusemind: {
|
|
routes: [
|
|
{ path: 'home', label: 'Home', icon: 'pi pi-home' },
|
|
{ path: 'chat', label: 'Chat', icon: 'pi pi-comments' },
|
|
{ path: 'agents', label: 'Agents', icon: 'pi pi-users' },
|
|
{ path: 'settings', label: 'Settings', icon: 'pi pi-cog' }
|
|
],
|
|
logo: fusero_logo,
|
|
},
|
|
canvas: {
|
|
routes: [
|
|
{ path: 'canvas-endpoints', label: 'Canvas Endpoints', icon: 'pi pi-table' }
|
|
],
|
|
logo: roc_logo,
|
|
},
|
|
};
|
|
|
|
const Sidebar = ({ systemId, isCollapsed, setIsCollapsed }) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const system = systemConfig[systemId];
|
|
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let timeoutId = setTimeout(() => setIsVisible(true), 50);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [systemId, isCollapsed]);
|
|
|
|
const handleBackClick = () => {
|
|
setIsVisible(false);
|
|
};
|
|
|
|
const toggleCollapse = () => setIsCollapsed((prevState) => !prevState);
|
|
|
|
if (!systemId || !system) {
|
|
console.error('Sidebar: systemId is undefined or not supported.');
|
|
return <p>No system selected</p>;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`transition-opacity duration-500 ${isVisible ? 'opacity-100' : 'opacity-0'} ${isCollapsed ? 'w-20' : 'w-64'
|
|
} h-full bg-white flex flex-col items-center pt-2`}
|
|
onTransitionEnd={() => {
|
|
if (!isVisible) navigate('/dashboard');
|
|
}}
|
|
>
|
|
<Button
|
|
icon={isCollapsed ? 'pi pi-arrow-circle-right' : 'pi pi-arrow-circle-left'}
|
|
onClick={toggleCollapse}
|
|
className='mt-0 p-button-rounded p-button-text'
|
|
aria-label='Toggle'
|
|
/>
|
|
|
|
<div className='flex justify-center w-full p-0 m-0'>
|
|
<Link to='/'>
|
|
<Button
|
|
label={isCollapsed ? '' : 'Back'}
|
|
icon='pi pi-arrow-left'
|
|
onClick={handleBackClick}
|
|
className='p-0 mt-1 p-button-rounded p-button-outlined'
|
|
aria-label='Back'
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className={`transition-all duration-400 ${isCollapsed ? 'w-32' : 'w-3/4 p-0 m-0'}`}>
|
|
<img
|
|
src={system.logo}
|
|
alt='Logo'
|
|
className={`transition-all duration-300 ${isCollapsed ? 'w-32' : 'w-3/4 p-0 m-0'}`}
|
|
/>
|
|
</div>
|
|
|
|
<hr className='w-full mt-2 border-gray-700' />
|
|
|
|
<ul className='w-full mt-2 space-y-1'>
|
|
{system.routes.map(({ path, label, icon }) => (
|
|
<li key={path}>
|
|
<Link
|
|
to={`/dashboard/${systemId}/${path}`}
|
|
className={`px-6 py-2 ${location.pathname.includes(`/${path}`) ? 'active' : ''
|
|
} flex items-center justify-${isCollapsed ? 'center' : 'start'}`}
|
|
>
|
|
<i className={`mr-2 pi ${icon} ${isCollapsed ? 'text-xl' : ''}`}></i>
|
|
{isCollapsed ? '' : label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|