fix(layout) fix top margin

This commit is contained in:
lumither committed 2024-03-24 00:20:52 +08:00
1 parent f883ca6798
commit cd487561d4
3 files changed
+6 -6

No files matched your search

+4
View File
@@ -35,7 +35,11 @@ export default function RootLayout({
disableTransitionOnChange disableTransitionOnChange
> >
<Navbar /> <Navbar />
<div className={ 'h-screen' }>
<div className={ 'mt-20 overflow-scroll' }>
{ children } { children }
</div>
</div>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>
+2 -2
View File
@@ -36,9 +36,9 @@ export default function Navbar() {
<div <div
className={ `flex flex-row fixed top-0 z-10 transition-all duration-300 backdrop-blur 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' ${ 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> <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 <NavigationMenuList
className={ `flex space-x-4 transition-all duration-500 ${ scrolled ? 'space-x-3' : '' }` }> className={ `flex space-x-4 transition-all duration-500 ${ scrolled ? 'space-x-3' : '' }` }>
<NavigationMenuItem> <NavigationMenuItem>
-4
View File
@@ -2,15 +2,11 @@ export default function Home() {
let info = new Array(200).fill(<p> test </p>); let info = new Array(200).fill(<p> test </p>);
return ( return (
<main> <main>
<div className={ 'h-screen' }>
<div className={ ' overflow-scroll' }>
<ul> <ul>
{ info.map((item, id) => ( { info.map((item, id) => (
<li key={ id }> { item } </li> <li key={ id }> { item } </li>
)) } )) }
</ul> </ul>
</div>
</div>
</main> </main>
); );
} }