feat(navbar) a navbar with theme switcher

app/about/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function About() {
+    return (
+        <div></div>
+    );
+}
+
+export default About;

app/blog/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function Blog() {
+    return (
+        <div></div>
+    );
+}
+
+export default Blog;

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import Navbar from '@/components/Navbar';
 
 const inter = Inter({ subsets: [ 'latin' ] });
 
@@ -20,6 +21,7 @@ export default function RootLayout({
         <html lang="en" suppressHydrationWarning>
         <body className={ inter.className }>
         <NextThemesProvider attribute="class" defaultTheme="dark">
+            <Navbar />
             { children }
         </NextThemesProvider>
         </body>

app/page.tsx

@@ -1,9 +1,7 @@
-import ThemeSwitcher from '@/components/ThemeSwitcher';
-
 export default function Home() {
     return (
         <main>
-            <ThemeSwitcher />
+            {/*<ThemeSwitcher />*/ }
         </main>
     );
 }

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={ () => {
+            <Switch
-                setTheme('light');
+                color={ 'default' }
-            } }>Light Mode</Button>
+                startContent={ <MdOutlineLightMode /> }
-            <Button onClick={ () => {
+                endContent={ <MdOutlineDarkMode /> }
-                setTheme('dark');
+                onValueChange={ (isSelected) => {
-            } }>Dark Mode</Button>
+                    if (isSelected) {
+                        setTheme('light');
+                    } else {
+                        setTheme('dark');
+                    }
+                } }
+            ></Switch>
         </div>
     );
 }

package.json

@@ -14,7 +14,8 @@
     "next": "14.2.2",
     "next-themes": "^0.3.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.1.0"
   },
   "devDependencies": {
     "typescript": "^5",