refactor: update navbar & guides layout

mickasmt · May 29, 2024 · 7cbe294 · 7cbe294
1 parent 4f8bb3b
commit 7cbe294
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 72 deletions.
diff --git a/app/(docs)/guides/[...slug]/page.tsx b/app/(docs)/guides/[...slug]/page.tsx
@@ -1,52 +1,54 @@
-import Link from "next/link"
-import { notFound } from "next/navigation"
-import { allGuides } from "contentlayer/generated"
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { allGuides } from "contentlayer/generated";
 
-import { getTableOfContents } from "@/lib/toc"
-import { Icons } from "@/components/shared/icons"
-import { Mdx } from "@/components/content/mdx-components"
-import { DocsPageHeader } from "@/components/docs/page-header"
-import { DashboardTableOfContents } from "@/components/shared/toc"
+import { getTableOfContents } from "@/lib/toc";
+import { Mdx } from "@/components/content/mdx-components";
+import { DocsPageHeader } from "@/components/docs/page-header";
+import { Icons } from "@/components/shared/icons";
+import { DashboardTableOfContents } from "@/components/shared/toc";
 
-import "@/styles/mdx.css"
-import { Metadata } from "next"
+import "@/styles/mdx.css";
 
-import { env } from "@/env.mjs"
-import { absoluteUrl, cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { Metadata } from "next";
+
+import { env } from "@/env.mjs";
+import { absoluteUrl, cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 interface GuidePageProps {
   params: {
-    slug: string[]
-  }
+    slug: string[];
+  };
 }
 
 async function getGuideFromParams(params) {
-  const slug = params?.slug?.join("/")
-  const guide = allGuides.find((guide) => guide.slugAsParams === slug)
+  const slug = params?.slug?.join("/");
+  const guide = allGuides.find((guide) => guide.slugAsParams === slug);
 
   if (!guide) {
-    null
+    null;
   }
 
-  return guide
+  return guide;
 }
 
 export async function generateMetadata({
   params,
 }: GuidePageProps): Promise<Metadata> {
-  const guide = await getGuideFromParams(params)
+  const guide = await getGuideFromParams(params);
 
   if (!guide) {
-    return {}
+    return {};
   }
 
-  const url = env.NEXT_PUBLIC_APP_URL
+  const url = env.NEXT_PUBLIC_APP_URL;
 
-  const ogUrl = new URL(`${url}/api/og`)
-  ogUrl.searchParams.set("heading", guide.title)
-  ogUrl.searchParams.set("type", "Guide")
-  ogUrl.searchParams.set("mode", "dark")
+  const ogUrl = new URL(`${url}/api/og`);
+  ogUrl.searchParams.set("heading", guide.title);
+  ogUrl.searchParams.set("type", "Guide");
+  ogUrl.searchParams.set("mode", "dark");
 
   return {
     title: guide.title,
@@ -71,47 +73,49 @@ export async function generateMetadata({
       description: guide.description,
       images: [ogUrl.toString()],
     },
-  }
+  };
 }
 
 export async function generateStaticParams(): Promise<
   GuidePageProps["params"][]
 > {
   return allGuides.map((guide) => ({
     slug: guide.slugAsParams.split("/"),
-  }))
+  }));
 }
 
 export default async function GuidePage({ params }: GuidePageProps) {
-  const guide = await getGuideFromParams(params)
+  const guide = await getGuideFromParams(params);
 
   if (!guide) {
-    notFound()
+    notFound();
   }
 
-  const toc = await getTableOfContents(guide.body.raw)
+  const toc = await getTableOfContents(guide.body.raw);
 
   return (
-    <main className="relative py-6 lg:grid lg:grid-cols-[1fr_300px] lg:gap-10 lg:py-10 xl:gap-20">
-      <div>
-        <DocsPageHeader heading={guide.title} text={guide.description} />
-        <Mdx code={guide.body.code} />
-        <hr className="my-4" />
-        <div className="flex justify-center py-6 lg:py-10">
-          <Link
-            href="/guides"
-            className={cn(buttonVariants({ variant: "ghost" }))}
-          >
-            <Icons.chevronLeft className="mr-2 size-4" />
-            See all guides
-          </Link>
+    <MaxWidthWrapper>
+      <div className="relative py-6 lg:grid lg:grid-cols-[1fr_300px] lg:gap-10 lg:py-10 xl:gap-20">
+        <div>
+          <DocsPageHeader heading={guide.title} text={guide.description} />
+          <Mdx code={guide.body.code} />
+          <hr className="my-4" />
+          <div className="flex justify-center py-6 lg:py-10">
+            <Link
+              href="/guides"
+              className={cn(buttonVariants({ variant: "ghost" }))}
+            >
+              <Icons.chevronLeft className="mr-2 size-4" />
+              See all guides
+            </Link>
+          </div>
         </div>
-      </div>
-      <div className="hidden text-sm lg:block">
-        <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
-          <DashboardTableOfContents toc={toc} />
+        <div className="hidden text-sm lg:block">
+          <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
+            <DashboardTableOfContents toc={toc} />
+          </div>
         </div>
       </div>
-    </main>
-  )
+    </MaxWidthWrapper>
+  );
 }
diff --git a/app/(docs)/guides/layout.tsx b/app/(docs)/guides/layout.tsx
diff --git a/app/(docs)/guides/page.tsx b/app/(docs)/guides/page.tsx
@@ -1,31 +1,32 @@
-import Link from "next/link"
-import { allGuides } from "contentlayer/generated"
-import { compareDesc } from "date-fns"
+import Link from "next/link";
+import { allGuides } from "contentlayer/generated";
+import { compareDesc } from "date-fns";
 
-import { formatDate } from "@/lib/utils"
-import { DocsPageHeader } from "@/components/docs/page-header"
+import { formatDate } from "@/lib/utils";
+import { DocsPageHeader } from "@/components/docs/page-header";
+import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 export const metadata = {
   title: "Guides",
   description:
     "This section includes end-to-end guides for developing Next.js 13 apps.",
-}
+};
 
 export default function GuidesPage() {
   const guides = allGuides
     .filter((guide) => guide.published)
     .sort((a, b) => {
-      return compareDesc(new Date(a.date), new Date(b.date))
-    })
+      return compareDesc(new Date(a.date), new Date(b.date));
+    });
 
   return (
-    <div className="py-6 lg:py-10">
+    <MaxWidthWrapper className="py-6 lg:py-10">
       <DocsPageHeader
         heading="Guides"
         text="This section includes end-to-end guides for developing Next.js 13 apps."
       />
       {guides?.length ? (
-        <div className="grid gap-4 md:grid-cols-2 md:gap-6">
+        <div className="mt-5 grid gap-4 md:grid-cols-2 md:gap-6">
           {guides.map((guide) => (
             <article
               key={guide._id}
@@ -60,6 +61,6 @@ export default function GuidesPage() {
       ) : (
         <p>No guides published.</p>
       )}
-    </div>
-  )
+    </MaxWidthWrapper>
+  );
 }
diff --git a/app/(docs)/layout.tsx b/app/(docs)/layout.tsx
@@ -32,7 +32,7 @@ const rightHeader = () => (
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
     <div className="flex min-h-screen flex-col">
-      <NavBar items={docsConfig.mainNav} rightElements={rightHeader()} large={true}>
+      <NavBar items={docsConfig.mainNav} rightElements={rightHeader()}>
         <DocsSidebarNav items={docsConfig.sidebarNav} />
       </NavBar>
       <div className="container flex-1">{children}</div>

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
@@ -28,13 +28,14 @@ export function NavBar({
   children,
   rightElements,
   scroll = false,
-  large = false,
 }: NavBarProps) {
   const scrolled = useScroll(50);
   const signInModal = useSigninModal();
   const { data: session, status } = useSession();
+
   const selectedLayout = usePathname();
   const dashBoard = selectedLayout.startsWith("/dashboard");
+  const documentation = selectedLayout.startsWith("/docs");
 
   return (
     <header
@@ -44,7 +45,7 @@ export function NavBar({
     >
       <MaxWidthWrapper
         className="flex h-[60px] items-center justify-between py-4"
-        large={large}
+        large={!!documentation}
       >
         <MainNav items={items}>{children}</MainNav>