refactor sidebar and UI fixes

Author: martins5225

app/src/components/left/ComponentDrag.tsx

@@ -54,7 +54,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
             })}
         </Grid>
         {/* Display all reusable components */}
-        <h4
+        {/* <h4
           className={
             !isDarkMode
               ? classes.lightThemeFontColor
@@ -83,7 +83,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
                 />
               );
             })}
-        </Grid>
+        </Grid> */}
       </div>
     </div>
   );

app/src/components/left/ContentArea.tsx

@@ -5,12 +5,16 @@ import React from 'react';
 import RoomsContainer from './RoomsContainer';
 import TreeContainer from './TreeContainer';
 
-interface TabPanelProps {
-  activeTab: number;
-  index: number;
+interface ContentAreaProps {
+  activeTab: number | null;
+  isVisible: boolean;
 }
 
-const TabPanel: React.FC<TabPanelProps> = ({ children, activeTab, index }) => {
+const TabPanel: React.FC<{
+  children: React.ReactNode;
+  activeTab: number | null;
+  index: number;
+}> = ({ children, activeTab, index }) => {
   return (
     <Box hidden={activeTab !== index}>{activeTab === index && children}</Box>
   );
@@ -19,16 +23,17 @@ const TabPanel: React.FC<TabPanelProps> = ({ children, activeTab, index }) => {
 const panels = [
   <ElementsContainer />,
   <ComponentsContainer />,
-  <TreeContainer />,
   <RoomsContainer />
 ];
-
-const ContentArea: React.FC<{ activeTab: number | null }> = ({ activeTab }) => {
+const ContentArea: React.FC<ContentAreaProps> = ({ activeTab, isVisible }) => {
   return (
-    <div className="left-container">
+    <div
+      className="left-container"
+      style={{ display: isVisible ? 'block' : 'none' }} // Visibility based on activeTab
+    >
       <div className="column left">
         {panels.map((panel, idx) => (
-          <TabPanel key={idx} activeTab={activeTab} index={idx}>
+          <TabPanel activeTab={activeTab} index={idx}>
             {panel}
           </TabPanel>
         ))}

app/src/components/left/RoomsContainer.tsx

@@ -1,3 +1,4 @@
+import { Stack, Typography } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Button from '@mui/material/Button';
@@ -92,16 +93,24 @@ const RoomsContainer = () => {
   }
   return (
     <div>
-      {' '}
-      <TextField
-        hiddenLabel
-        id="filled-hidden-label-small"
-        defaultValue="0"
-        variant="filled"
-        size="small"
-        onChange={(e) => setRoomCode(e.target.value)}
-      />
-      {/* <input
+      <Stack
+        spacing={2}
+        sx={{
+          paddingTop: '20px',
+          maxWidth: '230px',
+          alignItems: 'center',
+          margin: '0 auto 0 auto'
+        }}
+      >
+        {' '}
+        <TextField
+          hiddenLabel
+          id="filled-hidden-label-small"
+          variant="filled"
+          size="small"
+          onChange={(e) => setRoomCode(e.target.value)}
+        />
+        {/* <input
         type="text"
         style={{
           margin: '3px 5%',
@@ -112,23 +121,26 @@ const RoomsContainer = () => {
         placeholder="Room Code"
         onChange={(e) => setRoomCode(e.target.value)}
       ></input> */}
-      <Button
-        variant="contained"
-        onClick={() => joinRoom()}
-        sx={{
-          backgroundColor: '#ffffff',
-          color: '#000000',
-          '&:hover': {
-            backgroundColor: '#0069d9',
-            borderColor: '#0062cc',
-            boxShadow: 'none'
-          }
-        }}
-      >
-        Join Room
-      </Button>
+        <Button
+          variant="contained"
+          onClick={() => joinRoom()}
+          sx={{
+            backgroundColor: '#ffffff',
+            color: '#000000',
+            '&:hover': {
+              backgroundColor: '#C6C6C6',
+              borderColor: '#0062cc',
+              boxShadow: 'none'
+            }
+          }}
+        >
+          Join Room
+        </Button>
+        <Typography variant="h6" color={'white'}>
+          In Room: {joinedRoom}
+        </Typography>
+      </Stack>
       {/* <button onClick={() => joinRoom()}>Join Room</button> */}
-      <p>In Room: {joinedRoom}</p>
     </div>
   );
 };

app/src/components/left/Sidebar.tsx

@@ -2,25 +2,33 @@ import { Tab, Tabs } from '@mui/material';
 
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import { IoMdCube } from 'react-icons/io';
-import LanIcon from '@mui/icons-material/Lan';
 import PeopleIcon from '@mui/icons-material/People';
 import React from 'react';
 
 interface SidebarProps {
   activeTab: number | null;
   setActiveTab: (value: number | null) => void;
+  toggleVisibility: (state: boolean) => void;
 }
-const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
+
+const Sidebar: React.FC<SidebarProps> = ({
+  activeTab,
+  setActiveTab,
+  toggleVisibility
+}) => {
   const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     if (activeTab === newValue) {
       setActiveTab(null);
+      toggleVisibility(false); // Hide the left-container when the same tab is clicked again
     } else {
       setActiveTab(newValue);
+      toggleVisibility(true); // Show the left-container when another tab is activated
     }
   };
 
   return (
     <Tabs
+      key={activeTab}
       orientation="vertical"
       variant="scrollable"
       value={activeTab}
@@ -43,25 +51,29 @@ const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
       }}
     >
       <Tab
-        sx={{ '&.Mui-selected': { color: 'red' } }}
-        icon={<AddBoxIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
+        sx={{
+          color: activeTab === 0 ? '#C6C6C6' : '#4A4A4A',
+          '&.Mui-selected': { color: '#C6C6C6' }
+        }}
+        icon={<AddBoxIcon sx={{ fontSize: '36px' }} />}
         value={0}
       />
       <Tab
-        sx={{ '&.Mui-selected': { color: 'red' } }}
-        icon={<IoMdCube style={{ color: '#C6C6C6', fontSize: '33px' }} />}
+        sx={{
+          color: activeTab === 1 ? '#C6C6C6' : '#4A4A4A',
+          '&.Mui-selected': { color: '#C6C6C6' }
+        }}
+        icon={<IoMdCube style={{ fontSize: '33px' }} />}
         value={1}
       />
       <Tab
-        sx={{ '&.Mui-selected': { color: 'red' } }}
-        icon={<LanIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
+        sx={{
+          color: activeTab === 2 ? '#C6C6C6' : '#4A4A4A',
+          '&.Mui-selected': { color: '#C6C6C6' }
+        }}
+        icon={<PeopleIcon sx={{ fontSize: '36px' }} />}
         value={2}
       />
-      <Tab
-        sx={{ '&.Mui-selected': { color: 'red' } }}
-        icon={<PeopleIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
-        value={3}
-      />
     </Tabs>
   );
 };

app/src/components/main/Canvas.tsx

@@ -1,25 +1,26 @@
-import React, { useEffect, useState } from 'react';
-import { useDrop, DropTargetMonitor } from 'react-dnd';
-import { ItemTypes } from '../../constants/ItemTypes';
 import { Component, DragItem } from '../../interfaces/Interfaces';
-import { combineStyles } from '../../helperFunctions/combineStyles';
-import renderChildren from '../../helperFunctions/renderChildren';
-import Arrow from './Arrow';
-import { useDispatch, useSelector } from 'react-redux';
+import { DropTargetMonitor, useDrop } from 'react-dnd';
+import React, { useEffect, useState } from 'react';
 import {
-  changeFocus,
   addChild,
+  changeFocus,
   snapShotAction,
   toggleCodePreview
 } from '../../redux/reducers/slice/appStateSlice';
+import { useDispatch, useSelector } from 'react-redux';
+
+import Arrow from './Arrow';
+import { ItemTypes } from '../../constants/ItemTypes';
 import { RootState } from '../../redux/store';
+import { combineStyles } from '../../helperFunctions/combineStyles';
+import renderChildren from '../../helperFunctions/renderChildren';
 
 function Canvas(props): JSX.Element {
   const { state, contextParam, isDarkMode } = useSelector(
     (store: RootState) => ({
       state: store.appState,
       contextParam: store.contextSlice,
-      isDarkMode: store.darkMode.isDarkMode, 
+      isDarkMode: store.darkMode.isDarkMode
     })
   );
   const dispatch = useDispatch();
@@ -128,7 +129,7 @@ function Canvas(props): JSX.Element {
     width: '100%',
     minHeight: '100%',
     backgroundColor: isOver ? '#191919' : '#191919',
-    border: '1px solid #FBFBF2',
+    // border: '1px solid #FBFBF2',
     borderStyle: isOver ? 'dotted' : 'solid',
     aspectRatio: 'auto 774 / 1200',
     boxSizing: 'border-box'
@@ -151,15 +152,15 @@ function Canvas(props): JSX.Element {
     currentComponent.style
   );
   return (
-      <div
-        className={'componentContainer'}
-        ref={drop} 
-        data-testid="drop"
-        style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
-        onClick={onClickHandler}
-      >
-        {renderChildren(currentComponent.children)}
-      </div>
+    <div
+      className={'componentContainer'}
+      ref={drop}
+      data-testid="drop"
+      style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
+      onClick={onClickHandler}
+    >
+      {renderChildren(currentComponent.children)}
+    </div>
   );
 }
 

app/src/components/main/DemoRender.tsx

@@ -22,7 +22,6 @@ const DemoRender = (): JSX.Element => {
   const demoContainerStyle = {
     width: '100%',
     backgroundColor: '#FBFBFB',
-    border: '2px Solid grey',
     borderBottom: 'none',
     overflow: 'auto'
   };

app/src/containers/LeftContainer.tsx

@@ -6,11 +6,20 @@ import Sidebar from '../components/left/Sidebar';
 
 function App() {
   const [activeTab, setActiveTab] = useState<number | null>(null);
+  const [isVisible, setIsVisible] = useState(false); // State to manage visibility
+
+  const toggleVisibility = (state: boolean) => {
+    setIsVisible(state);
+  };
 
   return (
     <div style={{ display: 'flex' }}>
-      <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
-      <ContentArea activeTab={activeTab} />
+      <Sidebar
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        toggleVisibility={toggleVisibility}
+      />
+      <ContentArea activeTab={activeTab} isVisible={isVisible} />
     </div>
   );
 }

app/src/public/styles/style.css

@@ -321,6 +321,10 @@ span.material-symbols-outlined {
   z-index: 1;
 }
 
+.hidden {
+  display: none;
+}
+
 /*
 /////////////////////////////////////////////////
 MAIN COLUMN
@@ -543,7 +547,7 @@ BOTTOM PANEL
   background-color: #003366;
   width: 100%;
   height: 100%;
-  display:flex;
+  display: flex;
   flex-direction: column;
 
 }