100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
'use client';
|
|
import { useState, useEffect } from 'react';
|
|
import { Listbox, ListboxItem } from '@nextui-org/react';
|
|
import { Home, Files, FlaskConical, Users, Settings } from 'lucide-react';
|
|
import { usePathname, useRouter } from '@/src/navigation';
|
|
import useGetCurrentIds from '@/utils/useGetCurrentIds';
|
|
import { ProjectMessages } from '@/types/project';
|
|
|
|
export type Props = {
|
|
messages: ProjectMessages;
|
|
locale: string;
|
|
};
|
|
|
|
export default function Sidebar({ messages, locale }: Props) {
|
|
const { projectId } = useGetCurrentIds();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const [currentKey, setCurrentTab] = useState('home');
|
|
const baseClass = 'p-3';
|
|
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
|
|
|
|
const handleTabClick = (key: string) => {
|
|
if (key === 'home') {
|
|
router.push(`/projects/${projectId}/home`, { locale: locale });
|
|
} else if (key === 'cases') {
|
|
router.push(`/projects/${projectId}/folders`, { locale: locale });
|
|
} else if (key === 'runs') {
|
|
router.push(`/projects/${projectId}/runs`, { locale: locale });
|
|
} else if (key === 'members') {
|
|
router.push(`/projects/${projectId}/members`, { locale: locale });
|
|
} else if (key === 'settings') {
|
|
router.push(`/projects/${projectId}/settings`, { locale: locale });
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleRouteChange = (currentPath: string) => {
|
|
if (currentPath.includes('home')) {
|
|
setCurrentTab('home');
|
|
} else if (currentPath.includes('folders')) {
|
|
setCurrentTab('cases');
|
|
} else if (currentPath.includes('runs')) {
|
|
setCurrentTab('runs');
|
|
} else if (currentPath.includes('members')) {
|
|
setCurrentTab('members');
|
|
} else if (currentPath.includes('settings')) {
|
|
setCurrentTab('settings');
|
|
}
|
|
};
|
|
|
|
handleRouteChange(pathname);
|
|
}, [pathname]);
|
|
|
|
const tabItems = [
|
|
{
|
|
key: 'home',
|
|
text: messages.home,
|
|
startContent: <Home strokeWidth={1} size={20} />,
|
|
},
|
|
{
|
|
key: 'cases',
|
|
text: messages.testCases,
|
|
startContent: <Files strokeWidth={1} size={20} />,
|
|
},
|
|
{
|
|
key: 'runs',
|
|
text: messages.testRuns,
|
|
startContent: <FlaskConical strokeWidth={1} size={20} />,
|
|
},
|
|
{
|
|
key: 'members',
|
|
text: messages.members,
|
|
startContent: <Users strokeWidth={1} size={20} />,
|
|
},
|
|
{
|
|
key: 'settings',
|
|
text: messages.settings,
|
|
startContent: <Settings strokeWidth={1} size={20} />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="w-48 border-r-1 dark:border-neutral-700">
|
|
<Listbox aria-label="Listbox Variants" variant="light">
|
|
{tabItems.map((itr) => (
|
|
<ListboxItem
|
|
key={itr.key}
|
|
startContent={itr.startContent}
|
|
onClick={() => handleTabClick(itr.key)}
|
|
className={currentKey === itr.key ? selectedClass : baseClass}
|
|
>
|
|
{itr.text}
|
|
</ListboxItem>
|
|
))}
|
|
</Listbox>
|
|
</div>
|
|
);
|
|
}
|