feat: enhance mobile navigation with simple dropdown menu

components/code-block.tsx

@@ -1,7 +1,8 @@
 import { codeToHtml } from "shiki";
 import { cacheLife } from "next/cache";
-import CopyButton from "@/components/copy-button";
 import reactToText from "react-to-text";
+import CopyButton from "@/components/copy-button";
+import { cn } from "@/lib/utils";
 
 interface CodeBlockProps extends React.ComponentProps<"pre"> {
   showLineNumbers?: boolean;
@@ -43,7 +44,15 @@ const CodeBlock = async ({ children, className, showLineNumbers = true, ...props
         data-slot="code-block"
         data-lang={lang}
         data-line-numbers={showLineNumbers || undefined}
-        className={className}
+        className={cn(
+          "bg-code text-code-foreground overflow-x-auto overflow-y-hidden rounded-xl text-[13px] leading-normal outline-none",
+          "[&_span]:!bg-transparent [&_span[style*='color']]:dark:!text-(--shiki-dark)",
+          "[&_pre]:m-0 [&_pre]:rounded-xl [&_pre]:!bg-transparent",
+          "[&_code]:white-space-pre [&_code]:grid [&_code]:min-w-full [&_code]:px-4 [&_code]:py-3.5 [&_code]:[counter-reset:line]",
+          "[&_.line]:min-h-1lh [&_.line]:inline-block [&_.line]:w-full [&_.line]:py-0.5",
+          "data-[line-numbers]:[&_.line]:before:text-code-number data-[line-numbers]:[&_.line]:before:mr-6 data-[line-numbers]:[&_.line]:before:inline-block data-[line-numbers]:[&_.line]:before:w-5 data-[line-numbers]:[&_.line]:before:text-right data-[line-numbers]:[&_.line]:before:content-[counter(line)] data-[line-numbers]:[&_.line]:before:[counter-increment:line]",
+          className
+        )}
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </div>

components/layout/menu.tsx

@@ -1,8 +1,15 @@
 "use client";
 
 import { useSelectedLayoutSegment } from "next/navigation";
+import { ChevronDownIcon } from "lucide-react";
 import Button from "@/components/ui/button";
 import Link from "@/components/link";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
 
 const menuItems = [
   {
@@ -22,20 +29,73 @@ const menuItems = [
 const Menu = () => {
   const segment = useSelectedLayoutSegment() || "";
 
-  return (
-    <div className="flex items-center gap-2">
-      {menuItems.map((item, index) => {
-        const isCurrent = item.href?.split("/")[1] === segment;
+  const currentItem = menuItems.find((item) => item.href?.split("/")[1] === segment);
+  const currentLabel = segment === "" ? "Home" : currentItem?.text || "Menu";
 
-        return (
-          <Button key={index} variant="ghost" size="sm" asChild>
-            <Link href={item.href} prefetch={false} aria-label={item.text} data-current={isCurrent}>
-              {item.text}
-            </Link>
+  return (
+    <nav data-slot="navigation-menu">
+      {/* Desktop: Show all buttons */}
+      <div className="hidden items-center gap-1.5 sm:flex">
+        {menuItems.map((item, index) => {
+          const isCurrent = item.href?.split("/")[1] === segment;
+
+          return (
+            <Button
+              asChild
+              key={index}
+              variant="ghost"
+              size="sm"
+              aria-label={item.text}
+              data-current={isCurrent || undefined}
+              className="data-current:bg-accent/60 data-current:text-accent-foreground"
+            >
+              <Link href={item.href} prefetch={false}>
+                {item.text}
+              </Link>
+            </Button>
+          );
+        })}
+      </div>
+
+      {/* Mobile: Show dropdown menu */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="flex sm:hidden">
+            {currentLabel}
+            <ChevronDownIcon className="size-3.5 opacity-60 transition-transform duration-200 data-[state=open]:rotate-180" />
           </Button>
-        );
-      })}
-    </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="min-w-[140px]">
+          <DropdownMenuItem asChild>
+            <Link
+              href="/"
+              prefetch={false}
+              data-current={segment === ""}
+              aria-current={segment === "" ? "page" : undefined}
+            >
+              Home
+            </Link>
+          </DropdownMenuItem>
+          {menuItems.map((item, index) => {
+            const isCurrent = item.href?.split("/")[1] === segment;
+
+            return (
+              <DropdownMenuItem
+                asChild
+                key={index}
+                className="data-current:bg-accent/40 data-current:text-accent-foreground data-current:font-medium"
+                data-current={isCurrent || undefined}
+                aria-current={isCurrent ? "page" : undefined}
+              >
+                <Link href={item.href} prefetch={false}>
+                  {item.text}
+                </Link>
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </nav>
   );
 };
 

components/layout/page-title.tsx

@@ -16,7 +16,7 @@ const PageTitle = ({
     >
       <Link
         href={canonical}
-        className="before:text-muted-foreground before:-mr-0.5 before:tracking-widest before:content-['\002E\002F'] hover:no-underline"
+        className="before:text-muted-foreground no-underline before:-mr-1 before:tracking-wider before:content-['\002E\002F']"
       >
         {children}
       </Link>

components/ui/dropdown-menu.tsx

@@ -55,7 +55,7 @@ const DropdownMenuItem = ({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...rest}