Sticky page title on desktop + theme dropdown fixes

components/layout/page-title.tsx

@@ -1,11 +1,10 @@
-"use client"
-
 import { cn } from "@/lib/utils"
 
 interface PageTitleProps {
   children: string
   as?: "h1" | "h2" | "h3"
   variant?: "home" | "page" | "blog"
+  className?: string
 }
 
 const variantStyles = {
@@ -14,21 +13,6 @@ const variantStyles = {
   blog: "font-serif font-light text-4xl md:text-5xl text-foreground mb-2",
 }
 
-export function PageTitle({ children, as: Tag = "h1", variant = "home" }: PageTitleProps) {
-  const styles = variantStyles[variant]
-
-  return (
-    <>
-      {/* Mobile: sticky title that stays in header area */}
-      <div className="md:hidden sticky top-0 z-50 bg-background -mx-6 px-6 h-14 flex items-center">
-        <Tag className={cn(styles, "!m-0")}>
-          {children}
-        </Tag>
-      </div>
-      {/* Desktop: normal static title */}
-      <Tag className={cn("hidden md:block", styles)}>
-        {children}
-      </Tag>
-    </>
-  )
+export function PageTitle({ children, as: Tag = "h1", variant = "home", className }: PageTitleProps) {
+  return <Tag className={cn(variantStyles[variant], className)}>{children}</Tag>
 }

components/layout/page-wrapper.tsx

@@ -12,7 +12,9 @@ export function PageWrapper({ title, subtitle, children }: PageWrapperProps) {
   return (
     <div className="min-h-full">
       <div className="container mx-auto max-w-4xl px-6 py-8">
-        <PageTitle variant="page">{title}</PageTitle>
+        <div className="sticky top-0 z-50 bg-background -mx-6 px-6 h-14 flex items-center">
+          <PageTitle variant="page" className="!m-0">{title}</PageTitle>
+        </div>
         {subtitle && (
           <p className="text-lg text-muted-foreground mb-3">{subtitle}</p>
         )}

components/layout/theme-toggle.tsx

@@ -36,9 +36,11 @@ function ThemeIcon({ theme, className }: { theme: string; className: string }) {
 export function ThemeToggle({
   iconSize = "sm",
   shortcut,
+  align = "start",
 }: {
   iconSize?: "sm" | "md"
   shortcut?: string
+  align?: "start" | "end"
 }) {
   const { theme, resolvedTheme, setTheme } = useTheme()
   const [open, setOpen] = useState(false)
@@ -76,11 +78,13 @@ export function ThemeToggle({
 
   const sizeClass = iconSizeClasses[iconSize]
 
-  const handlePointerEnter = () => {
+  const handlePointerEnter = (e: React.PointerEvent) => {
+    if (e.pointerType !== "mouse") return
     if (leaveTimer.current) clearTimeout(leaveTimer.current)
   }
 
-  const handlePointerLeave = () => {
+  const handlePointerLeave = (e: React.PointerEvent) => {
+    if (e.pointerType !== "mouse") return
     leaveTimer.current = setTimeout(() => setOpen(false), 100)
   }
 
@@ -117,7 +121,7 @@ export function ThemeToggle({
         trigger
       )}
       <DropdownMenuContent
-        align="start"
+        align={align}
         className="z-[90]"
         onPointerEnter={handlePointerEnter}
         onPointerLeave={handlePointerLeave}

components/layout/top-nav.tsx

@@ -42,7 +42,7 @@ export function TopNav() {
     if (activeLink) {
       setIndicator({ left: activeLink.offsetLeft, width: activeLink.offsetWidth, opacity: 1 })
     }
-  }, [activeIndex])
+  }, [activeIndex, pathname])
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -66,7 +66,7 @@ export function TopNav() {
 
   return (
     <>
-      <nav className="sticky top-0 z-[80] w-full bg-transparent md:bg-background">
+      <nav className="sticky top-0 z-[80] w-full bg-transparent">
         <div className="mx-auto max-w-4xl px-6">
           <div className="flex h-14 items-center justify-center">
             {/* Desktop Navigation */}
@@ -105,7 +105,7 @@ export function TopNav() {
             <div className="flex md:hidden items-center justify-end w-full">
               <div className="flex items-center gap-2 -mr-2">
                 {/* Mobile Theme toggle */}
-                <ThemeToggle iconSize="md" />
+                <ThemeToggle iconSize="md" align="end" />
                 {/* Hamburger button */}
                 <button
                   onClick={() => setMobileMenuOpen(!mobileMenuOpen)}