96 lines
3.8 KiB
JavaScript
96 lines
3.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Menu, X, ChevronDown, Github } from 'lucide-react';
|
|
|
|
const Header = () => {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [isResourcesOpen, setIsResourcesOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-nest-dark border-b border-gray-800">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0">
|
|
<img
|
|
className="h-8 w-auto"
|
|
src="https://nestjs.com/img/logo-small.svg"
|
|
alt="NestJS"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
<a href="#" className="text-white hover:text-nest-red transition-colors">
|
|
DOCUMENTATION
|
|
</a>
|
|
<a href="#" className="text-white hover:text-nest-red transition-colors">
|
|
ENTERPRISE
|
|
</a>
|
|
<div className="relative">
|
|
<button
|
|
className="flex items-center text-white hover:text-nest-red transition-colors"
|
|
onClick={() => setIsResourcesOpen(!isResourcesOpen)}
|
|
>
|
|
<span className="bg-nest-red text-white text-xs px-2 py-1 rounded mr-2">
|
|
NEW
|
|
</span>
|
|
RESOURCES
|
|
<ChevronDown className="ml-1 w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div className="hidden md:flex items-center space-x-4">
|
|
<a
|
|
href="#"
|
|
className="text-white hover:text-nest-red transition-colors"
|
|
>
|
|
<Github className="w-5 h-5" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="text-white hover:text-nest-red transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="text-white hover:text-nest-red transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="md:hidden">
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="text-white hover:text-nest-red transition-colors"
|
|
>
|
|
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isMenuOpen && (
|
|
<div className="md:hidden bg-nest-dark border-t border-gray-800">
|
|
<div className="px-2 pt-2 pb-3 space-y-1">
|
|
<a href="#" className="block px-3 py-2 text-white hover:text-nest-red transition-colors">
|
|
DOCUMENTATION
|
|
</a>
|
|
<a href="#" className="block px-3 py-2 text-white hover:text-nest-red transition-colors">
|
|
ENTERPRISE
|
|
</a>
|
|
<a href="#" className="block px-3 py-2 text-white hover:text-nest-red transition-colors">
|
|
RESOURCES
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header; |