modified: frontend/src/components/Sidebar.tsx

frontend/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router-dom';
-import { Book, Home, Key, Folder, Settings, FileCode, FileText } from 'lucide-react';
+import { Book, Home, Key, Folder, Settings, FileCode, FileText, ExternalLink } from 'lucide-react';
 import { cn } from '@/utils/cn';
 
 const navItems = [
@@ -17,23 +17,42 @@ export default function Sidebar() {
     <aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
       <div className="flex-1 py-6">
         <nav className="space-y-1 px-3">
-          {navItems.map(({ to, icon: Icon, label }) => (
-            <NavLink
-              key={to}
-              to={to}
-              className={({ isActive }) =>
-                cn(
-                  'flex items-center gap-3 px-4 py-3 rounded-lg transition-all',
-                  isActive
-                    ? 'bg-primary-50 text-primary-700 font-medium'
-                    : 'text-gray-700 hover:bg-gray-50'
-                )
-              }
-            >
-              <Icon size={20} />
-              <span>{label}</span>
-            </NavLink>
-          ))}
+          {navItems.map(({ to, icon: Icon, label, external }) => {
+            const linkClasses = 'flex items-center gap-3 px-4 py-3 rounded-lg transition-all text-gray-700 hover:bg-gray-50';
+            const activeClasses = 'bg-primary-50 text-primary-700 font-medium';
+
+            if (external) {
+              return (
+                <a
+                  key={to}
+                  href={to}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={linkClasses}
+                >
+                  <Icon size={20} />
+                  <span>{label}</span>
+                  <ExternalLink size={14} className="ml-auto opacity-50" />
+                </a>
+              );
+            }
+
+            return (
+              <NavLink
+                key={to}
+                to={to}
+                className={({ isActive }) =>
+                  cn(
+                    linkClasses,
+                    isActive && activeClasses
+                  )
+                }
+              >
+                <Icon size={20} />
+                <span>{label}</span>
+              </NavLink>
+            );
+          })}
         </nav>
       </div>