From d855df0d6ed2c76d68a08e742290d17af7067e9c Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Sat, 25 May 2024 23:20:12 +0800
Subject: [PATCH] feat(navbar) new style, better performance

---
 app/blog/BlogPostCard.tsx       |   2 +-
 app/blog/page.tsx               |   2 +-
 app/blog/post/[id]/generate.tsx |   6 +-
 app/blog/post/[id]/page.tsx     |   2 +-
 app/layout.tsx                  |  10 ++-
 components/Navbar.tsx           | 140 +++++++++++++++++---------------
 components/ThemeSwitcher.tsx    |   1 +
 7 files changed, 90 insertions(+), 73 deletions(-)

diff --git a/app/blog/BlogPostCard.tsx b/app/blog/BlogPostCard.tsx
index 6edc0c5..498e771 100644
--- a/app/blog/BlogPostCard.tsx
+++ b/app/blog/BlogPostCard.tsx
@@ -23,7 +23,7 @@ function BlogPostCard({ post }: Props) {
 
     return (
 
-        <div>
+        <div className={ `w-full` }>
             <Card as={ Link } href={ `/blog/post/${ post_id }` }
                   className={ `mx-7 group` }
                   isPressable
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 7b5af57..df6cdb4 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -9,7 +9,7 @@ async function Blog() {
         let posts = res['posts'];
         return (
             // blog list
-            <ul className={ 'flex flex-col items-center w-full max-w-[1024px]' }>
+            <ul className={ 'flex flex-col items-center w-full' }>
                 { posts.map((post: JSON, key: React.Key | null | undefined) => (
                     <li key={ key } className={ 'my-7 w-full' }>
                         <BlogPostCard post={ post } />
diff --git a/app/blog/post/[id]/generate.tsx b/app/blog/post/[id]/generate.tsx
index 98f1bc9..10049a5 100644
--- a/app/blog/post/[id]/generate.tsx
+++ b/app/blog/post/[id]/generate.tsx
@@ -19,7 +19,7 @@ async function Generate(props: Props) {
     const response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post/${ props.id }`);
     if (response.status !== 200) {
         return (
-            <Card className={ `w-full max-w-[1024px]` }>
+            <Card className={ `w-full` }>
                 <CardBody>
                     Fatal: Failed to load the post.
                 </CardBody>
@@ -31,10 +31,10 @@ async function Generate(props: Props) {
 
     return (
         <div>
-            <Card className={ `w-full max-w-[1024px]` }>
+            <Card className={ `w-full` }>
                 <CardBody>
                     <Markdown
-                        className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-sm lg:prose-lg` }
+                        className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-md lg:prose-lg` }
                         remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
                         rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
                     >{ (post_data as any)['content'] }</Markdown>
diff --git a/app/blog/post/[id]/page.tsx b/app/blog/post/[id]/page.tsx
index 28b0ca0..400aedc 100644
--- a/app/blog/post/[id]/page.tsx
+++ b/app/blog/post/[id]/page.tsx
@@ -4,7 +4,7 @@ import Generate from '@/app/blog/post/[id]/generate';
 function BlogReader({ params }: { params: { id: string } }) {
 
     return (
-        <div className={ `mx-7 my-7 w-full max-w-[1024px]` }>
+        <div className={ `mx-7 my-7 w-full` }>
             <Generate id={ params.id } />
         </div>
     );
diff --git a/app/layout.tsx b/app/layout.tsx
index 44f1b59..162ac2c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -17,10 +17,14 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-        <body className={`dark:bg-[#282830]`}>
+        <body className={ `dark:bg-[#282830] min-h-screen` }>
         <NextThemesProvider attribute="class" defaultTheme="dark">
-            <Navbar />
-            { children }
+            <div className={ `justify-center flex flex-row w-full` }>
+                <Navbar />
+                <div className={ `flex-auto max-w-[1024px]` }>
+                    { children }
+                </div>
+            </div>
         </NextThemesProvider>
         </body>
         </html>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index c5d7f9e..056682d 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,33 +1,50 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { Button, Image } from '@nextui-org/react';
 import {
-    Image,
-    Navbar as NextUINavbar,
-    NavbarBrand,
-    NavbarContent,
-    NavbarItem,
-    NavbarMenu,
-    NavbarMenuItem,
-    NavbarMenuToggle
-} from '@nextui-org/react';
+    IoFileTrayFull,
+    IoHome,
+    IoInformationCircle,
+    IoLogoGithub,
+    IoMail,
+    IoPencil,
+    IoPricetags,
+    IoSearch
+} from 'react-icons/io5';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 import ThemeSwitcher from '@/components/ThemeSwitcher';
 
-
-const entries: { display_name: string; href: string; }[] = [
+const entries: { display_name: string; href: string; icon: React.ReactNode }[] = [
     {
+        icon: <IoHome size={ `20px` }></IoHome>,
         display_name: 'Home',
         href: '/'
     },
     {
+        icon: <IoInformationCircle size={ `20px` }></IoInformationCircle>,
         display_name: 'About',
         href: '/about'
     },
     {
+        icon: <IoPencil size={ `20px` }></IoPencil>,
         display_name: 'Blog',
         href: '/blog'
+    },
+    {
+        icon: <IoPricetags size={ `20px` }></IoPricetags>,
+        display_name: 'Tags',
+        href: '/tags'
+    },
+    {
+        icon: <IoFileTrayFull size={ `20px` }></IoFileTrayFull>,
+        display_name: 'Archive',
+        href: '/Archive'
+    },
+    {
+        icon: <IoSearch size={ `20px` }></IoSearch>,
+        display_name: 'Search',
+        href: '/search'
     }
 ];
 
@@ -48,67 +65,62 @@ function Navbar() {
 
     return (
         <>
-            <NextUINavbar isBlurred isBordered>
-
-                <NavbarContent className="sm:hidden" justify="start">
-                    <NavbarMenuToggle />
-                </NavbarContent>
-
-                <NavbarContent className="sm:hidden pr-3" justify="center">
+            <div className={ `flex flex-col w-full max-w-[256px] mr-2 ml-8 min-h-screen pt-8 sticky` }>
+                <div className={ `flex justify-center items-center my-7` }>
                     <Image
                         src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
                         alt={ 'avatar' }
-                        className={ 'rounded-full h-[3rem]' }
+                        width={ 200 }
+                        height={ 200 }
+                        className={ 'rounded-full justify-self-center' }
+                        removeWrapper
                     ></Image>
+                </div>
 
-                    <NavbarBrand>
-                        <p className="font-bold text-inherit">{ 'Lumither\'s site' }</p>
-                    </NavbarBrand>
-                </NavbarContent>
+                <p className={ `font-bold text-2xl` }>Lumither Tao</p>
+                <p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p>
 
-                <NavbarContent className="hidden sm:flex gap-4" justify="center">
-                    <Image
-                        src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
-                        alt={ 'avatar' }
-                        className={ 'rounded-full h-[3rem]' }
-                    ></Image>
+                <div className={ `flex flex-row items-center my-4 space-x-2` }>
+                    <Link href={ 'https://github.com/Lumither' } aria-label={ `GitHub` }>
+                        <IoLogoGithub size={ `30px` } />
+                    </Link>
+                    <Link href={ 'mailto:lumither@outlook.com' } aria-label={ `email` }>
+                        <IoMail size={ `30px` } />
+                    </Link>
+                </div>
 
-                    <NavbarBrand>
-                        <p className="font-bold text-inherit">{ 'Lumither\'s site' }</p>
-                    </NavbarBrand>
+                <div
+                    className={ `mt-8 -ml-3` }>
+                    <ul className={ `flex flex-col space-y-2` }>
+                        {
+                            entries.map((meta, key) => (
+                                <li key={ key }>
+                                    <Button startContent={ meta.icon }
+                                            as={ Link }
+                                            variant={ `light` }
+                                            color={ `default` }
+                                            fullWidth
+                                            className={ 'flex justify-start' }
+                                        // className={ `w-full` }
+                                            aria-label={ `navbar: ${ meta.display_name }` }
+                                            href={ meta.href }>
+                                        <p className={ `font-bold` }>{ meta.display_name }</p>
+                                    </Button>
+                                </li>
+                            ))
+                        }
+                    </ul>
+                </div>
 
-                    { 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>
+                <div
+                    className={ `absolute bottom-0 mb-8` }
+                >
+                    <div className={ `flex flex-row justify-center` }>
                         <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>
+                        <p className={ `font-bold` }>{ `Toggle Theme` }</p>
+                    </div>
+                </div>
+            </div>
         </>
     );
 }
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
index 9db2f10..c416972 100644
--- a/components/ThemeSwitcher.tsx
+++ b/components/ThemeSwitcher.tsx
@@ -21,6 +21,7 @@ function ThemeSwitcher() {
         <div>
             <Switch
                 color={ 'default' }
+                aria-label={ `theme switch` }
                 startContent={ <MdOutlineLightMode /> }
                 endContent={ <MdOutlineDarkMode /> }
                 onValueChange={ (isSelected) => {