add chart column to logger page

Author: andresdlt03

ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartsColumn.tsx

@@ -0,0 +1,25 @@
+import { TabLayout } from "layouts/TabLayout/TabLayout";
+import { ChartMenu } from "components/ChartMenu/ChartMenu";
+import { ReactComponent as Chart } from "assets/svg/chart.svg";
+import { useMemo } from "react";
+import { usePodDataStore } from "common";
+import { createSidebarSections } from "components/ChartMenu/sidebar";
+
+export const ChartsColumn = () => {
+    const podData = usePodDataStore(state => state.podData);
+
+    const sections = useMemo(() => {
+        return createSidebarSections(podData);
+    }, []);
+
+    const chartsColumnTabItems = [
+            {
+                id: "charts",
+                name: "Charts",
+                icon: <Chart />,
+                component: <ChartMenu sidebarSections={sections} />,
+            },
+        ]
+
+    return <TabLayout tabs={chartsColumnTabItems}></TabLayout>;
+};

ethernet-view/src/pages/LoggerPage/LoggerPage.tsx

@@ -1,6 +1,18 @@
+import { Orientation } from "hooks/useSplit/Orientation";
+import { SplitLayout } from "layouts/SplitLayout/SplitLayout";
+import { ChartsColumn } from "pages/LoggerPage/ChartsColumn/ChartsColumn";
+import chart from "assets/svg/chart.svg"
 
 export const LoggerPage = () => {
     return (
-      <div>LoggerPage</div>
-    )
-}
+        <SplitLayout
+            components={[
+                {
+                    component: <ChartsColumn />,
+                    collapsedIcon: chart,
+                },
+            ]}
+            orientation={Orientation.HORIZONTAL}
+        ></SplitLayout>
+    );
+};