fix white flash?
Some checks failed
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Has been cancelled

Took 7 minutes
This commit is contained in:
Braydon 2024-10-07 13:25:28 -04:00
parent 942938ad8f
commit 2c4e2bd0b1
3 changed files with 17 additions and 15 deletions

View File

@ -43,24 +43,26 @@ const RootLayout = ({
children: ReactNode; children: ReactNode;
}>): ReactElement => ( }>): ReactElement => (
<html lang="en"> <html lang="en">
<body <body className="scroll-smooth antialiased">
className="scroll-smooth antialiased"
style={{
background: "var(--background-gradient)",
}}
>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem> <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<TooltipProvider delayDuration={100}> <TooltipProvider delayDuration={100}>
<div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col"> <div
<Navbar /> className="min-h-screen flex flex-col"
<div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5"> style={{
<div className="relative hidden xs:flex"> background: "var(--background-gradient)",
<Sidebar /> }}
>
<div className="px-3 sm:px-7 max-w-[90rem] mx-auto flex flex-col transition-all">
<Navbar />
<div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
<div className="relative hidden xs:flex">
<Sidebar />
</div>
{children}
</div> </div>
{children}
</div> </div>
<Footer />
</div> </div>
<Footer />
</TooltipProvider> </TooltipProvider>
</ThemeProvider> </ThemeProvider>
</body> </body>

View File

@ -9,7 +9,7 @@ const Navbar = (): ReactElement => {
const pages: DocsContentMetadata[] = getDocsContent(); const pages: DocsContentMetadata[] = getDocsContent();
return ( return (
<nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50"> <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
<div className="px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center"> <div className="px-3 sm:px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center transition-all transform-gpu">
{/* Branding */} {/* Branding */}
<Link <Link
className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none" className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"

View File

@ -15,7 +15,7 @@ const Sidebar = (): ReactElement => (
<SheetTrigger className="flex items-center"> <SheetTrigger className="flex items-center">
<Bars3BottomRightIcon className="w-6 h-6" /> <Bars3BottomRightIcon className="w-6 h-6" />
</SheetTrigger> </SheetTrigger>
<SheetContent className="h-full px-11 pt-10" side="top"> <SheetContent className="h-full px-5 pt-11" side="right">
<SidebarContent /> <SidebarContent />
</SheetContent> </SheetContent>
</Sheet> </Sheet>