WIP 1

src/components/CanvasSection.tsx

@@ -7,7 +7,7 @@ export const CanvasSection = () => {
   return (
     <section id='canvas-section' className='m-4 absolute inset-0 flex justify-center items-center'>
       <div className='relative w-full h-full max-w-[500px] max-h-[500px] flex justify-center items-center'>
-        {!wasm ? null : <Canvas wasm={wasm}/>}
+        {/* {!wasm ? null : <Canvas wasm={wasm}/>} */}
       </div>
     </section>
   )

src/components/Header.tsx

@@ -1,7 +1,13 @@
-export const Header = () => {
+interface HeaderProps {
+  className?: string
+}
+
+export const Header: React.FC<HeaderProps> = ({
+  className = ''
+}) => {
   return (
-    <header className='p-4 box-border'>
-      <h1 className='text-center md:text-left text-lg'>DISPLACEMENT</h1>
+    <header className={`bg-black/75 drop-shadow-2xl px-4 flex items-center justify-center md:justify-start ${className}`}>
+      <h1 className='md:text-left text-lg'>DISPLACEMENT</h1>
     </header>
   )
 }

src/components/Layout.tsx

@@ -9,11 +9,11 @@ export const Layout: React.FC<LayoutProps> = ({
   children,
 }) => {
   return (
-    <div className='fixed inset-0 overflow-hidden flex flex-col'>
+    <>
       <Header/>
-      <main className='flex-1 relative'>
+      <main>
         {children}
       </main>
-    </div>
+    </>
   )
 }

src/pages/index.tsx

@@ -1,19 +1,34 @@
 import type { NextPage } from 'next'
 import { BottomBarSection } from '../components/BottomBarSection';
 import { CanvasSection } from '../components/CanvasSection'
+import { Header } from '../components/Header';
 import { Layout } from '../components/Layout';
 import { SectionsContainer } from '../components/SectionsContainer';
 import { SettingsSection } from '../components/SettingsSection';
 
 const Home: NextPage = () => {
   return (
-    <Layout>
-      <SectionsContainer
-        primary={<CanvasSection/>}
-        secondary={<SettingsSection/>}
-        bottomBar={<BottomBarSection/>}
-      />
-    </Layout>
+    <>
+      <header className='fixed top-0 inset-x-0 h-16 z-10 bg-black/75 drop-shadow-2xl px-4 flex items-center justify-center md:justify-start'>
+        <h1 className='text-2xl font-bold md:text-left'>DISPLACEMENT</h1>
+      </header>
+      <div className='md:flex'>
+        <section className='mt-16 h-[calc(100vh-theme(spacing.16))] relative md:flex-1'>
+          <div className='absolute inset-4 overflow-y-auto'>
+            <div className='absolute inset-0 flex justify-center items-center bg-red-900'>  
+              <div className='w-full h-full max-w-[500px] max-h-[500px] bg-red-500'>
+
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className='mt-16 h-[calc(100vh-theme(spacing.16))] relative md:flex-1'>
+          <div className='absolute inset-4 overflow-y-auto bg-sky-700'>
+
+          </div>
+        </section>
+      </div>
+    </>
   )
 }