feat: ✨ (/docs/[.....slug]) Apply aurora effects to background of t…

…he `/docs` layout (#126)
ReoHakase · Apr 1, 2024 · 73cfc74 · 73cfc74
1 parent f0915bc
commit 73cfc74
Showing 1 changed file with 63 additions and 59 deletions.
diff --git a/apps/web/src/app/docs/layout.tsx b/apps/web/src/app/docs/layout.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { Aurora } from '@/features/landingPage/components/Aurora/Aurora';
 import { Navbar, NavbarButtonContainer } from '@/features/navigation/components/Navbar/Navbar';
 import { Sidebar } from '@/features/navigation/components/Sidebar/Sidebar';
 import { css } from 'styled-system/css';
@@ -11,74 +12,77 @@ type DocsLayoutProps = {
 };
 
 const DocsLayout = ({ titleIndicator, pageSpecificNavigations, children }: DocsLayoutProps): ReactNode => (
-  <div
-    className={css({
-      pos: 'relative',
-      w: 'full',
-      display: 'grid',
-      gridTemplateColumns: '1fr auto 1fr',
-      alignItems: 'start',
-      lgDown: {
-        gridTemplateColumns: '0 100% 0',
-        gap: '0',
-      },
-      lgToXl: {
-        gridTemplateColumns: '1fr auto 0',
-        gap: '4',
-      },
-      xl: {
-        gridTemplateColumns: '1fr auto 1fr',
-        gap: '4',
-      },
-    })}
-  >
-    <Navbar
-      className={css({
-        zIndex: '1',
-      })}
-    >
-      {titleIndicator}
-      <NavbarButtonContainer>{pageSpecificNavigations}</NavbarButtonContainer>
-    </Navbar>
-    <Sidebar
+  <>
+    <Aurora />
+    <div
       className={css({
+        pos: 'relative',
         w: 'full',
-        maxW: '80',
+        display: 'grid',
+        gridTemplateColumns: '1fr auto 1fr',
+        alignItems: 'start',
         lgDown: {
-          display: 'none',
+          gridTemplateColumns: '0 100% 0',
+          gap: '0',
         },
-      })}
-    />
-    <div
-      className={css({
-        gridColumn: '2 / 3',
-        w: {
-          base: 'full',
-          lg: '800px',
+        lgToXl: {
+          gridTemplateColumns: '1fr auto 0',
+          gap: '4',
         },
-        display: 'flex',
-        flexDir: 'column',
-        justifyContent: 'start',
-        alignItems: 'center',
-      })}
-    >
-      {children}
-    </div>
-    <div
-      className={css({
-        display: 'flex',
-        flexDir: 'column',
-        justifyContent: 'start',
-        alignItems: 'start',
-        xlDown: {
-          display: 'none',
-          srOnly: true,
+        xl: {
+          gridTemplateColumns: '1fr auto 1fr',
+          gap: '4',
         },
       })}
     >
-      {/* Table of Content here */}
+      <Navbar
+        className={css({
+          zIndex: '1',
+        })}
+      >
+        {titleIndicator}
+        <NavbarButtonContainer>{pageSpecificNavigations}</NavbarButtonContainer>
+      </Navbar>
+      <Sidebar
+        className={css({
+          w: 'full',
+          maxW: '80',
+          lgDown: {
+            display: 'none',
+          },
+        })}
+      />
+      <div
+        className={css({
+          gridColumn: '2 / 3',
+          w: {
+            base: 'full',
+            lg: '800px',
+          },
+          display: 'flex',
+          flexDir: 'column',
+          justifyContent: 'start',
+          alignItems: 'center',
+        })}
+      >
+        {children}
+      </div>
+      <div
+        className={css({
+          display: 'flex',
+          flexDir: 'column',
+          justifyContent: 'start',
+          alignItems: 'start',
+          xlDown: {
+            display: 'none',
+            srOnly: true,
+          },
+        })}
+      >
+        {/* Table of Content here */}
+      </div>
     </div>
-  </div>
+  </>
 );
 
 export default DocsLayout;