feat: enhance JSDoc cheatsheet with quick reference section and improve layout

Add a dedicated quick reference section to the JSDoc cheatsheet, streamline the layout for better readability, and adjust sidebar and table of contents styles for consistency.

components/Sidebar.tsx

@@ -8,7 +8,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 const navigationItems = [
-  { name: "Kitchen Sink", href: "/", icon: Home },
+  { name: "Home", href: "/", icon: Home },
   { name: "Basic Tags", href: "/basic-tags", icon: Tag },
   { name: "Parameters", href: "/parameters", icon: Code },
   { name: "Types", href: "/type-definitions", icon: Hash },
@@ -25,9 +25,9 @@ export default function Sidebar() {
   const pathname = usePathname()
 
   return (
-    <aside className="w-64 bg-gradient-to-b from-card/95 to-card/90 backdrop-blur-sm border-r border-border/50 fixed left-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden lg:block shadow-2xl">
-      <div className="p-6">
-        <Card className="bg-card/80 border-border/30 shadow-lg backdrop-blur-sm">
+    <aside className="w-64 fixed left-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden lg:block">
+      <div className="p-2">
+        <Card className="bg-card/80 border-border/30 shadow-2xl">
           <CardHeader className="pb-4 border-b border-border/20">
             <CardTitle className="text-base text-foreground flex items-center gap-3 font-semibold">
               <div className="p-2 rounded-lg bg-primary/10">

components/SyntaxHighlighter.tsx

@@ -32,7 +32,7 @@ const CodeHighlighter = ({ code, language = "javascript" }: SyntaxHighlighterPro
         wrapLines={true}
         wrapLongLines={true}
         PreTag={({ children, ...props }) => (
-          <pre className="!m-0 !p-0" {...props}>
+          <pre className="!m-0 p-2" {...props}>
             {children}
           </pre>
         )}

components/TableOfContents.tsx

@@ -21,6 +21,27 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   const [activeId, setActiveId] = useState<string>("")
   const [isVisible, setIsVisible] = useState(false)
 
+  // Read initial hash from URL on mount
+  useEffect(() => {
+    const hash = window.location.hash.slice(1) // Remove the # symbol
+    if (hash && items.some(item => item.id === hash)) {
+      setActiveId(hash)
+    }
+  }, [items])
+
+  // Listen for hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1) // Remove the # symbol
+      if (hash && items.some(item => item.id === hash)) {
+        setActiveId(hash)
+      }
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [items])
+
   useEffect(() => {
     if (items.length === 0) return
 
@@ -34,6 +55,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             setActiveId(entry.target.id)
+            // Update URL hash when scrolling to a section
+            if (window.location.hash !== `#${entry.target.id}`) {
+              window.history.replaceState(null, '', `#${entry.target.id}`)
+            }
           }
         })
       },
@@ -69,6 +94,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   const scrollToSection = (id: string) => {
     const element = document.getElementById(id)
     if (element) {
+      // Update URL hash immediately
+      window.history.pushState(null, '', `#${id}`)
+      setActiveId(id)
+      
       // Get the actual header height dynamically
       const header = document.querySelector('header')
       const headerHeight = header ? header.offsetHeight + 20 : 100 // 20px buffer
@@ -87,8 +116,8 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   if (!isVisible) return null
 
   return (
-    <aside className={`w-72 bg-gradient-to-b from-card/95 to-card/90 backdrop-blur-sm border-l border-border/50 fixed right-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden xl:block shadow-2xl ${className}`}>
-      <div className="p-6">
+    <aside className={`w-72 fixed right-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden xl:block ${className}`}>
+      <div className="p-2">
         <Card className="bg-card/80 border-border/30 shadow-lg backdrop-blur-sm">
           <CardHeader className="pb-4 border-b border-border/20">
             <CardTitle className="text-base text-foreground flex items-center gap-3 font-semibold">