better sidebar responsiveness

Took 8 minutes

docs/intro.md

@@ -6,3 +6,68 @@ summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 
 # Get started with Pulse App!
 petentium usu tota noluisse errem elaboraret auctor.
+petentium usu tota noluisse errem elaboraret auctor.
+petentium usu tota noluisse errem elaboraret auctor.
+petentium usu tota noluisse errem elaboraret auctor.
+petentium usu tota noluisse errem elaboraret auctor.
+petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.
+## petentium usu tota noluisse errem elaboraret auctor.

src/app/layout.tsx

@@ -51,8 +51,8 @@ const RootLayout = ({
             <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
                 <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
                     <Navbar />
-                    <div className="w-full h-full flex flex-grow gap-5">
-                        <div className="hidden xs:flex">
+                    <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
+                        <div className="relative hidden xs:flex pr-40 sm:pr-52">
                             <Sidebar />
                         </div>
                         {children}

src/components/navbar/navbar.tsx

@@ -9,12 +9,8 @@ import Sidebar from "@/components/sidebar/sidebar";
 const Navbar = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
     return (
-        <nav
-            className={cn(
-                "py-4 flex justify-between items-center",
-                "after:absolute after:inset-x-0 after:top-[4.2rem] after:h-0.5 after:bg-muted/55"
-            )}
-        >
+        <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b">
+            <div className="px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center">
                 {/* Branding */}
                 <Link
                     className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
@@ -56,6 +52,7 @@ const Navbar = (): ReactElement => {
                         <Sidebar />
                     </div>
                 </div>
+            </div>
         </nav>
     );
 };

src/components/sidebar/sidebar.tsx

@@ -22,7 +22,7 @@ const Sidebar = (): ReactElement => (
         </div>
 
         {/* Desktop */}
-        <div className="hidden min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
+        <div className="hidden fixed top-20 inset-y-0 min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
             <SidebarContent />
         </div>
     </>