first commit

components/sidebar/NavLink.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { View } from '../../types/common.ts';
+
+export interface NavItem {
+  view: View;
+  label: string;
+  icon: React.ReactNode;
+  permissionId?: string;
+  subItems?: NavItem[];
+  disabled?: boolean;
+}
+
+interface NavLinkProps {
+  item: NavItem;
+  isActive: boolean;
+  isCollapsed: boolean;
+  setView: (view: View) => void;
+  view: View;
+}
+
+const NavLink: React.FC<NavLinkProps> = ({ item, isActive, isCollapsed, setView, view }) => {
+  const [isOpen, setIsOpen] = useState(isActive);
+
+  useEffect(() => {
+    if (isActive) {
+      setIsOpen(true);
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    if (isCollapsed) {
+      setIsOpen(false);
+    }
+  }, [isCollapsed]);
+
+  if (item.subItems) {
+    return (
+      <li className="w-full">
+        <button
+          onClick={() => !isCollapsed && setIsOpen(!isOpen)}
+          title={isCollapsed ? item.label : undefined}
+          className={`w-full flex items-center h-11 px-4 rounded-lg transition-colors duration-200 group ${
+            isActive
+              ? 'bg-red-50 text-red-700'
+              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+          }`}
+        >
+          <div className="w-8 text-lg flex items-center justify-center -ml-1">{item.icon}</div>
+          {!isCollapsed && (
+            <span className="ml-2 text-sm font-semibold whitespace-nowrap flex-grow text-left">
+              {item.label}
+            </span>
+          )}
+          {!isCollapsed && (
+            <i
+              className={`fa-solid fa-chevron-right text-xs transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
+            ></i>
+          )}
+        </button>
+        {!isCollapsed && isOpen && (
+          <ul className="pl-8 mt-1 space-y-1">
+            {item.subItems.map((subItem) => (
+              <li key={subItem.view}>
+                <button
+                  onClick={() => !subItem.disabled && setView(subItem.view)}
+                  disabled={subItem.disabled}
+                  className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left ${
+                    subItem.disabled
+                      ? 'opacity-40 cursor-not-allowed text-gray-400'
+                      : view === subItem.view
+                        ? 'bg-red-600 text-white shadow-sm'
+                        : 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'
+                  }`}
+                >
+                  <div className="w-6 text-base flex items-center justify-center -ml-1">
+                    {subItem.icon}
+                  </div>
+                  <span className="ml-2 text-sm font-medium whitespace-nowrap">
+                    {subItem.label}
+                  </span>
+                  {subItem.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </li>
+    );
+  }
+
+  return (
+    <li className="w-full">
+      <button
+        onClick={() => !item.disabled && setView(item.view)}
+        disabled={item.disabled}
+        title={isCollapsed ? item.label : undefined}
+        className={`w-full flex items-center h-11 px-4 rounded-lg transition-colors duration-200 group ${
+          item.disabled
+            ? 'opacity-40 cursor-not-allowed text-gray-400'
+            : isActive
+              ? 'bg-red-600 text-white shadow-md'
+              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+        }`}
+      >
+        <div className="w-8 text-lg flex items-center justify-center -ml-1">{item.icon}</div>
+        {!isCollapsed && (
+          <span className="ml-2 text-sm font-semibold whitespace-nowrap">{item.label}</span>
+        )}
+        {!isCollapsed && item.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
+      </button>
+    </li>
+  );
+};
+
+export default NavLink;