feat(navbar) a navbar with theme switcher

components/Navbar.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+    Navbar as NextUINavbar,
+    NavbarBrand,
+    NavbarContent,
+    NavbarItem,
+    NavbarMenu,
+    NavbarMenuItem,
+    NavbarMenuToggle
+} from '@nextui-org/react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import ThemeSwitcher from '@/components/ThemeSwitcher';
+
+
+const entries: { display_name: string; href: string; }[] = [
+    {
+        display_name: 'Home',
+        href: '/'
+    },
+    {
+        display_name: 'About',
+        href: '/about'
+    },
+    {
+        display_name: 'Blog',
+        href: '/blog'
+    }
+];
+
+function Navbar() {
+    const [ scrolled, setScrolled ] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            const isScrolled = window.scrollY > 0;
+            setScrolled(isScrolled);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+
+    return (
+        <>
+            <NextUINavbar isBlurred isBordered>
+                <NavbarContent className="sm:hidden" justify="start">
+                    <NavbarMenuToggle />
+                </NavbarContent>
+
+                <NavbarContent className="sm:hidden pr-3" justify="center">
+                    <NavbarBrand>
+                        <p className="font-bold text-inherit">{ 'Lumither\'s site' }</p>
+                    </NavbarBrand>
+                </NavbarContent>
+
+                <NavbarContent className="hidden sm:flex gap-4" justify="center">
+                    <NavbarBrand>
+                        <p className="font-bold text-inherit">{ 'Lumither\'s site' }</p>
+                    </NavbarBrand>
+
+                    { entries.map((item, index) => (
+                        // eslint-disable-next-line react-hooks/rules-of-hooks
+                        <NavbarItem key={ index } isActive={ usePathname() === item.href }>
+                            <Link
+                                className="w-full"
+                                href={ item.href }
+                            >
+                                { item.display_name }
+                            </Link>
+                        </NavbarItem>
+                    )) }
+                </NavbarContent>
+
+                <NavbarContent justify="end">
+                    <NavbarItem>
+                        <ThemeSwitcher />
+                    </NavbarItem>
+                </NavbarContent>
+
+                <NavbarMenu>
+                    { entries.map((item, index) => (
+                        <NavbarMenuItem key={ index }>
+                            <Link
+                                className="w-full"
+                                href={ item.href }
+                            >
+                                { item.display_name }
+                            </Link>
+                        </NavbarMenuItem>
+                    )) }
+                </NavbarMenu>
+            </NextUINavbar>
+        </>
+    );
+}
+
+export default Navbar;

components/ThemeSwitcher.tsx

@@ -2,7 +2,8 @@
 
 import React, { useEffect, useState } from 'react';
 import { useTheme } from 'next-themes';
-import { Button } from '@nextui-org/react';
+import { Switch } from '@nextui-org/react';
+import { MdOutlineDarkMode, MdOutlineLightMode } from 'react-icons/md';
 
 function ThemeSwitcher() {
     const [ mounted, setMounted ] = useState(false);
@@ -18,12 +19,18 @@ function ThemeSwitcher() {
 
     return (
         <div>
-            <Button onClick={ () => {
-                setTheme('light');
-            } }>Light Mode</Button>
-            <Button onClick={ () => {
-                setTheme('dark');
-            } }>Dark Mode</Button>
+            <Switch
+                color={ 'default' }
+                startContent={ <MdOutlineLightMode /> }
+                endContent={ <MdOutlineDarkMode /> }
+                onValueChange={ (isSelected) => {
+                    if (isSelected) {
+                        setTheme('light');
+                    } else {
+                        setTheme('dark');
+                    }
+                } }
+            ></Switch>
         </div>
     );
 }