fix header links, css issues and nav issue

Author: marc-thomas

src/docs-app/ui/components/content/HeaderWithLink.tsx

@@ -37,12 +37,12 @@ const HeaderWithLink: React.FC<HeaderWithLinkProps> = ({
     }
   };
 
-  const baseClasses = "group relative scroll-mt-24 text-foreground";
+  const baseClasses = "group relative";
   const levelClasses = {
-    1: "text-3xl font-bold mt-12 mb-2 leading-tight",
-    2: "text-2xl font-semibold mt-6 mb-4 leading-snug",
-    3: "text-xl font-semibold mt-8 mb-3 leading-snug",
-    4: "text-lg font-medium mt-6 mb-2",
+    1: "text-3xl font-bold mt-12 mb-2 scroll-mt-24 text-foreground leading-tight",
+    2: "text-2xl font-semibold mt-6 mb-4 scroll-mt-24 text-foreground leading-snug",
+    3: "text-xl font-semibold mt-8 mb-3 scroll-mt-24 text-foreground leading-snug",
+    4: "text-lg font-medium mt-6 mb-2 scroll-mt-24 text-foreground",
   };
 
   const Tag = `h${level}` as keyof JSX.IntrinsicElements;

src/docs-app/ui/components/content/MarkdownContent.tsx

@@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import CodeBlock from "@/docs-app/ui/components/content/CodeBlock.tsx";
+import HeaderWithLink from "@/docs-app/ui/components/content/HeaderWithLink.tsx";
 import type { Components } from "react-markdown";
 import type { Root, Element as MdElement, Text as MdText } from "hast"; // Import HAST types
 import {
@@ -110,57 +111,41 @@ const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) => {
     h1: ({ node, children, ...props }) => {
       const text = extractTextFromChildren(children);
       const id = generateHeadingId(text);
-      return (
-        <>
-          <h1
-            id={id}
-            className="text-3xl font-bold mt-12 mb-2 scroll-mt-24 text-foreground leading-tight"
-            {...props}
-          >
-            {children}
-          </h1>
-          <Separator className="mb-2 opacity-60" />
-        </>
-      );
+        return (
+          <>
+            <HeaderWithLink id={id} level={1} {...props}>
+              {children}
+            </HeaderWithLink>
+            <Separator className="mb-2 opacity-60" />
+          </>
+        );
     },
     h2: ({ node, children, ...props }) => {
       const text = extractTextFromChildren(children);
       const id = generateHeadingId(text);
-      return (
-        <h2
-          id={id}
-          className="text-2xl font-semibold mt-6 mb-4 scroll-mt-24 text-foreground leading-snug"
-          {...props}
-        >
-          {children}
-        </h2>
-      );
+        return (
+          <HeaderWithLink id={id} level={2} {...props}>
+            {children}
+          </HeaderWithLink>
+        );
     },
     h3: ({ node, children, ...props }) => {
       const text = extractTextFromChildren(children);
       const id = generateHeadingId(text);
-      return (
-        <h3
-          id={id}
-          className="text-xl font-semibold mt-8 mb-3 scroll-mt-24 text-foreground leading-snug"
-          {...props}
-        >
-          {children}
-        </h3>
-      );
+        return (
+          <HeaderWithLink id={id} level={3} {...props}>
+            {children}
+          </HeaderWithLink>
+        );
     },
     h4: ({ node, children, ...props }) => {
       const text = extractTextFromChildren(children);
       const id = generateHeadingId(text);
-      return (
-        <h4
-          id={id}
-          className="text-lg font-medium mt-6 mb-2 scroll-mt-24 text-foreground"
-          {...props}
-        >
-          {children}
-        </h4>
-      );
+        return (
+          <HeaderWithLink id={id} level={4} {...props}>
+            {children}
+          </HeaderWithLink>
+        );
     },
     a: ({ node, ...props }) => (
       <a 

src/docs-app/ui/components/layout/DocLayout.tsx

@@ -96,8 +96,7 @@ const DocLayout = () => {
         >
           <div className="flex h-full flex-col">
             {/* Mobile Sidebar Header */}
-            <div className="flex items-center justify-between border-b p-4 lg:hidden">
-              <span className="ml-2 font-semibold">Navigation</span>
+            <div className="flex items-center justify-end border-b p-4 lg:hidden">
               <Button
                 variant="ghost"
                 size="icon"

src/docs-app/ui/components/navigation/Navigation.tsx

@@ -678,7 +678,7 @@ const Navigation = ({ currentPath, onNavigate }: NavigationProps) => {
         </Accordion>
       </div>
 
-      <div className="fixed bottom-0 left-0 w-[250px] border-t border-sidebar-border p-2 flex justify-between items-center bg-sidebar z-10">
+      <div className="fixed bottom-0 left-0 w-full md:w-[329px] border-t border-sidebar-border p-2 flex justify-between items-center bg-sidebar z-10">
         <ThemeToggle />
       </div>
     </div>

src/shared/components/TopNavigation.tsx

@@ -11,7 +11,7 @@ const TopNavigation = () => {
   const currentLogo = (resolvedTheme === "forest" || resolvedTheme === "ocean") ? logoWhiteSrc : logoRedSrc;
 
   return (
-    <header className="sticky top-0 z-50 border-b border-border/50 bg-sidebar/95 backdrop-blur shadow-sm supports-[backdrop-filter]:bg-sidebar/60">
+    <header className="sticky top-0 z-50 border-b border-border/50 bg-sidebar/95">
       <div className="flex h-16 items-center">
         {/* Logo - Flush left with padding */}
         <div className="flex items-center flex-shrink-0 pl-4 lg:pl-6">