WIP

frontend/webapp/app/overview/sources/page.tsx

@@ -0,0 +1,6 @@
+"use client";
+import React from "react";
+
+export default function SourcesOverviewPage() {
+  return <div>SourcesOverviewPage</div>;
+}

frontend/webapp/components/side.menu/menu.item/menu.item.tsx

@@ -0,0 +1,45 @@
+import { KeyvalText } from "@/design.system";
+import React from "react";
+import { styled } from "styled-components";
+interface MenuItemContainerProps {
+  focused: boolean;
+}
+
+interface MenuItem {
+  name: string;
+  icons: {
+    focus: () => JSX.Element;
+    notFocus: () => JSX.Element;
+  };
+}
+
+interface MenuItemProps {
+  item: MenuItem;
+  focused: boolean;
+  onClick?: () => void;
+}
+
+const MenuItemContainer = styled.div<MenuItemContainerProps>`
+  display: flex;
+  padding: 0px 16px;
+  height: 48px;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  border-radius: 10px;
+  background: ${({ focused, theme }) =>
+    focused ? theme.colors.blue_grey : "transparent"};
+`;
+
+export default function MenuItem({ item, focused, onClick }: MenuItemProps) {
+  const { name, icons } = item;
+
+  return (
+    <MenuItemContainer onClick={onClick} focused={focused}>
+      {focused ? icons.focus() : icons.notFocus()}
+      <KeyvalText size={14} weight={600}>
+        {name}
+      </KeyvalText>
+    </MenuItemContainer>
+  );
+}

frontend/webapp/components/side.menu/menu/menu.styled.tsx

@@ -7,3 +7,10 @@ export const MenuContainer = styled.div`
   border-right: 1px solid rgba(255, 255, 255, 0.04);
   background: ${({ theme }) => theme.colors.dark_blue};
 `;
+export const LogoWrapper = styled.div`
+  padding: 24px 16px;
+`;
+
+export const MenuItemsWrapper = styled.div`
+  padding: 16px 9px;
+`;

frontend/webapp/components/side.menu/menu/menu.tsx

@@ -1,6 +1,75 @@
 "use client";
-import React from "react";
-import { MenuContainer } from "./menu.styled";
+import React, { useState } from "react";
+import { MenuContainer, LogoWrapper, MenuItemsWrapper } from "./menu.styled";
+import { KeyvalText } from "@/design.system";
+import MenuItem from "../menu.item/menu.item";
+import { useRouter } from "next/navigation";
+
+import FocusOverview from "../../../assets/icons/focus-overview.svg";
+import UnFocusOverview from "../../../assets/icons/unfocus-overview.svg";
+import FocusSources from "../../../assets/icons/sources-focus.svg";
+import UnFocusSources from "../../../assets/icons/sources-unfocus.svg";
+import FocusDestinations from "../../../assets/icons/destinations-focus.svg";
+import UnFocusDestinations from "../../../assets/icons/destinations-unfocus.svg";
+import { OVERVIEW } from "@/utils/constants";
+const MENU_ITEMS = [
+  {
+    id: 1,
+    name: "Overview",
+    icons: {
+      focus: () => <FocusOverview />,
+      notFocus: () => <UnFocusOverview />,
+    },
+    navigate: "/overview",
+  },
+  {
+    id: 2,
+    name: "Sources",
+    icons: {
+      focus: () => <FocusSources />,
+      notFocus: () => <UnFocusSources />,
+    },
+    navigate: "/overview/sources",
+  },
+  {
+    id: 3,
+    name: "Destinations",
+    icons: {
+      focus: () => <FocusDestinations />,
+      notFocus: () => <UnFocusDestinations />,
+    },
+    navigate: "/overview/destinations",
+  },
+];
+
 export function Menu() {
-  return <MenuContainer></MenuContainer>;
+  const [currentMenuItem, setCurrentMenuItem] = useState(MENU_ITEMS[0]);
+  const router = useRouter();
+
+  function handleMenuItemClick(item) {
+    setCurrentMenuItem(item);
+    router.push(item?.navigate);
+  }
+
+  function renderMenuItemsList() {
+    return MENU_ITEMS.map((item) => (
+      <MenuItem
+        key={`${item.id}_${item.name}`}
+        onClick={() => handleMenuItemClick(item)}
+        focused={currentMenuItem?.id === item.id}
+        item={item}
+      />
+    ));
+  }
+
+  return (
+    <MenuContainer>
+      <LogoWrapper>
+        <KeyvalText size={32} weight={700}>
+          {OVERVIEW.ODIGOS}
+        </KeyvalText>
+      </LogoWrapper>
+      <MenuItemsWrapper>{renderMenuItemsList()}</MenuItemsWrapper>
+    </MenuContainer>
+  );
 }

frontend/webapp/utils/constants/index.tsx

@@ -1,4 +1,4 @@
 export { ROUTES } from "./routes";
 export { CONFIG } from "./config";
-export { SETUP } from "./string";
+export { SETUP, OVERVIEW } from "./string";
 export { API, QUERIES } from "./urls";

frontend/webapp/utils/constants/string.tsx

@@ -36,3 +36,7 @@ export const SETUP = {
   SELECTED: "Selected",
   MANAGED: "Managed",
 };
+
+export const OVERVIEW = {
+  ODIGOS: "Odigos",
+};