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

src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx

@@ -1,87 +1,23 @@
-"use client";
+import React from 'react';
-
-import { useState, useCallback } from "react";
-import MobileMenu from "../mobileMenu/MobileMenu";
-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);
-  }, []);
 
+const NavbarStyleApple = () => {
   return (
-    <nav
+    <nav className="bg-white dark:bg-gray-900 shadow">
-      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 h-16">
-        isScrolled
+          <div className="flex items-center">
-          ? "bg-background/80 backdrop-blur-sm h-15"
+            <img className="h-8 w-8" src="/images/logo-small-gradient.0ed287ce-1768918267834.svg" alt="Logo" />
-          : "bg-background/0 backdrop-blur-0 h-20"
+          </div>
-      )}
+          <div className="hidden md:flex items-center space-x-8">
-    >
+            <a href="#" className="text-gray-700 dark:text-gray-300 hover:text-blue-600">Home</a>
-      <div className="flex items-center justify-between h-full w-content-width mx-auto">
+            <a href="#" className="text-gray-700 dark:text-gray-300 hover:text-blue-600">Features</a>
-        <div className="flex items-center transition-all duration-500 ease-in-out">
+            <a href="#" className="text-gray-700 dark:text-gray-300 hover:text-blue-600">Pricing</a>
-          <Logo brandName={brandName} />
+            <a href="#" className="text-gray-700 dark:text-gray-300 hover:text-blue-600">Contact</a>
+          </div>
         </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>
-
-        <button
-          className="flex md:hidden shrink-0 h-8 aspect-square rounded-theme bg-foreground items-center justify-center cursor-pointer"
-          onClick={handleMenuToggle}
-          aria-label="Toggle menu"
-          aria-expanded={menuOpen}
-          aria-controls="mobile-menu"
-        >
-          <Plus
-            className={cls(
-              "w-1/2 h-1/2 text-background transition-transform duration-300",
-              menuOpen ? "rotate-45" : "rotate-0"
-            )}
-            strokeWidth={1.5}
-            aria-hidden="true"
-          />
-        </button>
       </div>
-
-      <MobileMenu
-        menuOpen={menuOpen}
-        onMenuToggle={handleMenuToggle}
-        navItems={navItems}
-        onNavClick={handleMobileNavClick}
-      />
     </nav>
   );
 };
 
-export default NavbarStyleApple;
+export default NavbarStyleApple;