frontend/src/components/Navbar.tsx

```typescript
import { NavLink } from 'react-router-dom'
import { FiActivity, FiMoon, FiSun } from 'react-icons/fi'

interface NavbarProps {
  darkMode: boolean
  toggleDarkMode: () => void
}

export default function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
  return (
    <header className="border-b border-gray-800 py-4">
      <div className="container mx-auto px-4 flex justify-between items-center">
        <div className="flex items-center space-x-2">
          <FiActivity className="text-purple-500 text-xl" />
          <span className="text-xl font-bold bg-gradient-to-r from-purple-500 to-orange-500 bg-clip-text text-transparent">
            CryptoSignal-Sleuth
          </span>
        </div>
        <div className="hidden md:flex space-x-6">
          <NavLink 
            to="/" 
            className={({ isActive }) => 
              `hover:text-purple-500 transition ${isActive ? 'text-purple-500 font-medium' : ''}`
            }
          >
            Dashboard
          </NavLink>
          <NavLink 
            to="/history" 
            className={({ isActive }) => 
              `hover:text-purple-500 transition ${isActive ? 'text-purple-500 font-medium' : ''}`
            }
          >
            History
          </NavLink>
          <NavLink 
            to="/settings" 
            className={({ isActive }) => 
              `hover:text-purple-500 transition ${isActive ? 'text-purple-500 font-medium' : ''}`
            }
          >
            Settings
          </NavLink>
          <NavLink 
            to="/docs" 
            className={({ isActive }) => 
              `hover:text-purple-500 transition ${isActive ? 'text-purple-500 font-medium' : ''}`
            }
          >
            Docs
          </NavLink>
        </div>
        <button 
          onClick={toggleDarkMode}
          className="p-2 rounded-lg hover:bg-gray-800 transition"
        >
          {darkMode ? <FiSun className="w-5 h-5" /> : <FiMoon className="w-5 h-5" />}
        </button>
      </div>
    </header>
  )
}
```

This is just the beginning - I'll continue with more components and pages in the next response to keep it manageable. Would you like me to proceed with the Dashboard page and other components next?
___METADATA_START___
{"repoId":"Alexo19/cryptosignal-sleuth","isNew":false,"userName":"Alexo19"}
___METADATA_END___