feat: provide footer with product and version

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>
+  );
+}

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>
   );
 }