235 home icon for breadcrumbs is always the root no base url (#236)

* Add baseUrl prop to Breadcrumbs component

* Test baseUrl crumb prop against the doc site itself

* Update the breadcrumbs docs to reflect prop changes

Author: krowvin

lib/components/navigation/breadcrumbs.jsx

@@ -30,7 +30,7 @@ function BreadcrumbItem({ className, href, text }) {
   );
 }
 
-function Breadcrumbs({ className, children }) {
+function Breadcrumbs({ className, children, baseUrl }) {
   const breadcrumbsClass = useMemo(() => {
     return gwMerge(
       "gw-flex gw-flex-nowrap gw-items-center gw-space-x-2 gw-py-4 gw-overflow-x-auto gw-hide-scrollbar",
@@ -41,7 +41,10 @@ function Breadcrumbs({ className, children }) {
     <ol className={breadcrumbsClass}>
       <li>
         <div>
-          <Link href="/" className="gw-text-gray-300 gw-hover:gw-text-gray-500">
+          <Link
+            href={`${(baseUrl || "").replace(/\/+$/, "")}/`} // Avoid double slashes
+            className="gw-text-gray-300 gw-hover:gw-text-gray-500"
+          >
             <MdHome size={22} />
             <span className="gw-sr-only">Home</span>
           </Link>

src/app-pages/documentation/_docs-page.jsx

@@ -2,15 +2,17 @@ import { useConnect } from "redux-bundler-hook";
 import { Container, Sidebar, Breadcrumbs, BreadcrumbItem } from "../../../lib";
 import sidebarLinks from "../../nav-links";
 
+const BASE_URL = import.meta.env.BASE_URL;
+
 function DocsPage({ breadcrumbs = [], children }) {
   const { hash } = useConnect("selectHash");
   return (
     <Container fluid>
-      <Breadcrumbs>
+      <Breadcrumbs baseUrl={BASE_URL}>
         {breadcrumbs.map((breadcrumb) => (
           <BreadcrumbItem
             key={breadcrumb.text}
-            href={breadcrumb.href}
+            href={BASE_URL + breadcrumb.href}
             text={breadcrumb.text}
           />
         ))}

src/app-pages/documentation/navigation/breadcrumbs.jsx

@@ -11,6 +11,8 @@ import { CodeExample } from "../../../app-components/code-example";
 import PropsTable from "../../../app-components/props-table";
 import DocsPage from "../_docs-page";
 
+const BASE_URL = import.meta.env.BASE_URL;
+
 const breadcrumbsPropsData = [
   {
     name: "className",
@@ -39,6 +41,12 @@ const breadcrumbItemPropsData = [
     default: "''",
     desc: "The text of the breadcrumb item.",
   },
+  {
+    name: "baseUrl",
+    type: "string",
+    default: "''",
+    desc: "The base URL for the breadcrumb item.",
+  },
 ];
 
 const pageBreadcrumbs = [
@@ -77,21 +85,26 @@ function Breadcrumbs() {
 
         <H3 className="gw-pt-6 gw-pb-3">Basic Usage</H3>
         <div className="gw-rounded-md gw-border gw-border-dashed gw-px-6 gw-py-3 gw-mb-3">
-          <BC>
-            <BreadcrumbItem href="/docs" text="Documentation" />
-            <BreadcrumbItem href="/docs/navigation" text="Navigation" />
+          <BC baseUrl={BASE_URL}>
+            <BreadcrumbItem href={`${BASE_URL}/docs`} text="Documentation" />
+            <BreadcrumbItem
+              href={`${BASE_URL}/docs/navigation`}
+              text="Navigation"
+            />
             <BreadcrumbItem
-              href="/docs/navigation/breadcrumbs"
+              href={`${BASE_URL}/docs/navigation/breadcrumbs`}
               text="Breadcrumbs"
             />
           </BC>
         </div>
         <div>
           <CodeExample
-            code={`<Breadcrumbs>
-  <BreadcrumbItem href="/docs" text="Documentation" />
-  <BreadcrumbItem href="/docs/navigation" text="Navigation" />
-  <BreadcrumbItem href="/docs/navigation/breadcrumbs" text="Breadcrumbs" />
+            code={`
+const BASE_URL = import.meta.env.BASE_URL;
+<Breadcrumbs baseUrl={BASE_URL}>
+  <BreadcrumbItem href={\`\${BASE_URL}/docs\`} text="Documentation" />
+  <BreadcrumbItem href={\`\${BASE_URL}/docs/navigation\`} text="Navigation" />
+  <BreadcrumbItem href={\`\${BASE_URL}/docs/navigation/breadcrumbs\`} text="Breadcrumbs" />
 </Breadcrumbs>
 `}
           />