added sidebar navigation

src/components/sidebar/SidebarStack/index.tsx

@@ -1,11 +1,21 @@
-import React, { createContext, FC, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
-import { isNil } from '~/utils/ramda';
+import { isNil } from "~/utils/ramda";
 
-import styles from './styles.module.scss';
+import styles from "./styles.module.scss";
 
 interface SidebarStackProps extends PropsWithChildren<{}> {
-  initialTab?: number;
+  tab?: number;
+  onTabChange?: (index?: number) => void;
 }
 
 interface SidebarStackContextValue {
@@ -38,12 +48,31 @@ const SidebarCards: FC = ({ children }) => {
   return <div className={styles.card}>{nonEmptyChildren[activeTab]}</div>;
 };
 
-const SidebarStack = function({ children, initialTab }: SidebarStackProps) {
-  const [activeTab, setActiveTab] = useState<number | undefined>(initialTab);
-  const closeAllTabs = useCallback(() => setActiveTab(undefined), []);
+const SidebarStack = function({
+  children,
+  tab,
+  onTabChange,
+}: SidebarStackProps) {
+  const [activeTab, setActiveTab] = useState<number | undefined>(tab);
 
+  const closeAllTabs = useCallback(() => {
+    setActiveTab(undefined);
+    onTabChange?.(undefined);
+  }, []);
+
+  const onChangeTab = useCallback(
+    (index: number) => {
+      onTabChange?.(index);
+      setActiveTab(index);
+    },
+    [onTabChange],
+  );
+
+  useEffect(() => setActiveTab(tab), [tab]);
   return (
-    <SidebarStackContext.Provider value={{ activeTab, setActiveTab, closeAllTabs }}>
+    <SidebarStackContext.Provider
+      value={{ activeTab, setActiveTab: onChangeTab, closeAllTabs }}
+    >
       <div className={styles.stack}>{children}</div>
     </SidebarStackContext.Provider>
   );