@m13v/seo-components 0.8.13 → 0.8.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "prepublishOnly": "npm run build:css"

package/src/components/SitemapSidebar.tsx

@@ -76,8 +76,10 @@ export function SitemapSidebar({
   const [query, setQuery] = useState("");
   const [mobileOpen, setMobileOpen] = useState(false);
   const [activeSection, setActiveSection] = useState<string | null>(null);
+  const [hasExternalBrand, setHasExternalBrand] = useState(false);
   const activeRef = useRef<HTMLAnchorElement | null>(null);
   const navRef = useRef<HTMLElement | null>(null);
+  const sidebarRef = useRef<HTMLElement | null>(null);
 
   const filtered = query
     ? pages.filter(
@@ -106,6 +108,19 @@ export function SitemapSidebar({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 
+  // Hide sidebar brand header if a navbar with a home link already exists on the page.
+  useEffect(() => {
+    const navs = document.querySelectorAll("nav");
+    for (const nav of navs) {
+      if (sidebarRef.current?.contains(nav)) continue;
+      const homeLink = nav.querySelector('a[href="/"]');
+      if (homeLink) {
+        setHasExternalBrand(true);
+        return;
+      }
+    }
+  }, []);
+
   // Track which H2 section is currently in view.
   useEffect(() => {
     const article = document.querySelector("article");
@@ -197,6 +212,7 @@ export function SitemapSidebar({
 
       {/* Sidebar */}
       <aside
+        ref={sidebarRef}
         className={`
           fixed lg:sticky top-0 left-0 z-40 h-screen shrink-0
           w-72 bg-white dark:bg-zinc-950 border-r border-zinc-200 dark:border-zinc-800
@@ -208,19 +224,21 @@ export function SitemapSidebar({
       >
         {/* Header */}
         <div className="p-4 border-b border-zinc-100 dark:border-zinc-800">
-          <a href={homeHref} className="flex items-baseline gap-0 mb-4">
-            {brandLogo ?? (
-              <>
-                <span className="font-mono font-bold text-lg tracking-tight text-zinc-900 dark:text-zinc-100">
-                  {brandName}
-                </span>
-                <span
-                  className="w-1.5 h-1.5 rounded-full ml-0.5 mb-0.5 inline-block"
-                  style={{ backgroundColor: "var(--seo-accent, #14b8a6)" }}
-                />
-              </>
-            )}
-          </a>
+          {!hasExternalBrand && (
+            <a href={homeHref} className="flex items-baseline gap-0 mb-4">
+              {brandLogo ?? (
+                <>
+                  <span className="font-mono font-bold text-lg tracking-tight text-zinc-900 dark:text-zinc-100">
+                    {brandName}
+                  </span>
+                  <span
+                    className="w-1.5 h-1.5 rounded-full ml-0.5 mb-0.5 inline-block"
+                    style={{ backgroundColor: "var(--seo-accent, #14b8a6)" }}
+                  />
+                </>
+              )}
+            </a>
+          )}
           <div className="relative">
             <svg
               className="absolute left-2.5 top-1/2 -translate-y-1/2 text-zinc-400"