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

src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx

@@ -1,85 +1,67 @@
-"use client";
+import React from 'react';
+import { Menu, X } from 'lucide-react';
 
-import { useState, useCallback } from "react";
+const NavbarStyleApple: React.FC = () => {
-import MobileMenu from "../mobileMenu/MobileMenu";
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
-import Logo from "../Logo";
-import { Plus } from "lucide-react";
-import { NavbarProps } from "@/types/navigation";
-import { useScrollState } from "./useScrollState";
-import { cls } from "@/lib/utils";
-
-const SCROLL_THRESHOLD = 50;
-
-const NavbarStyleApple = ({
-  navItems,
-  // logoSrc,
-  // logoAlt = "",
-  brandName = "Webild",
-}: NavbarProps) => {
-  const isScrolled = useScrollState(SCROLL_THRESHOLD);
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const handleMenuToggle = useCallback(() => {
-    setMenuOpen((prev) => !prev);
-  }, []);
-
-  const handleMobileNavClick = useCallback(() => {
-    setMenuOpen(false);
-  }, []);
 
   return (
-    <nav
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
-      className={cls(
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        "fixed z-[1000] top-0 left-0 w-full transition-all duration-500 ease-in-out",
+        <div className="flex justify-between items-center h-16">
-        isScrolled
+          <div className="flex-shrink-0">
-          ? "bg-background/80 backdrop-blur-sm h-15"
+            <img
-          : "bg-background/0 backdrop-blur-0 h-20"
+              className="h-8 w-auto"
-      )}
+              src="/images/logo-small-gradient.0ed287ce-1768922368007.svg"
-    >
+              alt="Logo"
-      <div className="flex items-center justify-between h-full w-content-width mx-auto">
-        <div className="flex items-center transition-all duration-500 ease-in-out">
-          <Logo brandName={brandName} />
-        </div>
-
-        <div
-          className="hidden md:flex items-center gap-6 transition-all duration-500 ease-in-out"
-          role="navigation"
-        >
-          {navItems.map((item, index) => (
-            <ButtonTextUnderline
-              key={index}
-              text={item.name}
-              href={item.id}
-              className="!text-base"
             />
-          ))}
+          </div>
-        </div>
           
-        <button
+          <div className="hidden md:block">
-          className="flex md:hidden shrink-0 h-8 aspect-square rounded-theme bg-foreground items-center justify-center cursor-pointer"
+            <div className="ml-10 flex items-baseline space-x-8">
-          onClick={handleMenuToggle}
+              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
-          aria-label="Toggle menu"
+                Home
-          aria-expanded={menuOpen}
+              </a>
-          aria-controls="mobile-menu"
+              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
-        >
+                Products
-          <Plus
+              </a>
-            className={cls(
+              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
-              "w-1/2 h-1/2 text-background transition-transform duration-300",
+                Services
-              menuOpen ? "rotate-45" : "rotate-0"
+              </a>
-            )}
+              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
-            strokeWidth={1.5}
+                Contact
-            aria-hidden="true"
+              </a>
-          />
+            </div>
-        </button>
+          </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>
 
-      <MobileMenu
+      {isMenuOpen && (
-        menuOpen={menuOpen}
+        <div className="md:hidden">
-        onMenuToggle={handleMenuToggle}
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
-        navItems={navItems}
+            <a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
-        onNavClick={handleMobileNavClick}
+              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>
   );
 };