From 7fec6751de098d95d838aeecd25c9f6bce897d95 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 24 Dec 2025 15:21:09 +0700
Subject: [PATCH] feat: Introduce `NavLink` component to refactor `Navbar`
 navigation, update authentication button labels, and rename `news` route to
 `news.index`.

---
 .../js/pages/home/components/NavLink.jsx      | 15 ++++++
 resources/js/pages/home/components/Navbar.jsx | 47 ++++++++-----------
 routes/web.php                                |  2 +-
 3 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 resources/js/pages/home/components/NavLink.jsx

diff --git a/resources/js/pages/home/components/NavLink.jsx b/resources/js/pages/home/components/NavLink.jsx
new file mode 100644
index 0000000..51eb338
--- /dev/null
+++ b/resources/js/pages/home/components/NavLink.jsx
@@ -0,0 +1,15 @@
+import { Button } from "@mui/material";
+import { router } from "@inertiajs/react";
+
+export default function NavLink({ label, href }) {
+    return (
+        <Button
+            variant="text"
+            size="small"
+            color={window.location.pathname === href ? 'secondary' : ''}
+            onClick={() => router.get(href)}
+        >
+            {label}
+        </Button >
+    )
+}
\ No newline at end of file
diff --git a/resources/js/pages/home/components/Navbar.jsx b/resources/js/pages/home/components/Navbar.jsx
index 184f37e..baab29a 100644
--- a/resources/js/pages/home/components/Navbar.jsx
+++ b/resources/js/pages/home/components/Navbar.jsx
@@ -13,7 +13,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import ColorModeIconDropdown from '../../theme/ColorModeIconDropdown';
 import Logo from './Logo';
-import { router } from '@inertiajs/react';
+import NavLink from './NavLink';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
     display: 'flex',
@@ -31,13 +31,22 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
     padding: '8px 12px',
 }));
 
-export default function Navbar() {
+export default function Navbar({ currentRoute }) {
     const [open, setOpen] = React.useState(false);
 
     const toggleDrawer = (newOpen) => () => {
         setOpen(newOpen);
     };
 
+    const navItems = [
+        { label: 'Berita', href: '/news' },
+        { label: 'Testimonials', href: '/testimonials' },
+        { label: 'Highlights', href: '/highlights' },
+        { label: 'Pricing', href: '/pricing' },
+        { label: 'FAQ', href: '/faq' },
+        { label: 'Blog', href: '/blog' },
+    ]
+
     return (
         <AppBar
             position="fixed"
@@ -54,29 +63,13 @@ export default function Navbar() {
                     <Box sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', px: 0 }}>
                         <Logo />
                         <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                            <Button
-                                variant="text"
-                                color="info"
-                                size="small"
-                                onClick={() => router.get('/news')}
-                            >
-                                Berita
-                            </Button>
-                            <Button variant="text" color="info" size="small">
-                                Testimonials
-                            </Button>
-                            <Button variant="text" color="info" size="small">
-                                Highlights
-                            </Button>
-                            <Button variant="text" color="info" size="small">
-                                Pricing
-                            </Button>
-                            <Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
-                                FAQ
-                            </Button>
-                            <Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
-                                Blog
-                            </Button>
+                            {navItems.map((item) => (
+                                <NavLink
+                                    key={item.label}
+                                    label={item.label}
+                                    href={item.href}
+                                />
+                            ))}
                         </Box>
                     </Box>
                     <Box
@@ -87,10 +80,10 @@ export default function Navbar() {
                         }}
                     >
                         <Button color="primary" variant="text" size="small">
-                            Sign in
+                            Masuk
                         </Button>
                         <Button color="primary" variant="contained" size="small">
-                            Sign up
+                            Daftar
                         </Button>
                         <ColorModeIconDropdown />
                     </Box>
diff --git a/routes/web.php b/routes/web.php
index 23005f2..2c6ac4a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -5,4 +5,4 @@
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', [HomepageController::class, 'index'])->name('homepage');
-Route::get('/news', [NewsController::class, 'index'])->name('news');
+Route::get('/news', [NewsController::class, 'index'])->name('news.index');