From 564d230250b5d60e1c2b56c71cb959c1549ba914 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Sun, 13 Jul 2025 00:27:42 +0700
Subject: [PATCH] :lipstick: create navigation in navbar

---
 app/(main)/explore/page.tsx      |  7 +++++
 shared/ui/navbar.tsx             | 50 ++++++++++++++++----------------
 widgets/navbar/accountCenter.tsx |  0
 widgets/navbar/mobileSidebar.tsx |  0
 4 files changed, 32 insertions(+), 25 deletions(-)
 create mode 100644 app/(main)/explore/page.tsx
 create mode 100644 widgets/navbar/accountCenter.tsx
 create mode 100644 widgets/navbar/mobileSidebar.tsx

diff --git a/app/(main)/explore/page.tsx b/app/(main)/explore/page.tsx
new file mode 100644
index 0000000..2939c5c
--- /dev/null
+++ b/app/(main)/explore/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>Explore Page</div>;
+};
+
+export default page;
diff --git a/shared/ui/navbar.tsx b/shared/ui/navbar.tsx
index 2766c7c..1e5ec66 100644
--- a/shared/ui/navbar.tsx
+++ b/shared/ui/navbar.tsx
@@ -11,6 +11,7 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
 } from "@heroui/react";
+import { usePathname } from "next/navigation";
 import React, { useState } from "react";
 
 export const AcmeLogo = () => {
@@ -27,6 +28,7 @@ export const AcmeLogo = () => {
 };
 
 const NavbarUI = () => {
+  const pathNameNow = usePathname();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const navbarItems = [
@@ -35,16 +37,20 @@ const NavbarUI = () => {
       route: "/",
     },
     {
-      title: "Featured",
-      route: "/featured",
+      title: "Explore",
+      route: "/explore",
     },
     {
-      title: "Season",
-      route: "/season",
+      title: "Trending",
+      route: "/trending",
     },
     {
       title: "Genres",
-      route: "/genres",
+      route: "/genre",
+    },
+    {
+      title: "Schedule",
+      route: "/schedule",
     },
   ];
 
@@ -62,26 +68,20 @@ const NavbarUI = () => {
       </NavbarContent>
 
       <NavbarContent className="hidden sm:flex gap-6" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Home
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link aria-current="page" href="#">
-            Explore
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Trending
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Schedule
-          </Link>
-        </NavbarItem>
+        {navbarItems.map((item, index) => {
+          const isActive = item.route === pathNameNow;
+
+          return (
+            <NavbarItem key={index} isActive={isActive}>
+              <Link
+                color={isActive ? "primary" : "foreground"}
+                href={isActive ? "" : item.route}
+              >
+                {item.title}
+              </Link>
+            </NavbarItem>
+          );
+        })}
       </NavbarContent>
       <NavbarContent justify="end">
         <NavbarItem className="hidden lg:flex">
diff --git a/widgets/navbar/accountCenter.tsx b/widgets/navbar/accountCenter.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/widgets/navbar/mobileSidebar.tsx b/widgets/navbar/mobileSidebar.tsx
new file mode 100644
index 0000000..e69de29