From cd487561d44eb16f61bb38929dfe6f7a4c112a34 Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Sun, 24 Mar 2024 00:20:52 +0800
Subject: [PATCH] fix(layout) fix top margin

---
 app/layout.tsx | 6 +++++-
 app/navbar.tsx | 4 ++--
 app/page.tsx   | 4 ----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 7a4ece1..0fa028c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -35,7 +35,11 @@ export default function RootLayout({
             disableTransitionOnChange
         >
             <Navbar />
-            { children }
+            <div className={ 'h-screen' }>
+                <div className={ 'mt-20 overflow-scroll' }>
+                    { children }
+                </div>
+            </div>
         </ThemeProvider>
         </body>
         </html>
diff --git a/app/navbar.tsx b/app/navbar.tsx
index 57ee5ad..adc3796 100644
--- a/app/navbar.tsx
+++ b/app/navbar.tsx
@@ -36,9 +36,9 @@ 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' }` }>
+                : 'w-full border-slate-200/15 border-b shadow h-20' }` }>
             <div className={ `transition-all duration-300 ${ scrolled ? 'w-0' : 'w-[5%]' }` }></div>
-            <NavigationMenu className={ `transition-all duration-300 ${ scrolled ? '' : 'my-5' }` }>
+            <NavigationMenu className={ `transition-all duration-300` }>
                 <NavigationMenuList
                     className={ `flex space-x-4  transition-all duration-500 ${ scrolled ? 'space-x-3' : '' }` }>
                     <NavigationMenuItem>
diff --git a/app/page.tsx b/app/page.tsx
index 636387b..6d98d69 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,15 +2,11 @@ export default function Home() {
     let info = new Array(200).fill(<p> test </p>);
     return (
         <main>
-            <div className={ 'h-screen' }>
-                <div className={ ' overflow-scroll' }>
                     <ul>
                         { info.map((item, id) => (
                             <li key={ id }> { item } </li>
                         )) }
                     </ul>
-                </div>
-            </div>
         </main>
     );
 }