From 048ce82b2b71af27f256e2592155f726f31f3091 Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Sat, 16 Mar 2024 02:19:01 +0800
Subject: [PATCH] feat(Navbar) update navbar

---
 .gitignore      |  2 +-
 app/globals.css |  1 +
 app/navbar.tsx  | 28 +++++++++++++++++++++++-----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index 75dce35..e32600d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,7 +36,7 @@ yarn-error.log*
 next-env.d.ts
 
 # bun
-./bun.lockb
+/bun.lockb
 
 # ide related
 .idea
diff --git a/app/globals.css b/app/globals.css
index 1c09402..b184015 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -38,6 +38,7 @@
     .dark {
         --background: radial-gradient(circle at center bottom, rgb(2, 35, 96) 0%, rgb(14, 26, 91) 25%, rgba(2, 0, 36, 1) 61%);
         background: var(--background);
+        background-attachment: fixed;
 
         --foreground: 210 40% 98%;
 
diff --git a/app/navbar.tsx b/app/navbar.tsx
index 139cf24..b9e31a9 100644
--- a/app/navbar.tsx
+++ b/app/navbar.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from '@/components/ui/navigation-menu';
+import Link from 'next/link';
 
 const components: { title: string; href: string; description: string }[] = [
     {
@@ -32,12 +33,13 @@ export default function Navbar() {
         <div
             className={ `flex flex-row fixed top-0 z-10 transition-all duration-300 backdrop-blur 
             ${ scrolled ? 'rounded-3xl w-[95%] ml-[2.5%] mr-[2.5%] mt-[1%] border-resolution-blue-200 border'
-                : 'w-full border-slate-200/15 border-b shadow h-' }` }>
+                : 'w-full border-slate-200/15 border-b shadow' }` }>
             <div className={ `transition-all duration-300 ${ scrolled ? 'w-0' : 'w-[5%]' }` }></div>
-            <NavigationMenu>
-                <NavigationMenuList>
+            <NavigationMenu className={ `transition-all duration-300 ${ scrolled ? '' : 'my-5' }` }>
+                <NavigationMenuList
+                    className={ `flex space-x-4  transition-all duration-500 ${ scrolled ? 'space-x-3' : '' }` }>
                     <NavigationMenuItem>
-                        <Avatar>
+                        <Avatar className={ 'transition-all duration-300 hover:scale-125' }>
                             <AvatarImage src={ 'https://avatars.githubusercontent.com/u/46409277' } />
                             <AvatarFallback>Tao</AvatarFallback>
                         </Avatar>
@@ -45,7 +47,23 @@ export default function Navbar() {
                     </NavigationMenuItem>
 
                     <NavigationMenuItem>
-                        <p className={ 'text-xl' }>{"Lumither\'s Blog"}</p>
+                        <Link href={ '/' }>
+                            <p className={ 'text-xl transition-all duration-300 hover:text-resolution-blue-400' }>{ 'Lumither\'s Blog' }</p>
+                        </Link>
+                    </NavigationMenuItem>
+
+                    <div></div>
+
+                    <NavigationMenuItem>
+                        <Link href={ '/about' }>
+                            <p className={ 'transition-all duration-300 hover:text-resolution-blue-400' }>{ 'About' }</p>
+                        </Link>
+                    </NavigationMenuItem>
+
+                    <NavigationMenuItem>
+                        <Link href={ '/archives' }>
+                            <p className={ 'transition-all duration-300 hover:text-resolution-blue-400' }>{ 'Archives' }</p>
+                        </Link>
                     </NavigationMenuItem>
 
                 </NavigationMenuList>