From 73cfc74b8ab1e75c894910952a33552abdf1adb2 Mon Sep 17 00:00:00 2001
From: Reo Hakuta <st20152ro@gm.ibaraki-ct.ac.jp>
Date: Mon, 1 Apr 2024 17:55:23 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20(`/docs/[.....slug]`)=20App?=
 =?UTF-8?q?ly=20aurora=20effects=20to=20background=20of=20the=20`/docs`=20?=
 =?UTF-8?q?layout=20=20(#126)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/docs/layout.tsx | 122 ++++++++++++++++---------------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/apps/web/src/app/docs/layout.tsx b/apps/web/src/app/docs/layout.tsx
index ef7ad50f..646cece2 100644
--- 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;