structure the layout to support a global footer

Took 25 minutes

docs/intro.md

@@ -6,3 +6,47 @@ 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.
+# 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.

src/app/[[...slug]]/page.tsx

@@ -76,7 +76,7 @@ const DocsPage = async ({
             </Breadcrumb>
 
             {/* Content */}
-            <div className="flex gap-2.5 justify-between">
+            <div className="flex gap-5 justify-between">
                 <div className="flex flex-col">
                     <CustomMDX source={page.content} />
                 </div>

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { ReactElement, ReactNode } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
 import Navbar from "@/components/navbar/navbar";
 import Sidebar from "@/components/sidebar/sidebar";
+import Footer from "@/components/footer";
 
 /**
  * The metadata for this app.
@@ -51,12 +52,13 @@ const RootLayout = ({
                 <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
                     <Navbar />
                     <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">
+                        <div className="relative hidden xs:flex">
                             <Sidebar />
                         </div>
                         {children}
                     </div>
                 </div>
+                <Footer />
             </ThemeProvider>
         </body>
     </html>

src/components/docs-footer.tsx

@@ -23,7 +23,7 @@ const DocsFooter = ({
 
     return (
         <footer className="xs:mx-5 sm:mx-10 my-2 flex flex-col select-none transition-all transform-gpu">
-            <Separator className="mb-4" />
+            <Separator className="my-4" />
             <div className="flex justify-between">
                 {/* Previous */}
                 {previous && (

src/components/footer.tsx

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+
+const Footer = (): ReactElement => (
+    <footer className="h-44 flex justify-center items-center">FOOTER</footer>
+);
+export default Footer;

src/components/navbar/navbar.tsx

@@ -8,7 +8,7 @@ import Sidebar from "@/components/sidebar/sidebar";
 const Navbar = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
     return (
-        <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b">
+        <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">
                 {/* Branding */}
                 <Link

src/components/sidebar/sidebar.tsx

@@ -22,7 +22,7 @@ const Sidebar = (): ReactElement => (
         </div>
 
         {/* Desktop */}
-        <div className="hidden fixed top-[4.3rem] inset-y-0 min-w-32 w-40 sm:w-52 py-5 xs:flex flex-col justify-between transition-all transform-gpu">
+        <div className="hidden xs:flex sticky top-[4.3rem] max-h-[calc(100vh-3.5rem)] overflow-y-auto min-w-32 w-40 sm:w-52 py-5 flex-col justify-between transition-all transform-gpu">
             <SidebarContent />
         </div>
     </>