WIP

app/main.wasp

@@ -80,7 +80,7 @@ page PlayGroundPage {
 
 route BuildRoute { path: "/build/:type?", to: BuildPage }
 page BuildPage {
-  component: import BuildPageWithCustomAuth from "@src/client/app/BuildPageNew"
+  component: import BuildPageWithCustomAuth from "@src/client/app/BuildPage"
 }
 
 route LoginRoute { path: "/login", to: LoginPage }

app/src/client/app/BuildPage.tsx

@@ -1,18 +1,14 @@
-import React, { useEffect, useState, memo } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { type User } from 'wasp/entities';
 
 import _ from 'lodash';
 
 import { useBuildPage } from '../hooks/useBuildPage';
-
 import CustomAuthRequiredLayout from './layout/CustomAuthRequiredLayout';
-import CustomSidebar from '../components/CustomSidebar';
 import LoadingComponent from '../components/LoadingComponent';
 import { ErrorComponent } from '../components/ErrorComponent';
-
-import { SubHeader } from '../components/buildPage/SubHeader';
-import { UserProperty } from '../components/buildPage/UserProperty';
+import BuildPageTab from '../components/buildPage/BuildPageTab';
 
 interface BuildPageProps {
   user: User;
@@ -21,12 +17,11 @@ interface BuildPageProps {
 const BuildPage = ({ user }: BuildPageProps) => {
   const history = useHistory();
   const { data: propertiesSchema, loading, error } = useBuildPage();
-  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [activeProperty, setActiveProperty] = useState<string | null>(null);
   const [sideNavItemClickCount, setSideNavItemClickCount] = useState(0);
   const wrapperClass = document.body.classList.contains('server-error')
-    ? 'h-[calc(100vh-203px)]'
-    : 'h-[calc(100vh-105px)]';
+    ? 'min-h-[calc(100vh-344px)]'
+    : 'min-h-[calc(100vh-246px)]';
 
   const handleSideNavItemClick = (selectedComponentName: string) => {
     setActiveProperty(selectedComponentName);
@@ -60,24 +55,18 @@ const BuildPage = ({ user }: BuildPageProps) => {
       {/* <!-- ===== Page Wrapper Start ===== --> */}
       {canRenderProperty && (
         <div className={`flex ${wrapperClass} overflow-hidden`}>
-          {/* <!-- ===== Sidebar Start ===== --> */}
-          <CustomSidebar
-            sidebarOpen={sidebarOpen}
-            setSidebarOpen={setSidebarOpen}
-            onSideNavItemClick={handleSideNavItemClick}
-            activeProperty={activeProperty}
-          />
-          {/* <!-- ===== Sidebar End ===== --> */}
-          {/* <!-- ===== Content Area Start ===== --> */}
+          {/* <!-- ===== tab Bar ===== --> */}
           <div className='relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden'>
             {/* <!-- ===== Mobile Header For Sidenav Start ===== --> */}
-            <SubHeader sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+            {/* <SubHeader sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> */}
             {/* <!-- ===== Mobile Header For Sidenav End ===== --> */}
 
             {/* <!-- ===== Main Content Start ===== --> */}
             <main className='lg:mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10'>
-              <div className='w-full lg:min-w-[700px] 2xl:min-w-[1200px]'>
-                <UserProperty
+              {/* <div className='w-full lg:min-w-[700px] 2xl:min-w-[1200px]'> */}
+              <div className='w-full lg:min-w-[700px] 2xl:min-w-[1000px]'>
+                <BuildPageTab
+                  onSideNavItemClick={handleSideNavItemClick}
                   activeProperty={activeProperty}
                   propertiesSchema={propertiesSchema}
                   sideNavItemClickCount={sideNavItemClickCount}

app/src/client/components/buildPage/BuildPageTab.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+
+import { Tabs, TabList, TabPanels, Tab, TabPanel, Box, Flex } from '@chakra-ui/react';
+
+import { navLinkItems } from '../CustomSidebar';
+import { UserProperty } from './UserProperty';
+import { PropertiesSchema } from '../../interfaces/BuildPageInterfaces';
+import faLogoWithoutText from '../../static/fa-logo-without-text.svg';
+
+interface Props {
+  onSideNavItemClick: (selectedItem: string) => void;
+  activeProperty: string;
+  propertiesSchema: PropertiesSchema;
+  sideNavItemClickCount: number;
+  setActiveProperty: (activeProperty: string) => void;
+}
+
+const BuildPageTab = ({
+  activeProperty,
+  onSideNavItemClick,
+  propertiesSchema,
+  sideNavItemClickCount,
+  setActiveProperty,
+}: Props) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleTabClick = (index: number) => {
+    onSideNavItemClick(navLinkItems[index].componentName);
+  };
+
+  useEffect(() => {
+    const index = navLinkItems.findIndex((item) => item.componentName === activeProperty);
+    setActiveTab(index);
+  }, [activeProperty]);
+  return (
+    <Box position='relative' marginBottom='40px'>
+      <Tabs size='lg' variant='unstyled' index={activeTab} onChange={setActiveTab}>
+        <TabList>
+          {navLinkItems.map((tab, index) => (
+            <Tab
+              key={index}
+              onClick={() => handleTabClick(index)}
+              bg={activeTab === index ? '#0A58D6' : 'rgba(255, 255, 255, 0.2)'}
+              color={activeTab === index ? '#FFF' : 'rgba(255, 255, 255, 1)'}
+              _hover={{
+                bg: '#0A58D6',
+                opacity: 0.8,
+              }}
+              transition='all 0.3s'
+              borderTopRadius='xl'
+              mr={3}
+              px={4}
+              py={2}
+              fontWeight='bold'
+              fontSize='sm'
+            >
+              {tab.label}
+            </Tab>
+          ))}
+        </TabList>
+
+        <TabPanels bg='#0A58D6' borderRadius='0 20px 20px 20px' position='relative'>
+          {navLinkItems.map((tab, index) => (
+            <TabPanel key={index} p={0} minHeight='300px' overflow='auto'>
+              <UserProperty
+                activeProperty={activeProperty}
+                propertiesSchema={propertiesSchema}
+                sideNavItemClickCount={sideNavItemClickCount}
+                setActiveProperty={setActiveProperty}
+              />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+      <Box
+        position='absolute'
+        right='-52px'
+        bottom='-40px' // Adjust this value to control how much of the logo is below the panel
+        width='210px' // Adjust based on the actual size of your logo
+        height='auto' // Adjust based on the actual size of your logo
+        zIndex={1}
+      >
+        <img
+          src={faLogoWithoutText}
+          alt='FA Logo'
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default BuildPageTab;