feat(Navbar) navbar update

app/about/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+   return <></>
+}

app/globals.css

@@ -1,76 +1,79 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .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);
+
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+    }
 }
- 
+
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

app/header.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-
-export default function Header() {
-    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 <>
-        <div className={ `flex flex-row fixed w-full top-0 z-10 transition-all duration-300 ${ scrolled ? 'rounded-b-lg backdrop-blur' : 'bg-opacity-0' }` }>
-            <Avatar>
-                <AvatarImage src={ 'https://avatars.githubusercontent.com/u/46409277' } />
-                <AvatarFallback>Tao</AvatarFallback>
-            </Avatar>
-            <p className={`text-xl align-middle`}>{ 'Lumither\'s Blog' }</p>
-
-        </div>
-    </>;
-}

app/layout.tsx

@@ -5,7 +5,7 @@ import { Inter as FontSans } from 'next/font/google';
 import { cn } from '@/lib/utils';
 import React from 'react';
 import { ThemeProvider } from '@/components/theme-provider';
-import Header from '@/app/header';
+import Navbar from '@/app/navbar';
 
 
 const fontSans = FontSans({
@@ -30,11 +30,11 @@ export default function RootLayout({
         ) }>
         <ThemeProvider
             attribute="class"
-            defaultTheme="system"
+            defaultTheme="dark"
             enableSystem
             disableTransitionOnChange
         >
-            <Header />
+            <Navbar />
             { children }
         </ThemeProvider>
         </body>

app/navbar.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from '@/components/ui/navigation-menu';
+
+const components: { title: string; href: string; description: string }[] = [
+    {
+        title: 'title of subpage',
+        href: 'url',
+        description:
+            'a description'
+    }
+];
+export default 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 <>
+        <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-' }` }>
+            <div className={ `transition-all duration-300 ${ scrolled ? 'w-0' : 'w-[5%]' }` }></div>
+            <NavigationMenu>
+                <NavigationMenuList>
+                    <NavigationMenuItem>
+                        <Avatar>
+                            <AvatarImage src={ 'https://avatars.githubusercontent.com/u/46409277' } />
+                            <AvatarFallback>Tao</AvatarFallback>
+                        </Avatar>
+
+                    </NavigationMenuItem>
+
+                    <NavigationMenuItem>
+                        <p className={ 'text-xl' }>{"Lumither\'s Blog"}</p>
+                    </NavigationMenuItem>
+
+                </NavigationMenuList>
+            </NavigationMenu>
+
+        </div>
+    </>;
+}

app/page.tsx

@@ -2,11 +2,15 @@ export default function Home() {
     let info = new Array(200).fill(<p> test </p>);
     return (
         <main>
-            <ul>
-                { info.map((item, id) => (
-                    <li key={ id }> { item } </li>
-                )) }
-            </ul>
+            <div className={ 'h-screen' }>
+                <div className={ ' overflow-scroll' }>
+                    <ul>
+                        { info.map((item, id) => (
+                            <li key={ id }> { item } </li>
+                        )) }
+                    </ul>
+                </div>
+            </div>
         </main>
     );
 }