responsive done

coding-club-gct · Jul 15, 2024 · bf3d768 · bf3d768
1 parent d4f9bb8
commit bf3d768
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 15 deletions.
diff --git a/apps/blogs/src/app/[...slug]/page.tsx b/apps/blogs/src/app/[...slug]/page.tsx
@@ -9,14 +9,15 @@ import { plugins, TocItem } from "@ipikuka/plugins";
 import { serialize } from "next-mdx-remote-client/serialize";
 import { notFound } from "next/navigation";
 import { NextResponse } from "next/server";
-import { Divider } from "@mui/material";
+import { Button, Divider, Drawer } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
 import { Blog, Profile } from "@/types/types";
 import CommentBox from "@/components/commentBox";
 import Accordion from "@/components/accordion";
 import { ReactNode } from "react";
 import { UserBox } from "@/components/user-box";
+import MobileHeader from "@/components/mobile";
 
 const components: MDXComponents = {
     pre: Pre,
@@ -60,7 +61,6 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
     if (!repo) return new NextResponse("Internal Server Error", { status: 500 })
 
     const allFiles = await fetchAllFiles(repo, blog.basePath)
-    console.log(allFiles)
     const markdown = await fetchMarkdown(params, repo, blog.basePath)
 
     if (!markdown) return notFound()
@@ -80,17 +80,32 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
 
     const rootLevelHeadings = toc?.filter(item => item.parent === "root") ?? []
 
-    return <div className="flex w-full">
-        <div className="w-[300px] p-4 sticky h-screen top-0 flex flex-col justify-between">
+    const Chapters = () => {
+        return <div className="flex w-[300px] p-4 sticky h-screen top-0 flex-col justify-between">
             <div>
                 <p className="text-xl font-bold py-4">Chapters</p>
                 <Link href={`/${nameSlug}/${folderSlug}`} className="no-underline text-subtext0 hover:bg-surface0 hover:text-text p-2 block">{capitalizeFolderSlug(folderSlug)}</Link>
                 <Navbar node={allFiles} />
             </div>
-            <UserBox />
+            <div className="mt-auto mb-0">
+                <UserBox />
+            </div>
+        </div>
+    }
+
+    const TOCComponent = () => {
+        return <div className="w-[300px] my-4 sticky h-screen top-0">
+            <TOC toc={rootLevelHeadings} />
         </div>
-        <Divider orientation="vertical" className="self-stretch h-auto" />
+    }
+
+    return <div className="flex w-full">
+        <div className="hidden md:block">
+            <Chapters />
+        </div>
+        <Divider orientation="vertical" className="self-stretch h-auto hidden md:block" />
         <div className="flex-grow flex flex-col gap-12 py-8">
+            <MobileHeader Chapter={<Chapters />} TOC={<TOCComponent />} />
             {isFrontMatterData(frontmatter) && <BlogHeader frontmatter={frontmatter} repo={repo} />}
             <Wrapper>
                 <div className="mx-auto prose my-4 px-4 max-w-none">
@@ -111,21 +126,21 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
             <Divider />
             <Wrapper>
                 {blog.issuesUrl && <div className="">
-                    <div className="p-4 max-w-4xl mx-auto">
+                    <div className="p-4 md:mx-auto">
                         <CommentBox issuesUrl={blog.issuesUrl} />
                     </div>
                 </div>}
             </Wrapper>
         </div>
-        <Divider orientation="vertical" className="self-stretch h-auto" />
-        <div className="w-[300px] my-4 sticky h-screen top-0">
-            <TOC toc={rootLevelHeadings} />
+        <Divider orientation="vertical" className="self-stretch h-auto hidden md:block" />
+        <div className="hidden md:block">
+            <TOCComponent />
         </div>
-    </div >
+    </div>
 }
 
 const Wrapper = ({ children }: { children: ReactNode }) => {
-    return <div className="container mx-auto">
+    return <div className="md:container w-full mx-auto">
         <div className="max-w-4xl mx-auto">
             {children}
         </div>
@@ -135,7 +150,7 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
 const TOC = ({ toc }: { toc: TocItem[] }) => {
     return <div className="p-4 flex flex-col gap-8">
         <p className="text-xl font-bold">Table of contents</p>
-        <div>
+        <div className="flex flex-col gap-2">
             {toc.map((item, i) => {
                 return <div key={i} className="">
                     <a href={item.href} className="flex gap-4 no-underline">

diff --git a/apps/blogs/src/app/global.css b/apps/blogs/src/app/global.css
@@ -24,4 +24,12 @@ i {
 
 .prose img {
     @apply !w-full
+}
+
+.prose code {
+    @apply !bg-surface0 p-1 rounded
+}
+
+.custom-pre code {
+    @apply !bg-transparent
 }
diff --git a/apps/blogs/src/app/page.tsx b/apps/blogs/src/app/page.tsx
@@ -12,7 +12,7 @@ export default function Home() {
       </div>
       <div className="w-full p-4 rounded">
         <p className=""> Want to blog ? </p>
-        <p> Head over to our <Link className="text-blue" href="/how-to-blog"> how to blog </Link> </p>
+        <p> Head over to our <Link className="text-blue" href="/_/how-to-blog"> how to blog </Link> </p>
       </div>
     </div>
   )

diff --git a/apps/blogs/src/components/mdx-components/pre.tsx b/apps/blogs/src/components/mdx-components/pre.tsx
@@ -61,7 +61,7 @@ export default function Pre(props: DetailedHTMLProps<HTMLAttributes<HTMLPreEleme
     const additionalStyles = (text.match(/\n/g) || []).length > 1 ? "top-4" : "top-1/2 -translate-y-1/2"
 
     return (
-        <div className="relative w-full">
+        <div className="relative w-full custom-pre">
             <pre className={language ? `language-${language}` : "language-plaintext"} {...rest}>
                 {children}
             </pre>

diff --git a/apps/blogs/src/components/mobile.tsx b/apps/blogs/src/components/mobile.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Button, Drawer } from "@mui/material"
+import { UserBox } from "./user-box"
+import { ReactNode, useState } from "react"
+
+export default function MobileHeader({ Chapter, TOC }: { Chapter: ReactNode, TOC: ReactNode }) {
+    const [chapters, setChapters] = useState(false)
+    const [toc, setToc] = useState(false)
+
+    return <div className="-mb-8 px-4 flex justify-between md:hidden">
+        <Button onClick={() => setChapters(true)} variant="contained">
+            Chapters
+        </Button>
+        <Button variant="contained" onClick={() => setToc(true)}>
+            TOC
+        </Button>
+        <Drawer anchor="left" open={chapters} onClose={() => setChapters(false)}>
+            {Chapter}
+        </Drawer>
+        <Drawer anchor="right" open={toc} onClose={() => setToc(false)}>
+            {TOC}
+        </Drawer>
+    </div>
+}