switch to layout

apps/bible/app/bible/components/bible-child.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { BibleContentChild } from "@/site/bible-contents";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { FC } from "react";
+
+export const BibleChild: FC<BibleContentChild> = (child) => {
+  const segment = usePathname();
+  const isActive = segment?.includes(child.href);
+  return (
+    <Link
+      href={child.href}
+      className={cn("text-muted-foreground", isActive && "text-primary")}
+    >
+      {child.title}
+    </Link>
+  );
+};

apps/bible/app/bible/components/bible-side.tsx

@@ -0,0 +1,34 @@
+import { Stack } from "@/components/primitives/stack";
+import { Text } from "@/components/typography/text";
+import { BibleContent, bibleContents } from "@/site/bible-contents";
+import { FC } from "react";
+import { BibleChild } from "./bible-child";
+
+export const BibleSide = () => {
+  return (
+    <Stack gap="2xl" className="p-4">
+      {bibleContents.map((bibleContent) => (
+        <BibleContent key={bibleContent.title} {...bibleContent} />
+      ))}
+    </Stack>
+  );
+};
+
+const BibleContent: FC<BibleContent> = (content) => {
+  const bibleChilds = (
+    <Stack gap="xs" className="pl-xs border-l-2">
+      {content.children.map((bibleChild) => (
+        <BibleChild key={bibleChild.title} {...bibleChild} />
+      ))}
+    </Stack>
+  );
+
+  const title = <Text>{content.title}</Text>;
+
+  return (
+    <Stack gap="xs">
+      {title}
+      {bibleChilds}
+    </Stack>
+  );
+};

apps/bible/app/layout.tsx

@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { cn } from "@/lib/utils";
+import { Sidebar } from "@/components/primitives/sidebar";
+import { BibleSide } from "./bible/components/bible-side";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -25,7 +27,10 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <Sidebar>
+            <BibleSide />
+            {children}
+          </Sidebar>
         </ThemeProvider>
       </body>
     </html>

apps/bible/app/page.tsx

@@ -1,63 +1,3 @@
-import { Stack } from "@/components/primitives/stack";
-import { Text } from "@/components/typography/text";
-import {
-  BibleContent,
-  BibleContentChild,
-  bibleContents,
-} from "@/site/bible-contents";
-import Link from "next/link";
-import { FC } from "react";
-
 export default function Home() {
-  return (
-    <Stack gap="2xl" className="p-4">
-      {bibleContents.map((bibleContent) => (
-        <BibleContent key={bibleContent.title} {...bibleContent} />
-      ))}
-    </Stack>
-  );
+  return <div>home</div>;
 }
-
-const BibleContent: FC<BibleContent> = (content) => {
-  const bibleChilds = (
-    <Stack gap="xs" className="pl-xs border-l-2">
-      {content.children.map((bibleChild) => (
-        <BibleChild key={bibleChild.title} {...bibleChild} />
-      ))}
-    </Stack>
-  );
-
-  const title = <Text tone="muted">{content.title}</Text>;
-
-  return (
-    <Stack gap="xs">
-      {title}
-      {bibleChilds}
-    </Stack>
-  );
-};
-
-const BibleChild: FC<BibleContentChild> = (child) => {
-  const title = child.href ? (
-    <Link href={child.href}> {child.title}</Link>
-  ) : (
-    <Text>{child.title}</Text>
-  );
-
-  const notes = child.notes && (
-    <Stack className="border-l-2 py-xxs" gap="xs">
-      {child.notes.map((note) => (
-        <Text key={note} tone="muted" className="pl-xs">
-          {note}
-        </Text>
-      ))}
-    </Stack>
-  );
-
-  return (
-    <Stack gap="xxs">
-      {title}
-      {notes}
-    </Stack>
-  );
-};

apps/bible/site/bible-contents.ts

@@ -7,9 +7,7 @@ export type BibleContent = {
 };
 
 export type BibleContentChild = Omit<BibleContent, "children"> & {
-  href: Route | null;
-  status: "done" | "todo" | "re-opened";
-  notes?: string[];
+  href: Route;
 };
 
 export const bibleContents: BibleContent[] = [
@@ -19,7 +17,6 @@ export const bibleContents: BibleContent[] = [
       {
         title: "Parrallel and Sequential data fetching",
         href: routes.bible.dataFetching.parrallelAndSequential.index,
-        status: "todo",
       },
     ],
   },