Added contextual navigation palette

src/layouts/ContentLayout.astro

@@ -15,6 +15,7 @@ const { entry, collectionName } = Astro.props;
 const { Content } = await render(entry);
 const { title, summary, subtitle, updateDate, publishDate, tags, seo } =
   entry.data;
+const hasMargin = Astro.slots.has('margin')
 
 const breadcrumbs = await getBreadcrumbs(
   entry.data.parent ?? null,
@@ -48,11 +49,41 @@ const headerCover =
         tags={tags}
         subtitle={subtitle}
       />
-      <div class="content">
-        <slot name="before-content" />
-        <Content />
-        <slot name="after-content" />
+      <div class="frame">
+        <div class="body content">
+          <slot name="before-content" />
+          <Content />
+          <slot name="after-content" />
+        </div>
+        {hasMargin &&(
+          <aside class="margin">
+            <slot name="margin" />
+          </aside>
+        )}
       </div>
     </article>
   </main>
 </Base>
+
+<style>
+  .frame {
+    @mixin layout-wrapper;
+
+    font-size: var(--typo-size-responsive);
+
+    @media (--bp-desktop) {
+      position: relative;
+      display: grid;
+      grid-template-columns: var(--ui-content-width) var(--ui-margin-width);
+    }
+  }
+
+  .body {
+    min-width: 0;
+  }
+
+  .margin {
+    position: relative;
+    min-width: 0;
+  }
+</style>