lookbook: add demo-navbar preview (WIP)

spearwolf · spearwolf · commit 8aff3deb9b89 · 2024-05-11T13:14:46.000+02:00
diff --git a/apps/lookbook/src/components/DemoNavBar.astro b/apps/lookbook/src/components/DemoNavBar.astro
@@ -0,0 +1,29 @@
+---
+import twopoint5d from '../images/twopoint5d-logo.svg?url';
+---
+
+<div class="absolute bottom-0 z-50 -rotate-90 origin-bottom-left transform-gpu container pointer-events-none">
+  <div class="flex justify-center">
+    <header class="demo-navbar flex justify-start items-center px-1.5 lg:pe-5 lg:ps-4 h-10 backdrop-blur-sm pointer-events-auto">
+      <img class="primary" src={twopoint5d} alt="twopoint5d" />
+    </header>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: 100vh;
+    height: 0;
+    right: calc(-100vh + 100vw);
+  }
+
+  .demo-navbar {
+    --bg-col: var(--color-demo-navbar-background, rgba(18 22 25 / 75%));
+    background-color: var(--bg-col);
+  }
+
+  .demo-navbar img.primary {
+    max-height: 32px;
+    margin-left: 0.75rem;
+  }
+</style>
diff --git a/apps/lookbook/src/layouts/ReactDemo.astro b/apps/lookbook/src/layouts/ReactDemo.astro
@@ -1,4 +1,6 @@
 ---
+import DemoNavBar from '~components/DemoNavBar.astro';
+
 export interface Props {
   title: string;
 }
@@ -16,9 +18,11 @@ const {title} = Astro.props;
     <title>2.5d lookbook &#x2022; {title} demo</title>
   </head>
   <body>
+    <DemoNavBar />
     <slot />
   </body>
 </html>
+
 <style is:global>
   html {
     font-family: system-ui, sans-serif;
diff --git a/apps/lookbook/src/layouts/VanillaDemo.astro b/apps/lookbook/src/layouts/VanillaDemo.astro
@@ -1,4 +1,6 @@
 ---
+import DemoNavBar from '~components/DemoNavBar.astro';
+
 export interface Props {
   title: string;
 }
@@ -16,6 +18,7 @@ const {title} = Astro.props;
     <title>2.5d lookbook &#x2022; {title} demo</title>
   </head>
   <body>
+    <DemoNavBar />
     <slot />
   </body>
 </html>
