#13 feat: aside

src/app/blog/[id]/Aside.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+
+export default function BlogContentAside() {
+  return (
+    <AppShell.Aside>
+      <h1>BlogContentAside</h1>
+    </AppShell.Aside>
+  );
+}

src/app/blog/[id]/TableOfContents.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { TableOfContents } from "@mantine/core";
+
+export const TableOfContent = ({ children }: { children: React.ReactNode }) => {
+  return <TableOfContents>{children}</TableOfContents>;
+};

src/app/blog/[id]/layout.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import BlogContentAside from "./Aside";
+
+export default function BlogContentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AppShell
+      aside={{
+        width: 300,
+        breakpoint: "md",
+        collapsed: { desktop: false, mobile: true },
+      }}
+    >
+      <BlogContentAside />
+      {children}
+    </AppShell>
+  );
+}