feat(navbar) update navbar

app/archive/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Archive = () => {
+    return (
+        <div>
+
+        </div>
+    );
+};
+
+export default Archive;

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` }>
+        <div className={ `w-full` }>
             <Generate id={ params.id } />
         </div>
     );

app/layout.tsx

@@ -3,6 +3,7 @@ import './globals.css';
 import React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
 
 
 export const metadata: Metadata = {
@@ -21,8 +22,9 @@ export default function RootLayout({
         <NextThemesProvider attribute="class" defaultTheme="dark">
             <div className={ `justify-center flex flex-row w-full` }>
                 <Navbar />
-                <div className={ `flex-auto max-w-[1024px]` }>
+                <div className={ `flex flex-col flex-auto max-w-[1024px]` }>
                     { children }
+                    <Footer />
                 </div>
             </div>
         </NextThemesProvider>

app/search/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Search = () => {
+    return (
+        <div>
+
+        </div>
+    );
+};
+
+export default Search;

app/tags/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Tags = () => {
+    return (
+        <div>
+
+        </div>
+    );
+};
+
+export default Tags;

components/Navbar.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-icons/io5';
 import Link from 'next/link';
 import ThemeSwitcher from '@/components/ThemeSwitcher';
+import { usePathname } from 'next/navigation';
 
 const entries: { display_name: string; href: string; icon: React.ReactNode }[] = [
     {
@@ -39,7 +40,7 @@ const entries: { display_name: string; href: string; icon: React.ReactNode }[] =
     {
         icon: <IoFileTrayFull size={ `20px` }></IoFileTrayFull>,
         display_name: 'Archive',
-        href: '/Archive'
+        href: '/archive'
     },
     {
         icon: <IoSearch size={ `20px` }></IoSearch>,
@@ -48,9 +49,21 @@ const entries: { display_name: string; href: string; icon: React.ReactNode }[] =
     }
 ];
 
+const connections: { label: string, href: string, icon: React.ReactNode }[] = [
+    {
+        label: 'Github',
+        href: 'https://github.com/Lumither',
+        icon: <IoLogoGithub size={ `30px` } />
+    },
+    {
+        label: 'email',
+        href: 'mailto:lumither@outlook.com',
+        icon: <IoMail size={ `30px` } />
+    }
+];
+
 function Navbar() {
     const [ scrolled, setScrolled ] = useState(false);
-
     useEffect(() => {
         const handleScroll = () => {
             const isScrolled = window.scrollY > 0;
@@ -63,11 +76,43 @@ function Navbar() {
     }, []);
 
 
+    const path = usePathname();
+    const [ shownPath, setShownPath ] = useState(path);
+    useEffect(() => {
+        let trimmed_path = path.split(`/`)[1];
+        if (trimmed_path === '') {
+            setShownPath('HOME');
+        } else {
+            setShownPath(trimmed_path.toUpperCase());
+        }
+    }, [ path ]);
+
+
+    const minMobileWidth: number = 768;
+    const [ isMobile, setIsMobile ] = useState(false);
+    useEffect(() => {
+        const updateMobileWidth = () => {
+            if (window.innerWidth <= minMobileWidth) {
+                setIsMobile(true);
+            } else {
+                setIsMobile(false);
+            }
+        };
+        updateMobileWidth();
+        window.addEventListener('resize', updateMobileWidth);
+        return () => {
+            window.removeEventListener('resize', updateMobileWidth);
+        };
+
+    }, []);
+
+
     return (
         <>
             <div
-                className={ `flex flex-col w-full max-w-[256px] mr-2 ml-8 min-h-screen max-h-screen pt-8 sticky` }>
+                className={ `flex flex-col w-auto md:w-full min-w-[50px] max-w-[256px] mr-2 ml-8 min-h-screen max-h-screen pt-8 sticky` }>
                 <div className={ `fixed min-h-screen h-full` }>
+                    <div className={ `hidden md:block` }>
                         <div className={ `flex justify-center items-center my-7` }>
                             <Image
                                 src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
@@ -79,34 +124,51 @@ function Navbar() {
                             ></Image>
                         </div>
 
+                        <div>
                             <p className={ `font-bold text-2xl` }>Lumither Tao</p>
                             <p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p>
+                        </div>
+                    </div>
 
-                    <div className={ `flex flex-row items-center my-4 space-x-2` }>
+                    <div>
-                        <Link href={ 'https://github.com/Lumither' } aria-label={ `GitHub` }>
+                        <ul className={ `flex flex-col space-y-2 md:space-y-0 md:flex-row items-center my-4 md:space-x-2` }>
-                            <IoLogoGithub size={ `30px` } />
+                            {
-                        </Link>
+                                connections.map((conn, key) => (
-                        <Link href={ 'mailto:lumither@outlook.com' } aria-label={ `email` }>
+                                    <li key={ key }>
-                            <IoMail size={ `30px` } />
+                                        <Button as={ Link }
-                        </Link>
+                                                href={ conn.href }
+                                                aria-label={ conn.label }
+                                                variant={ `light` }
+                                                color={ `default` }
+                                                className={ `w-fit` }
+                                                isIconOnly
+                                        >
+                                            { conn.icon }
+                                        </Button>
+                                    </li>
+                                ))
+
+                            }
+                        </ul>
                     </div>
 
                     <div
-                        className={ `mt-8 -ml-3` }>
+                        className={ `mt-8 ml-0 md:-ml-3` }>
                         <ul className={ `flex flex-col space-y-2` }>
                             {
                                 entries.map((meta, key) => (
                                     <li key={ key }>
-                                        <Button startContent={ meta.icon }
+                                        <Button
                                             as={ Link }
                                             variant={ `light` }
                                             color={ `default` }
                                             fullWidth
-                                                className={ 'flex justify-start' }
+                                            isIconOnly={ isMobile }
-                                            // className={ `w-full` }
+                                            className={ 'flex md:justify-start w-fit md:w-full' }
                                             aria-label={ `navbar: ${ meta.display_name }` }
                                             href={ meta.href }>
-                                            <p className={ `font-bold` }>{ meta.display_name }</p>
+                                            { meta.icon }
+                                            <p className={ `font-bold hidden md:block` }>{ meta.display_name }</p>
                                         </Button>
                                     </li>
                                 ))
@@ -114,6 +176,12 @@ function Navbar() {
                         </ul>
                     </div>
 
+                    <div className={ `mt-8 md:hidden` }>
+                        <p className={ `sideways-lr font-bold text-2xl text-zinc-500 dark:text-zinc-400` }>
+                            { shownPath }
+                        </p>
+                    </div>
+
                     <div
                         className={ `absolute bottom-8 mb-8` }
                     >

tailwind.config.ts

@@ -1,6 +1,7 @@
 import { nextui } from '@nextui-org/react';
 
 import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
 
 const config: Config = {
     content: [
@@ -30,6 +31,28 @@ const config: Config = {
                     }
                 }
             }
-    ) ]
+        ),
+        plugin(function ({ addUtilities, addComponents, e, config }) {
+            addUtilities(
+                {
+                    '.horizontal-tb': {
+                        writingMode: 'horizontal-tb'
+                    },
+                    '.vertical-rl': {
+                        writingMode: 'vertical-rl'
+                    },
+                    '.vertical-lr': {
+                        writingMode: 'vertical-lr'
+                    },
+                    '.sideways-lr': {
+                        writingMode: 'sideways-lr'
+                    },
+                    '.sideways-rl': {
+                        writingMode: 'sideways-rl'
+                    }
+                }
+            );
+        })
+    ]
 };
 export default config;