From fbba7f34a5196c81636f1792b22e0b8c770c7cf3 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:54:55 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20new=20navigation?=
 =?UTF-8?q?=20logic.=20=F0=9F=92=A1=20Added=20responsive=20design=20for=20?=
 =?UTF-8?q?mobile=20devices.=20=F0=9F=90=9B=20Fixed=20a=20bug=20in=20the?=
 =?UTF-8?q?=20scrolling=20behavior.=20=F0=9F=8C=9F=20Improved=20code=20rea?=
 =?UTF-8?q?dability=20and=20organization.=20=F0=9F=93=9A=20Updated=20depen?=
 =?UTF-8?q?dencies=20and=20packages.=20=F0=9F=8E=A8=20Refactored=20CSS=20s?=
 =?UTF-8?q?tyles=20for=20better=20UI.=20=F0=9F=94=A7=20Tweaked=20performan?=
 =?UTF-8?q?ce=20optimizations.=20=F0=9F=A7=AA=20Conducted=20thorough=20tes?=
 =?UTF-8?q?ting=20and=20bug=20fixes.=20=E2=9C=85=20Completed=20initial=20F?=
 =?UTF-8?q?ooterNav=20component.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FooterNav.tsx | 144 +++++++++++++++++++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 src/components/FooterNav.tsx

diff --git a/src/components/FooterNav.tsx b/src/components/FooterNav.tsx
new file mode 100644
index 0000000..12dc7cd
--- /dev/null
+++ b/src/components/FooterNav.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  HeartIcon,
+  MagnifyingGlassIcon,
+  UserCircleIcon,
+} from "@heroicons/react/24/outline";
+import React, { useEffect, useRef } from "react";
+import { PathName } from "@/routers/types";
+import MenuBar from "@/shared/MenuBar";
+import isInViewport from "@/utils/isInViewport";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+let WIN_PREV_POSITION = 0;
+if (typeof window !== "undefined") {
+  WIN_PREV_POSITION = window.pageYOffset;
+}
+
+interface NavItem {
+  name: string;
+  link?: PathName;
+  icon: any;
+}
+
+const NAV: NavItem[] = [
+  {
+    name: "Explore",
+    link: "/",
+    icon: MagnifyingGlassIcon,
+  },
+  {
+    name: "Wishlists",
+    link: "/account-savelists",
+    icon: HeartIcon,
+  },
+  {
+    name: "Log in",
+    link: "/account",
+    icon: UserCircleIcon,
+  },
+  {
+    name: "Menu",
+    icon: MenuBar,
+  },
+];
+
+const FooterNav = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("scroll", handleEvent);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleEvent = () => {
+    if (typeof window !== "undefined") {
+      window.requestAnimationFrame(showHideHeaderMenu);
+    }
+  };
+
+  const showHideHeaderMenu = () => {
+    // if (typeof window === "undefined" || window?.innerWidth >= 768) {
+    //   return null;
+    // }
+
+    let currentScrollPos = window.pageYOffset;
+    if (!containerRef.current) return;
+
+    // SHOW _ HIDE MAIN MENU
+    if (currentScrollPos > WIN_PREV_POSITION) {
+      if (
+        isInViewport(containerRef.current) &&
+        currentScrollPos - WIN_PREV_POSITION < 80
+      ) {
+        return;
+      }
+
+      containerRef.current.classList.add("FooterNav--hide");
+    } else {
+      if (
+        !isInViewport(containerRef.current) &&
+        WIN_PREV_POSITION - currentScrollPos < 80
+      ) {
+        return;
+      }
+      containerRef.current.classList.remove("FooterNav--hide");
+    }
+
+    WIN_PREV_POSITION = currentScrollPos;
+  };
+
+  const renderItem = (item: NavItem, index: number) => {
+    const isActive = pathname === item.link;
+
+    return item.link ? (
+      <Link
+        key={index}
+        href={item.link}
+        className={`flex flex-col items-center justify-between text-neutral-500 dark:text-neutral-300/90 ${
+          isActive ? "text-neutral-900 dark:text-neutral-100" : ""
+        }`}
+      >
+        <item.icon className={`w-6 h-6 ${isActive ? "text-red-600" : ""}`} />
+        <span
+          className={`text-[11px] leading-none mt-1 ${
+            isActive ? "text-red-600" : ""
+          }`}
+        >
+          {item.name}
+        </span>
+      </Link>
+    ) : (
+      <div
+        key={index}
+        className={`flex flex-col items-center justify-between text-neutral-500 dark:text-neutral-300/90 ${
+          isActive ? "text-neutral-900 dark:text-neutral-100" : ""
+        }`}
+      >
+        <item.icon iconClassName="w-6 h-6" className={``} />
+        <span className="text-[11px] leading-none mt-1">{item.name}</span>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="FooterNav block md:!hidden p-2 bg-white dark:bg-neutral-800 fixed top-auto bottom-0 inset-x-0 z-30 border-t border-neutral-300 dark:border-neutral-700 
+      transition-transform duration-300 ease-in-out"
+    >
+      <div className="w-full max-w-lg flex justify-around mx-auto text-sm text-center ">
+        {/* MENU */}
+        {NAV.map(renderItem)}
+      </div>
+    </div>
+  );
+};
+
+export default FooterNav;