fix: toc layout in mobile

nxsky · Jun 17, 2023 · 5bca3e8 · 5bca3e8
1 parent bf9c81d
commit 5bca3e8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/app/(main)/blog/BlogPostPage.tsx b/app/(main)/blog/BlogPostPage.tsx
@@ -40,13 +40,13 @@ export function BlogPostPage({
 }) {
  return (
  <Container className="mt-16 lg:mt-32">
- <div className="flex w-full justify-between xl:relative">
+ <div className="w-full md:flex md:justify-between xl:relative">
  <aside className="hidden w-[160px] shrink-0 lg:block">
  <div className="sticky top-2 pt-20">
- <BlogPostTableOfContents body={post.body} />
+ <BlogPostTableOfContents headings={post.headings} />
  </div>
  </aside>
- <div className="max-w-2xl flex-1 shrink-0">
+ <div className="max-w-2xl md:flex-1 md:shrink-0">
  <Button
  href="/blog"
  variant="secondary"

diff --git a/app/(main)/blog/BlogPostTableOfContents.tsx b/app/(main)/blog/BlogPostTableOfContents.tsx
@@ -13,8 +13,8 @@ interface Node {
  children?: HeadingNode[]
 }
 
-const parseOutline = (body: Node[]) => {
- return body
+const parseOutline = (nodes: Node[]) => {
+ return nodes
  .filter((node) => node._type === 'block' && node.style.startsWith('h'))
  .map((node) => {
  return {
@@ -26,8 +26,8 @@ const parseOutline = (body: Node[]) => {
  })
 }
 
-export function BlogPostTableOfContents({ body }: { body: Node[] }) {
- const outline = parseOutline(body)
+export function BlogPostTableOfContents({ headings }: { headings: Node[] }) {
+ const outline = parseOutline(headings)
 
  return (
  <ul className="group pointer-events-auto flex flex-col space-y-2 text-zinc-500">