From 4fc8e6cfeebdb59bfa09a20e76a1623cbe2dd4af Mon Sep 17 00:00:00 2001
From: Leo Borai <estebanborai@gmail.com>
Date: Thu, 6 Feb 2025 15:00:49 -0300
Subject: [PATCH] feat: provide footer with product and version

---
 src/components/DocSidebarFooter.tsx    | 31 ++++++++++++++++++++++++++
 src/theme/DocSidebar/Desktop/index.tsx |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 src/components/DocSidebarFooter.tsx

diff --git a/src/components/DocSidebarFooter.tsx b/src/components/DocSidebarFooter.tsx
new file mode 100644
index 00000000..fb5b7423
--- /dev/null
+++ b/src/components/DocSidebarFooter.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from "react";
+import { useActiveDocContext } from "@docusaurus/plugin-content-docs/client";
+
+export default function DocSidebarFooter() {
+  const [currentPlugin, setCurrentPlugin] = useState('default');
+  const [activeProduct, setActiveProduct] = useState('fluvio');
+
+  useEffect(() => {
+    const isBrowser = typeof window !== 'undefined';
+
+    if (isBrowser) {
+      const location = window.location.pathname;
+
+      if (location.startsWith('/sdf')) {
+        setCurrentPlugin('sdf');
+        setActiveProduct('sdf');
+      } else {
+        setCurrentPlugin('default');
+        setActiveProduct('fluvio');
+      }
+    }
+  }, [currentPlugin]);
+
+  const version = useActiveDocContext(currentPlugin);
+
+  return (
+    <footer className="font-mono text-xs py-2 px-5">
+      {activeProduct}<span className="font-mono">@</span><span className="font-mono">{version?.activeVersion?.label}</span>
+    </footer>
+  );
+}
diff --git a/src/theme/DocSidebar/Desktop/index.tsx b/src/theme/DocSidebar/Desktop/index.tsx
index 9446ba23..715adc54 100644
--- a/src/theme/DocSidebar/Desktop/index.tsx
+++ b/src/theme/DocSidebar/Desktop/index.tsx
@@ -7,6 +7,7 @@ import Content from '@theme/DocSidebar/Desktop/Content';
 import type {Props} from '@theme/DocSidebar/Desktop';
 
 import styles from './styles.module.css';
+import DocSidebarFooter from '@site/src/components/DocSidebarFooter';
 
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
   const {
@@ -26,6 +27,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <Content path={path} sidebar={sidebar} />
       {hideable && <CollapseButton onClick={onCollapse} />}
+      <DocSidebarFooter />
     </div>
   );
 }