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

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

@@ -1,69 +1,35 @@
import React from 'react';
import { Menu, X } from 'lucide-react';
const NavbarStyleApple: React.FC = () => {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const NavbarStyleApple = () => {
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="flex justify-between items-center h-16">
<div className="flex-shrink-0">
<img
className="h-8 w-auto"
src="/images/logo-small-gradient.0ed287ce-1768922368007.svg"
alt="Logo"
/>
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="text-white font-bold text-xl">
Logo
</div>
</div>
<div className="hidden md:block">
<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
</a>
<a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
Products
<a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
About
</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
</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
</a>
</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>
{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>
);
};
export default NavbarStyleApple;
export default NavbarStyleApple;