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 }) => (
+          {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(
-                  'flex items-center gap-3 px-4 py-3 rounded-lg transition-all',
+                    linkClasses,
-                  isActive
+                    isActive && activeClasses
-                    ? 'bg-primary-50 text-primary-700 font-medium'
-                    : 'text-gray-700 hover:bg-gray-50'
                   )
                 }
               >
                 <Icon size={20} />
                 <span>{label}</span>
               </NavLink>
-          ))}
+            );
+          })}
         </nav>
       </div>