From f73c2a61e67a9f56a9885379532d74cdd6598e6a Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 6 Oct 2024 18:08:12 -0400
Subject: [PATCH] better navbar responsiveness

Took 9 minutes
---
 docs/intro.md                    | 67 +++++++++++++++++++++++++-
 src/app/layout.tsx               |  2 +-
 src/components/navbar/navbar.tsx | 83 +++++++++++++++-----------------
 3 files changed, 107 insertions(+), 45 deletions(-)

diff --git a/docs/intro.md b/docs/intro.md
index 1a74f8f..7f4a3dd 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -5,4 +5,69 @@ summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 ---
 
 # Get started with Pulse App!
-petentium usu tota noluisse errem elaboraret auctor.
\ No newline at end of file
+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.
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ca8204c..04c3005 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -51,7 +51,7 @@ 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="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
                         <div className="hidden xs:flex">
                             <Sidebar />
                         </div>
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 5b94cd8..33d5455 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -9,51 +9,48 @@ 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"
-            )}
-        >
-            {/* Branding */}
-            <Link
-                className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
-                href="/public"
-                draggable={false}
-            >
-                <h1 className="text-lg font-semibold">docs.</h1>
-                <Image
-                    src="/media/logo.png"
-                    alt="Pulse App Logo"
-                    width={36}
-                    height={36}
-                />
-            </Link>
-
-            {/* Right */}
-            <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
-                {/* Search */}
-                <div className="hidden xs:flex">
-                    <QuickSearchDialog pages={pages} />
-                </div>
-
-                {/* Social */}
-                <div className="flex gap-5 items-center">
-                    <SocialLink
-                        name="GitHub"
-                        link="https://github.com/PulseAppCC"
-                        icon="/media/github.svg"
+        <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"
+                    href="/public"
+                    draggable={false}
+                >
+                    <h1 className="text-lg font-semibold">docs.</h1>
+                    <Image
+                        src="/media/logo.png"
+                        alt="Pulse App Logo"
+                        width={36}
+                        height={36}
                     />
-                    <SocialLink
-                        name="Discord"
-                        link="https://discord.pulseapp.cc"
-                        icon="/media/discord.svg"
-                    />
-                </div>
+                </Link>
 
-                {/* Mobile Sidebar */}
-                <div className="flex xs:hidden">
-                    <Sidebar />
+                {/* Right */}
+                <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
+                    {/* Search */}
+                    <div className="hidden xs:flex">
+                        <QuickSearchDialog pages={pages} />
+                    </div>
+
+                    {/* Social */}
+                    <div className="flex gap-5 items-center">
+                        <SocialLink
+                            name="GitHub"
+                            link="https://github.com/PulseAppCC"
+                            icon="/media/github.svg"
+                        />
+                        <SocialLink
+                            name="Discord"
+                            link="https://discord.pulseapp.cc"
+                            icon="/media/discord.svg"
+                        />
+                    </div>
+
+                    {/* Mobile Sidebar */}
+                    <div className="flex xs:hidden">
+                        <Sidebar />
+                    </div>
                 </div>
             </div>
         </nav>