76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { Menu, X, Server, Home } from "lucide-react"
|
|
|
|
const Navbar = () => {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<nav className="bg-gray-800 sticky top-0 z-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="relative flex items-center justify-between h-16">
|
|
<div className="flex-shrink-0 flex items-center">
|
|
<Link href="/" className="flex items-center">
|
|
<span className="text-white text-xl font-bold">LibreCloud</span>
|
|
</Link>
|
|
</div>
|
|
<div className="hidden md:block">
|
|
<div className="ml-10 flex items-center space-x-4">
|
|
<Link
|
|
href="#"
|
|
className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
<Home className="mr-2 h-5 w-5" /> Home
|
|
</Link>
|
|
<Link
|
|
href="#services"
|
|
className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
<Server className="mr-2 h-5 w-5" /> Services
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="md:hidden">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
|
aria-expanded={isOpen}
|
|
>
|
|
<span className="sr-only">Open main menu</span>
|
|
{isOpen ? (
|
|
<X className="block h-6 w-6" aria-hidden="true" />
|
|
) : (
|
|
<Menu className="block h-6 w-6" aria-hidden="true" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<div className="md:hidden">
|
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<Link
|
|
href="#"
|
|
className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
|
>
|
|
<Home className="mr-2 h-5 w-5" /> Home
|
|
</Link>
|
|
<Link
|
|
href="#services"
|
|
className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
|
>
|
|
<Server className="mr-2 h-5 w-5" /> Services
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|
|
|