From 4c21af62091f3355a7a29b32bd9e4094a1202f1c Mon Sep 17 00:00:00 2001
From: marszayn <official.muammar@gmail.com>
Date: Mon, 10 Mar 2025 14:09:12 +0700
Subject: [PATCH] style: Memperbarui komponen Navbar dengan menambahkan item
 menu dan ikon baru

---
 resources/js/components/Partials/Footer.tsx |   4 +-
 resources/js/components/Partials/Navbar.tsx | 100 ++++++++------------
 2 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/resources/js/components/Partials/Footer.tsx b/resources/js/components/Partials/Footer.tsx
index 02b6645..220ab53 100644
--- a/resources/js/components/Partials/Footer.tsx
+++ b/resources/js/components/Partials/Footer.tsx
@@ -42,7 +42,9 @@ const Footer = () => {
                             Telepon: (021) 8092744 | Fax: (021) 8091056
                         </p>
                         <p className="text-sm">Email: dinaslh@jakarta.go.id</p>
-                        <p className="text-xs mt-6">© Copyright 2016</p>
+                        <p className="text-xs mt-6">
+                            © Copyright {new Date().getFullYear()}
+                        </p>
                     </div>
                 </div>
             </footer>
diff --git a/resources/js/components/Partials/Navbar.tsx b/resources/js/components/Partials/Navbar.tsx
index d29e55a..289fad1 100644
--- a/resources/js/components/Partials/Navbar.tsx
+++ b/resources/js/components/Partials/Navbar.tsx
@@ -1,5 +1,16 @@
 import React, { useState, useEffect } from "react";
-import { Search, LogIn, Menu, X, Moon, Sun } from "lucide-react";
+import {
+    Search,
+    LogIn,
+    Menu,
+    X,
+    Moon,
+    Sun,
+    Home,
+    Bell,
+    FileText,
+    BookOpen,
+} from "lucide-react";
 import {
     NavigationMenu,
     NavigationMenuList,
@@ -33,10 +44,8 @@ interface CustomPageProps extends InertiaPageProps {
 
 const Navbar = () => {
     const { runPosts = [] } = usePage<CustomPageProps>().props;
-    // const runPosts = props.runPosts || [];
     const [isScrolled, setIsScrolled] = useState(false);
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-    // const [searchQuery, setSearchQuery] = useState("");
     const { theme, setTheme } = useTheme();
 
     // Handle scroll effect
@@ -54,56 +63,43 @@ const Navbar = () => {
         setTheme(theme === "light" ? "dark" : "light");
     };
 
+    const menuItems = [
+        { title: "HOME", icon: <Home className="h-4 w-4 mr-2" />, href: "/" },
+        {
+            title: "PENGUMUMAN",
+            icon: <Bell className="h-4 w-4 mr-2" />,
+            href: "/pengumuman",
+        },
+        {
+            title: "UNDANGAN",
+            icon: <FileText className="h-4 w-4 mr-2" />,
+            href: "/undangan",
+        },
+        {
+            title: "PERATURAN",
+            icon: <BookOpen className="h-4 w-4 mr-2" />,
+            href: "/peraturan",
+        },
+    ];
+
     const NavItems: React.FC<NavItemsProps> = ({ mobile = false, onClose }) => (
         <>
-            <NavigationMenuItem>
-                <Link
-                    href={`/`}
-                    onClick={mobile && onClose ? onClose : undefined}
-                    className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
-                        mobile
-                            ? "flex w-full justify-center items-center mx-auto rounded-lg hover:bg-green-700"
-                            : "rounded-full hover:bg-green-800"
-                    }`}
-                >
-                    HOME
-                </Link>
-            </NavigationMenuItem>
-            {["PENGUMUMAN", "UNDANGAN", "PERATURAN"].map((item) => (
-                <NavigationMenuItem key={item}>
+            {menuItems.map((item) => (
+                <NavigationMenuItem key={item.title}>
                     <Link
-                        href={`/${item.toLowerCase()}`}
+                        href={item.href}
                         onClick={mobile && onClose ? onClose : undefined}
-                        className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
+                        className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white text-sm hover:font-bold ${
                             mobile
-                                ? "w-full justify-center items-center rounded-lg hover:bg-green-700"
-                                : "rounded-full hover:bg-green-800"
+                                ? "flex w-full justify-center items-center mx-auto rounded-lg hover:bg-green-700"
+                                : "rounded-full hover:bg-green-800 hover:scale-105"
                         }`}
                     >
-                        {item}
+                        {item.icon}
+                        {item.title}
                     </Link>
                 </NavigationMenuItem>
             ))}
-            {/* <NavigationMenuItem>
-                <form onSubmit={handleSearch} className="flex items-center">
-                    <input
-                        type="text"
-                        placeholder="Search..."
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                        className={`bg-white text-black px-3 py-2 rounded-l-full focus:outline-none w-full ${
-                            mobile ? "w-32" : "w-40"
-                        }`}
-                    />
-                    <Button
-                        type="submit"
-                        variant="ghost"
-                        className="bg-green-700 hover:bg-green-600 text-white rounded-r-full p-2"
-                    >
-                        <Search className="h-4 w-4 text-white" />
-                    </Button>
-                </form>
-            </NavigationMenuItem> */}
             <NavigationMenuItem>
                 <SearchDialog />
             </NavigationMenuItem>
@@ -134,8 +130,8 @@ const Navbar = () => {
                             />
                         </Link>
 
-                        <NavigationMenu className="bg-green-800/90 rounded-full hidden md:block backdrop-blur-sm">
-                            <NavigationMenuList className="space-x-6">
+                        <NavigationMenu className="bg-green-800/90 rounded-full hidden md:block backdrop-blur-sm shadow-lg border border-green-700/30 hover:border-green-600/50 transition-all">
+                            <NavigationMenuList className="space-x-2 px-2 py-1">
                                 <NavItems />
                             </NavigationMenuList>
                         </NavigationMenu>
@@ -193,22 +189,10 @@ const Navbar = () => {
                             </Drawer>
                         </div>
 
-                        {/* <Button
-                            variant="ghost"
-                            onClick={toggleTheme}
-                            className="p-3 bg-[#2d7448] hover:bg-[#16a34a] rounded-full text-white "
-                        >
-                            {theme === "light" ? (
-                                <Moon className="h-6 w-6" />
-                            ) : (
-                                <Sun className="h-6 w-6" />
-                            )}
-                        </Button> */}
-
                         <div className="hidden md:block">
                             <Link
                                 href="/login"
-                                className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-4 py-2 rounded-full"
+                                className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg text-sm"
                             >
                                 <LogIn className="mr-2 h-4 w-4" /> LOGIN
                             </Link>