From 0203b27892ae696edb3926b2ba7f70948392ad56 Mon Sep 17 00:00:00 2001
From: snehasishcodes <snehasishcodes@gmail.com>
Date: Mon, 21 Sep 2026 03:05:04 +0530
Subject: [PATCH] fix(web): make docs responsive with mobile drawer and site
 nav

---
 apps/web/mdx-components.tsx                 |  20 ++--
 apps/web/src/app/docs/layout.tsx            |  46 +++++++--
 apps/web/src/components/docs/mobile-nav.tsx | 109 ++++++++++++++++++++
 apps/web/src/components/docs/sidebar.tsx    |  65 +++++++-----
 4 files changed, 195 insertions(+), 45 deletions(-)
 create mode 100644 apps/web/src/components/docs/mobile-nav.tsx

diff --git a/apps/web/mdx-components.tsx b/apps/web/mdx-components.tsx
index 60948ed..2096adb 100644
--- a/apps/web/mdx-components.tsx
+++ b/apps/web/mdx-components.tsx
@@ -4,32 +4,32 @@ import Link from "next/link";
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     h1: ({ children, ...props }) => (
-      <h1 className="mb-4 text-4xl font-bold tracking-tight text-foreground" {...props}>
+      <h1 className="mb-4 break-words text-3xl font-bold tracking-tight text-foreground sm:text-4xl" {...props}>
         {children}
       </h1>
     ),
     h2: ({ children, ...props }) => (
-      <h2 className="mt-8 mb-4 text-2xl font-semibold tracking-tight text-foreground" {...props}>
+      <h2 className="mt-8 mb-4 break-words text-xl font-semibold tracking-tight text-foreground sm:text-2xl" {...props}>
         {children}
       </h2>
     ),
     h3: ({ children, ...props }) => (
-      <h3 className="mt-6 mb-3 text-xl font-semibold text-foreground" {...props}>
+      <h3 className="mt-6 mb-3 break-words text-lg font-semibold text-foreground sm:text-xl" {...props}>
         {children}
       </h3>
     ),
     p: ({ children, ...props }) => (
-      <p className="mb-4 text-muted-foreground leading-7" {...props}>
+      <p className="mb-4 break-words text-muted-foreground leading-7" {...props}>
         {children}
       </p>
     ),
     ul: ({ children, ...props }) => (
-      <ul className="mb-4 ml-6 list-disc space-y-2 text-muted-foreground" {...props}>
+      <ul className="mb-4 ml-5 list-disc space-y-2 break-words text-muted-foreground sm:ml-6" {...props}>
         {children}
       </ul>
     ),
     ol: ({ children, ...props }) => (
-      <ol className="mb-4 ml-6 list-decimal space-y-2 text-muted-foreground" {...props}>
+      <ol className="mb-4 ml-5 list-decimal space-y-2 break-words text-muted-foreground sm:ml-6" {...props}>
         {children}
       </ol>
     ),
@@ -39,12 +39,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       </li>
     ),
     code: ({ children, ...props }) => (
-      <code className="rounded bg-muted px-1.5 py-0.5 text-sm font-mono text-foreground" {...props}>
+      <code className="break-words rounded bg-muted px-1.5 py-0.5 text-sm font-mono text-foreground" {...props}>
         {children}
       </code>
     ),
     pre: ({ children, ...props }) => (
-      <pre className="mb-4 overflow-x-auto rounded-lg border bg-muted p-4" {...props}>
+      <pre className="mb-4 max-w-full overflow-x-auto rounded-lg border bg-muted p-4 text-sm" {...props}>
         {children}
       </pre>
     ),
@@ -69,8 +69,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       );
     },
     table: ({ children, ...props }) => (
-      <div className="mb-4 overflow-x-auto">
-        <table className="w-full border-collapse border text-sm" {...props}>
+      <div className="mb-4 max-w-full overflow-x-auto">
+        <table className="w-full min-w-[480px] border-collapse border text-sm" {...props}>
           {children}
         </table>
       </div>
diff --git a/apps/web/src/app/docs/layout.tsx b/apps/web/src/app/docs/layout.tsx
index f5ff5e9..dec3d46 100644
--- a/apps/web/src/app/docs/layout.tsx
+++ b/apps/web/src/app/docs/layout.tsx
@@ -1,24 +1,56 @@
 import { DocsSidebar } from "@/components/docs/sidebar";
+import { DocsMobileNav } from "@/components/docs/mobile-nav";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { BrandLogo } from "@/components/brand-logo";
 import Link from "next/link";
 
+const siteNavItems = [
+  { title: "Home", href: "/" },
+  { title: "Download", href: "/download" },
+  { title: "Pricing", href: "/pricing" },
+  { title: "Docs", href: "/docs" },
+  { title: "Blog", href: "/blog" },
+  { title: "Support", href: "/support" },
+];
+
 export default function DocsLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen bg-background">
       <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-md">
-        <div className="container flex h-16 items-center justify-between">
-          <Link href="/" className="flex items-center">
-            <BrandLogo />
-          </Link>
-          <div className="flex items-center gap-2">
+        <div className="container flex h-16 items-center justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-1">
+            <DocsMobileNav />
+            <Link href="/" className="flex items-center" aria-label="CrossCode home">
+              <BrandLogo />
+            </Link>
+          </div>
+          <nav className="hidden items-center gap-6 lg:flex">
+            {siteNavItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                {item.title}
+              </Link>
+            ))}
+            <a
+              href="https://github.com/snhsish/crosscode"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              GitHub
+            </a>
+          </nav>
+          <div className="flex shrink-0 items-center gap-2">
             <ThemeToggle />
           </div>
         </div>
       </header>
-      <div className="container flex">
+      <div className="container flex items-start">
         <DocsSidebar />
-        <main className="flex-1 overflow-hidden py-8 px-8 prose prose-invert max-w-none">
+        <main className="min-w-0 flex-1 overflow-x-hidden break-words px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
           {children}
         </main>
       </div>
diff --git a/apps/web/src/components/docs/mobile-nav.tsx b/apps/web/src/components/docs/mobile-nav.tsx
new file mode 100644
index 0000000..da9cc66
--- /dev/null
+++ b/apps/web/src/components/docs/mobile-nav.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
+import { DocsSidebarContent } from "@/components/docs/sidebar";
+import { cn } from "@/lib/utils";
+
+const siteNavItems = [
+  { title: "Home", href: "/" },
+  { title: "Download", href: "/download" },
+  { title: "Pricing", href: "/pricing" },
+  { title: "Docs", href: "/docs" },
+  { title: "Blog", href: "/blog" },
+  { title: "Support", href: "/support" },
+];
+
+export function DocsMobileNav() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const close = () => setOpen(false);
+
+  useEffect(() => {
+    if (!open) return;
+    document.body.style.overflow = "hidden";
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open ]);
+
+  return (
+    <div className="lg:hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label="Open navigation menu"
+        className="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent"
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+
+      {open &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div className="fixed inset-0 z-[100]">
+            <div
+              className="absolute inset-0 bg-black/60"
+              onClick={close}
+              aria-hidden="true"
+            />
+          <div className="absolute inset-y-0 left-0 flex w-[85vw] max-w-xs flex-col overflow-y-auto border-r bg-background p-6 shadow-xl">
+            <div className="mb-6 flex items-center justify-between">
+              <span className="text-sm font-semibold text-foreground">Menu</span>
+              <button
+                type="button"
+                onClick={close}
+                aria-label="Close navigation menu"
+                className="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <DocsSidebarContent onNavigate={close} />
+
+            <div className="mt-8 border-t pt-6">
+              <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                Site
+              </p>
+              <nav className="space-y-1">
+                {siteNavItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={close}
+                    className={cn(
+                      "block rounded-md px-3 py-2 text-sm transition-colors",
+                      pathname === item.href
+                        ? "bg-accent font-medium text-accent-foreground"
+                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                    )}
+                  >
+                    {item.title}
+                  </Link>
+                ))}
+                <a
+                  href="https://github.com/snhsish/crosscode"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+                >
+                  GitHub
+                </a>
+              </nav>
+            </div>
+          </div>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/docs/sidebar.tsx b/apps/web/src/components/docs/sidebar.tsx
index f530793..2ab83c1 100644
--- a/apps/web/src/components/docs/sidebar.tsx
+++ b/apps/web/src/components/docs/sidebar.tsx
@@ -27,37 +27,46 @@ const navItems = [
   },
 ];
 
-export function DocsSidebar() {
+export const docsNavItems = navItems;
+
+export function DocsSidebarContent({ onNavigate }: { onNavigate?: () => void }) {
   const pathname = usePathname();
 
   return (
-    <aside className="sticky top-16 h-[calc(100vh-4rem)] w-64 shrink-0 overflow-y-auto border-r py-6 pr-4 pl-4">
-      <nav className="space-y-6">
-        {navItems.map((section) => (
-          <div key={section.title}>
-            <h3 className="mb-2 text-sm font-semibold text-foreground">
-              {section.title}
-            </h3>
-            <ul className="space-y-1">
-              {section.items.map((item) => (
-                <li key={item.href}>
-                  <Link
-                    href={item.href}
-                    className={cn(
-                      "block rounded-md px-3 py-1.5 text-sm transition-colors",
-                      pathname === item.href
-                        ? "bg-accent text-accent-foreground font-medium"
-                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
-                    )}
-                  >
-                    {item.title}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </nav>
+    <nav className="space-y-6">
+      {navItems.map((section) => (
+        <div key={section.title}>
+          <h3 className="mb-2 text-sm font-semibold text-foreground">
+            {section.title}
+          </h3>
+          <ul className="space-y-1">
+            {section.items.map((item) => (
+              <li key={item.href}>
+                <Link
+                  href={item.href}
+                  onClick={onNavigate}
+                  className={cn(
+                    "block rounded-md px-3 py-1.5 text-sm transition-colors",
+                    pathname === item.href
+                      ? "bg-accent text-accent-foreground font-medium"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                  )}
+                >
+                  {item.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+export function DocsSidebar() {
+  return (
+    <aside className="sticky top-16 hidden h-[calc(100vh-4rem)] w-64 shrink-0 overflow-y-auto border-r py-6 pr-4 pl-4 lg:block">
+      <DocsSidebarContent />
     </aside>
   );
 }