From 071406d15dae38802adf39af5734ddc558f77dae Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 17:35:48 +0300
Subject: [PATCH 1/2] chore: setup side menu

---
 frontend/webapp/app/setup/layout.tsx          |  44 ++++++-
 frontend/webapp/components/setup/index.tsx    |   1 +
 .../webapp/components/setup/menu/index.tsx    | 124 ++++++++++++++++++
 frontend/webapp/public/icons/common/check.svg |   3 +
 .../reuseable-components/text/index.tsx       |  21 ++-
 frontend/webapp/styles/theme.ts               |   1 +
 6 files changed, 187 insertions(+), 7 deletions(-)
 create mode 100644 frontend/webapp/components/setup/menu/index.tsx
 create mode 100644 frontend/webapp/public/icons/common/check.svg

diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 2aaf15e78..4462ddad2 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -1,6 +1,31 @@
 'use client';
 import React from 'react';
-import { SetupHeader } from '@/components';
+import styled from 'styled-components';
+import { SetupHeader, SideMenu } from '@/components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  max-width: 1440px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.secondary};
+  flex-direction: column;
+  align-items: center;
+`;
 
 export default function SetupLayout({
   children,
@@ -8,9 +33,18 @@ export default function SetupLayout({
   children: React.ReactNode;
 }) {
   return (
-    <>
-      <SetupHeader />
-      {children}
-    </>
+    <LayoutContainer>
+      <div style={{ width: '100vw' }}>
+        <SetupHeader />
+      </div>
+      <SideMenuWrapper>
+        <SideMenu />
+      </SideMenuWrapper>
+      <MainContent>
+        <SideMenu />
+
+        {children}
+      </MainContent>
+    </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/components/setup/index.tsx b/frontend/webapp/components/setup/index.tsx
index e2f355a8b..b45b6ee9c 100644
--- a/frontend/webapp/components/setup/index.tsx
+++ b/frontend/webapp/components/setup/index.tsx
@@ -6,3 +6,4 @@ export { ConnectionsIcons } from './connection/connections_icons/connections_ico
 export { CreateConnectionForm } from './connection/create.connection.form/create.connection.form';
 export { QuickHelp } from './connection/quick.help/quick.help';
 export * from './headers';
+export * from './menu';
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
new file mode 100644
index 000000000..aa217815e
--- /dev/null
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -0,0 +1,124 @@
+import { Text } from '@/reuseable-components';
+import Image from 'next/image';
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface StepProps {
+  title: string;
+  subtitle?: string;
+  state: 'finish' | 'active' | 'disabled';
+  stepNumber: number;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  display: flex;
+  gap: 16px;
+  padding: 10px 0;
+  cursor: ${({ state }) => (state === 'disabled' ? 'not-allowed' : 'pointer')};
+  opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
+
+  transition: opacity 0.3s;
+
+  ${({ state }) => state === 'active' && css``}
+
+  & + & {
+    margin-top: 10px;
+  }
+`;
+
+const IconWrapper = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  margin-right: 10px;
+  border-radius: 32px;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #f9f9f9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ state }) =>
+    state === 'finish'
+      ? css`
+          opacity: 0.8;
+        `
+      : state === 'disabled' &&
+        css`
+          border: 1px dashed rgba(249, 249, 249, 0.4);
+        `}
+`;
+
+const StepContent = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const StepTitle = styled(Text)`
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+const StepSubtitle = styled(Text)``;
+
+const SideMenu: React.FC = () => {
+  const steps: StepProps[] = [
+    {
+      title: 'INSTALLATION',
+      subtitle: 'Success',
+      state: 'finish',
+      stepNumber: 1,
+    },
+    {
+      title: 'SOURCES',
+      state: 'active',
+      stepNumber: 2,
+    },
+    {
+      title: 'DESTINATIONS',
+      state: 'disabled',
+      stepNumber: 3,
+    },
+  ];
+
+  return (
+    <Container>
+      {steps.map((step, index) => (
+        <Step key={index} state={step.state}>
+          <IconWrapper state={step.state}>
+            {step.state === 'finish' && (
+              <Image
+                src="/icons/common/check.svg"
+                width={20}
+                height={20}
+                alt={''}
+              />
+            )}
+            {step.state === 'active' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+            {step.state === 'disabled' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+          </IconWrapper>
+          <StepContent>
+            <StepTitle>{step.title}</StepTitle>
+            {step.subtitle && (
+              <StepSubtitle size={10} weight={300} family={'secondary'}>
+                {step.subtitle}
+              </StepSubtitle>
+            )}
+          </StepContent>
+        </Step>
+      ))}
+    </Container>
+  );
+};
+
+export { SideMenu };
diff --git a/frontend/webapp/public/icons/common/check.svg b/frontend/webapp/public/icons/common/check.svg
new file mode 100644
index 000000000..6ee9b2be2
--- /dev/null
+++ b/frontend/webapp/public/icons/common/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<path d="M3.6665 9.24833L6.67773 12.7315L6.94495 12.2642C8.37771 9.75889 10.3605 7.61153 12.7439 5.98403L13.3332 5.58167" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 0cc8c08c6..75fbc78b6 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -7,6 +7,7 @@ interface TextProps {
   size?: number;
   weight?: number;
   align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
 }
 
 const TextWrapper = styled.span<{
@@ -14,13 +15,22 @@ const TextWrapper = styled.span<{
   size: number;
   weight: number;
   align: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
 }>`
   color: ${({ color, theme }) =>
     color || console.log({ theme }) || theme.colors.text};
   font-size: ${({ size }) => size}px;
   font-weight: ${({ weight }) => weight};
   text-align: ${({ align }) => align};
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme, family }) => {
+    if (family === 'primary') {
+      return theme.font_family.primary;
+    }
+    if (family === 'secondary') {
+      return theme.font_family.secondary;
+    }
+    return theme.font_family.primary;
+  }};
 `;
 
 const Text: React.FC<TextProps> = ({
@@ -29,9 +39,16 @@ const Text: React.FC<TextProps> = ({
   size = 16,
   weight = 400,
   align = 'left',
+  family = 'primary',
 }) => {
   return (
-    <TextWrapper color={color} size={size} weight={weight} align={align}>
+    <TextWrapper
+      family={family}
+      color={color}
+      size={size}
+      weight={weight}
+      align={align}
+    >
       {children}
     </TextWrapper>
   );
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 9b44c56c1..6789e96cf 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -19,6 +19,7 @@ const text = {
 
 const font_family = {
   primary: 'Kode Mono, sans-serif',
+  secondary: 'Inter, sans-serif',
 };
 
 // Define the theme interface

From 09c9c241059968ccd9d0dab1b04a460e47caa697 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 17:40:32 +0300
Subject: [PATCH 2/2] chore: fixed pr comments" "

---
 frontend/webapp/app/setup/layout.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 4462ddad2..f3afba447 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -18,6 +18,10 @@ const SideMenuWrapper = styled.div`
   top: 144px;
 `;
 
+const HeaderWrapper = styled.div`
+  width: 100vw;
+`;
+
 const MainContent = styled.div`
   display: flex;
   max-width: 1440px;
@@ -34,9 +38,9 @@ export default function SetupLayout({
 }) {
   return (
     <LayoutContainer>
-      <div style={{ width: '100vw' }}>
+      <HeaderWrapper>
         <SetupHeader />
-      </div>
+      </HeaderWrapper>
       <SideMenuWrapper>
         <SideMenu />
       </SideMenuWrapper>