dfcb97a355
Add .gitignore Removed node_modules from previous commit Fix task modes Fix task modes Fix task modes Remove node_modules Update basic task modal Add notes functionality Improve UI Setup views Add scopes Fix projects layout Restructure Fix rest of the UI issues Cleanup old views Add .env to .gitignore
60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { Location } from 'react-router-dom';
|
|
import {
|
|
CalendarDaysIcon,
|
|
CalendarIcon,
|
|
ArrowRightCircleIcon,
|
|
InboxIcon,
|
|
ClockIcon,
|
|
PauseCircleIcon,
|
|
CheckCircleIcon,
|
|
ListBulletIcon,
|
|
} from '@heroicons/react/24/solid';
|
|
|
|
interface SidebarNavProps {
|
|
handleNavClick: (path: string, title: string) => void;
|
|
location: Location;
|
|
isDarkMode: boolean;
|
|
}
|
|
|
|
const navLinks = [
|
|
{ path: '/tasks?type=today', title: 'Today', icon: <CalendarDaysIcon className="h-5 w-5" />, query: 'type=today' },
|
|
{ path: '/tasks?type=upcoming', title: 'Upcoming', icon: <CalendarIcon className="h-5 w-5" />, query: 'type=upcoming' },
|
|
{ path: '/tasks?type=next', title: 'Next Actions', icon: <ArrowRightCircleIcon className="h-5 w-5" />, query: 'type=next' },
|
|
{ path: '/tasks?type=inbox', title: 'Inbox', icon: <InboxIcon className="h-5 w-5" />, query: 'type=inbox' },
|
|
{ path: '/tasks?type=someday', title: 'Someday', icon: <ClockIcon className="h-5 w-5" />, query: 'type=someday' },
|
|
{ path: '/tasks?type=waiting', title: 'Waiting for', icon: <PauseCircleIcon className="h-5 w-5" />, query: 'type=waiting' },
|
|
{ path: '/tasks?status=done', title: 'Completed', icon: <CheckCircleIcon className="h-5 w-5" />, query: 'status=done' },
|
|
{ path: '/tasks', title: 'All Tasks', icon: <ListBulletIcon className="h-5 w-5" /> },
|
|
];
|
|
|
|
const SidebarNav: React.FC<SidebarNavProps> = ({ handleNavClick, location, isDarkMode }) => {
|
|
const isActive = (path: string, query?: string) => {
|
|
const isPathMatch = location.pathname === '/tasks';
|
|
const isQueryMatch = query ? location.search.includes(query) : location.search === '';
|
|
return isPathMatch && isQueryMatch
|
|
? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white'
|
|
: 'text-gray-700 dark:text-gray-300';
|
|
};
|
|
|
|
return (
|
|
<ul className="flex flex-col space-y-1">
|
|
{navLinks.map((link) => (
|
|
<li key={link.path}>
|
|
<button
|
|
onClick={() => handleNavClick(link.path, link.title)}
|
|
className={`w-full text-left px-4 py-1 flex items-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ${isActive(
|
|
link.path,
|
|
link.query
|
|
)}`}
|
|
>
|
|
{link.icon}
|
|
<span className="ml-2">{link.title}</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export default SidebarNav;
|