feat: Introduce NavLink component to refactor Navbar navigation, update authentication button labels, and rename news route to news.index.

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 >
+    )
+}

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>

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');