Add multi-file playground imports

site/decodal-site/src/layouts/ManualLayout.astro

@@ -2,7 +2,7 @@
 import { nav } from '../lib/docs.js';
 import '../style.css';
 
-const { title = 'Decodal', active = '' } = Astro.props;
+const { title = 'Decodal', active = '', playground = false } = Astro.props;
 
 function renderNav(items) {
   return `<ul class="nav-tree">${items
@@ -30,12 +30,14 @@ function renderNav(items) {
         <a href="/playground/">Playground</a>
       </nav>
     </header>
-    <div class="layout">
-      <aside class="sidebar">
-        <a class="sidebar-title" href="/docs/">Manual</a>
-        <nav set:html={renderNav(nav)} />
-      </aside>
-      <main class={Astro.props.playground ? 'playground' : ''}>
+    <div class={playground ? 'layout playground-layout' : 'layout'}>
+      {!playground && (
+        <aside class="sidebar">
+          <a class="sidebar-title" href="/docs/">Manual</a>
+          <nav set:html={renderNav(nav)} />
+        </aside>
+      )}
+      <main class={playground ? 'playground' : ''}>
         <slot />
       </main>
     </div>