development/91b18844-c148-4ae0-9a69-cc57582d450b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx

Browse Source
This commit is contained in:
development
2026-01-20 15:23:49 +00:00
parent 219f90b8f4
commit 8435694e4f
1 changed files with 13 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx
View File

@@ -1,67 +1,33 @@
import React from 'react'; import React from 'react';
import { Menu, X } from 'lucide-react';
const NavbarStyleApple: React.FC = () => {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const NavbarStyleApple = () => {
return ( return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200"> <nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16"> <div className="flex items-center justify-between h-16">
<div className="flex-shrink-0"> <div className="flex items-center">
<img <div className="text-white font-bold text-xl">
className="h-8 w-auto" Logo
src="/images/logo-small-gradient.0ed287ce-1768922368007.svg" </div>
alt="Logo"
/>
</div> </div>
<div className="hidden md:block"> <div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-8"> <div className="ml-10 flex items-baseline space-x-8">
<a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium"> <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
Home Home
</a> </a>
<a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium"> <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
Products About
</a> </a>
<a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium"> <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
Services Services
</a> </a>
<a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium"> <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
Contact Contact
</a> </a>
</div> </div>
</div> </div>
<div className="md:hidden">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
>
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
</div>
</div> </div>
</div> </div>
{isMenuOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
<a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
Home
</a>
<a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
Products
</a>
<a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
Services
</a>
<a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
Contact
</a>
</div>
</div>
)}
</nav> </nav>
); );
}; };