Update src/components/navbar/NavbarStyleApple/NavbarStyleApple.js

src/components/navbar/NavbarStyleApple/NavbarStyleApple.js

@@ -1,61 +1,81 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Menu, X } from 'lucide-react';
+import { useTheme } from '../../theme/ThemeProvider';
 
-function NavbarStyleApple() {
+const NavbarStyleApple = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const { theme, toggleTheme } = useTheme();
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
 
   return (
-    <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+    <nav className="bg-white/80 dark:bg-black/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-16">
+        <div className="flex justify-between items-center h-16">
-          <div className="flex items-center">
+          {/* Logo */}
+          <div className="flex-shrink-0">
             <img
-              className="h-8 w-8"
+              className="h-8 w-auto"
-              src="/images/logo-small-gradient.0ed287ce-1768917245367.svg"
+              src="/images/placeholder.webp"
               alt="Logo"
             />
-            <span className="ml-2 text-xl font-semibold text-gray-900">Brand</span>
-          </div>
-          
-          <div className="hidden md:flex items-center space-x-8">
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              Home
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              Features
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              About
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
-              Contact
-            </a>
           </div>
 
-          <div className="md:hidden flex items-center">
+          {/* Desktop Menu */}
+          <div className="hidden md:block">
+            <div className="ml-10 flex items-baseline space-x-4">
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                Home
+              </a>
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                About
+              </a>
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                Services
+              </a>
+              <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                Contact
+              </a>
+            </div>
+          </div>
+
+          {/* Theme Toggle & Mobile Menu Button */}
+          <div className="flex items-center space-x-2">
             <button
-              onClick={() => setIsOpen(!isOpen)}
+              onClick={toggleTheme}
-              className="text-gray-900 hover:text-gray-700"
+              className="p-2 rounded-md text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
             >
-              {isOpen ? <X size={24} /> : <Menu size={24} />}
+              {theme === 'light' ? '🌙' : '☀️'}
             </button>
+            
+            <div className="md:hidden">
+              <button
+                onClick={toggleMenu}
+                className="p-2 rounded-md text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              >
+                {isOpen ? <X size={24} /> : <Menu size={24} />}
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
+      {/* Mobile Menu */}
       {isOpen && (
         <div className="md:hidden">
-          <div className="px-2 pt-2 pb-3 space-y-1 bg-white border-t border-gray-200">
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white/95 dark:bg-black/95 backdrop-blur-md border-t border-gray-200 dark:border-gray-800">
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
               Home
             </a>
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
-              Features
-            </a>
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
               About
             </a>
-            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
+              Services
+            </a>
+            <a href="#" className="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">
               Contact
             </a>
           </div>
@@ -63,6 +83,6 @@ function NavbarStyleApple() {
       )}
     </nav>
   );
-}
+};
 
-export default NavbarStyleApple;
+export default NavbarStyleApple;