Skip to content

Commit 5569e09

Browse files
martins5225martins5225
committed
refactor sidebar UI
1 parent 40ee078 commit 5569e09

File tree

6 files changed

+157
-149
lines changed

6 files changed

+157
-149
lines changed

‎app/src/components/left/ContentArea.tsx

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,42 @@
1-
import { Route, Switch, useLocation } from 'react-router-dom';
2-
import { useDispatch, useSelector } from 'react-redux';
3-
1+
import { Box } from '@mui/material';
42
import ComponentsContainer from './ComponentsContainer';
53
import ElementsContainer from './ElementsContainer';
64
import React from 'react';
75
import RoomsContainer from './RoomsContainer';
86
import TreeContainer from './TreeContainer';
97

10-
function ContentArea() {
11-
const { contextParam, style } = useSelector((store) => ({
12-
contextParam: store.contextSlice,
13-
style: store.styleSlice
14-
}));
15-
const dispatch = useDispatch();
8+
interface TabPanelProps {
9+
value: number;
10+
index: number;
11+
}
1612

17-
const location = useLocation<{ hideContent: boolean }>();
13+
const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
14+
return <Box hidden={value !== index}>{value === index && children}</Box>;
15+
};
1816

19-
// If the hideContent flag is true, don't render any content
20-
if (location.state?.hideContent) {
17+
function ContentArea({ value }: { value: number | null }) {
18+
if (value === null) {
2119
return null;
2220
}
23-
if (
24-
['/elements', '/reuseable', '/component-tree', '/rooms'].includes(
25-
location.pathname
26-
)
27-
) {
28-
return (
29-
<div className="left-container">
30-
<div className="column left" style={style.style}>
31-
<Switch>
32-
<Route path="/elements" component={ElementsContainer} />
33-
<Route path="/reuseable" component={ComponentsContainer} />
34-
<Route path="/component-tree" component={TreeContainer} />
35-
<Route path="/rooms" component={RoomsContainer} />
36-
</Switch>
37-
</div>
38-
</div>
39-
);
40-
}
4121

42-
return null;
22+
return (
23+
<div className="left-container">
24+
<div className="column left">
25+
<TabPanel value={value} index={0}>
26+
<ElementsContainer />
27+
</TabPanel>
28+
<TabPanel value={value} index={1}>
29+
<ComponentsContainer />
30+
</TabPanel>
31+
<TabPanel value={value} index={2}>
32+
<TreeContainer />
33+
</TabPanel>
34+
<TabPanel value={value} index={3}>
35+
<RoomsContainer />
36+
</TabPanel>
37+
</div>
38+
</div>
39+
);
4340
}
4441

4542
export default ContentArea;

‎app/src/components/left/DragDropPanel.tsx

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -38,71 +38,75 @@ const DragDropPanel = (props): JSX.Element => {
3838
return (
3939
<div className={`${!isDarkMode ? 'HTMLItems' : 'HTMLItemsDark'}`}>
4040
<div id="HTMLItemsTopHalf">
41-
<Grid id="HTMLItemsGrid">
42-
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
43-
HTML ELEMENTS
44-
</h3>
41+
<Grid
42+
container
43+
spacing={{ xs: 1, md: 1 }}
44+
columns={{ xs: 4, sm: 4, md: 4 }}
45+
sx={{ maxWidth: '200px' }}
46+
>
4547
{htmlTypesToRender.map((option) => {
4648
if (
4749
!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
4850
option.name
4951
)
5052
) {
5153
return (
52-
<HTMLItem
53-
name={option.name}
54-
key={`html-${option.name}`}
55-
id={option.id}
56-
Icon={option.icon}
57-
handleDelete={handleDelete}
58-
/>
59-
);
60-
}
61-
})}
62-
{state.projectType === 'Classic React' ? (
63-
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
64-
REACT ROUTER
65-
</h3>
66-
) : null}
67-
{htmlTypesToRender.map((option) => {
68-
if (
69-
(option.name === 'Switch' ||
70-
option.name === 'LinkTo' ||
71-
option.name === 'Route') &&
72-
state.projectType === 'Classic React'
73-
) {
74-
return (
75-
<HTMLItem
76-
name={option.name}
77-
key={`html-${option.name}`}
78-
id={option.id}
79-
Icon={option.icon}
80-
handleDelete={handleDelete}
81-
/>
82-
);
83-
}
84-
})}
85-
86-
{state.projectType === 'Next.js' ? (
87-
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>Next.js</h3>
88-
) : null}
89-
{htmlTypesToRender.map((option) => {
90-
if (
91-
option.framework === 'nextjs' &&
92-
state.projectType === 'Next.js'
93-
) {
94-
return (
95-
<HTMLItem
96-
name={option.name}
97-
key={`html-${option.name}`}
98-
id={option.id}
99-
Icon={option.icon}
100-
handleDelete={handleDelete}
101-
/>
54+
<Grid item xs={2} sm={2} md={2} key={option.name}>
55+
<HTMLItem
56+
name={option.name}
57+
key={`html-${option.name}`}
58+
id={option.id}
59+
Icon={option.icon}
60+
handleDelete={handleDelete}
61+
/>
62+
</Grid>
10263
);
10364
}
10465
})}
10566
</Grid>
67+
{state.projectType === 'Classic React' ? (
68+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
69+
REACT ROUTER
70+
</h3>
71+
) : null}
72+
{htmlTypesToRender.map((option) => {
73+
if (
74+
(option.name === 'Switch' ||
75+
option.name === 'LinkTo' ||
76+
option.name === 'Route') &&
77+
state.projectType === 'Classic React'
78+
) {
79+
return (
80+
<HTMLItem
81+
name={option.name}
82+
key={`html-${option.name}`}
83+
id={option.id}
84+
Icon={option.icon}
85+
handleDelete={handleDelete}
86+
/>
87+
);
88+
}
89+
})}
90+
91+
{state.projectType === 'Next.js' ? (
92+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>Next.js</h3>
93+
) : null}
94+
{htmlTypesToRender.map((option) => {
95+
if (
96+
option.framework === 'nextjs' &&
97+
state.projectType === 'Next.js'
98+
) {
99+
return (
100+
<HTMLItem
101+
name={option.name}
102+
key={`html-${option.name}`}
103+
id={option.id}
104+
Icon={option.icon}
105+
handleDelete={handleDelete}
106+
/>
107+
);
108+
}
109+
})}
106110
</div>
107111
</div>
108112
);

‎app/src/components/left/Sidebar.tsx

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,63 @@
1-
import { useHistory, useLocation } from 'react-router-dom';
1+
import { Tab, Tabs } from '@mui/material';
22

33
import AddBoxIcon from '@mui/icons-material/AddBox';
4-
import NotificationsIcon from '@mui/icons-material/Notifications';
5-
import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
6-
import ProfileIcon from '@mui/icons-material/Person';
4+
import { IoMdCube } from 'react-icons/io';
5+
import LanIcon from '@mui/icons-material/Lan';
6+
import PeopleIcon from '@mui/icons-material/People';
77
import React from 'react';
8-
import SettingsIcon from '@mui/icons-material/Settings';
98

10-
const Sidebar: React.FC = () => {
11-
const history = useHistory();
12-
const location = useLocation();
13-
14-
const navigate = (path: string) => {
15-
if (location.pathname === path) {
16-
history.push(path, { hideContent: true });
17-
} else {
18-
history.push(path, { hideContent: false });
19-
}
20-
};
9+
interface SidebarProps {
10+
value: number | null;
11+
setValue: React.Dispatch<React.SetStateAction<number | null>>;
12+
}
2113

14+
const Sidebar: React.FC<SidebarProps> = ({ value, setValue }) => {
2215
return (
23-
<div
24-
style={{
25-
width: '65px',
16+
<Tabs
17+
orientation="vertical"
18+
variant="scrollable"
19+
value={value}
20+
onChange={(_, newValue) => {
21+
setValue(value === newValue ? null : newValue);
22+
}}
23+
TabIndicatorProps={{
24+
style: {
25+
backgroundColor: 'red'
26+
}
27+
}}
28+
sx={{
2629
display: 'flex',
2730
flexDirection: 'column',
2831
alignItems: 'center',
2932
justifyContent: 'top',
30-
position: 'relative',
31-
height: '100vh',
33+
paddingTop: '15px',
34+
gap: '50px',
35+
width: 67,
3236
background: '#151515',
33-
zIndex: 9999
37+
height: '100vh'
3438
}}
3539
>
36-
<AddBoxIcon
37-
style={{ margin: '10px', color: 'white' }}
38-
onClick={() => navigate('/elements')}
40+
<Tab
41+
sx={{ '&.Mui-selected': { color: 'red' } }}
42+
icon={<AddBoxIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
43+
value={0}
3944
/>
40-
<SettingsIcon
41-
style={{ margin: '10px', color: 'white' }}
42-
onClick={() => navigate('/reuseable')}
45+
<Tab
46+
sx={{ '&.Mui-selected': { color: 'red' } }}
47+
icon={<IoMdCube style={{ color: '#C6C6C6', fontSize: '33px' }} />}
48+
value={1}
4349
/>
44-
<ProfileIcon
45-
style={{ margin: '10px', color: 'white' }}
46-
onClick={() => navigate('/component-tree')}
50+
<Tab
51+
sx={{ '&.Mui-selected': { color: 'red' } }}
52+
icon={<LanIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
53+
value={2}
4754
/>
48-
<NotificationsIcon
49-
style={{ margin: '10px', color: 'white' }}
50-
onClick={() => navigate('/rooms')}
55+
<Tab
56+
sx={{ '&.Mui-selected': { color: 'red' } }}
57+
icon={<PeopleIcon sx={{ color: '#C6C6C6', fontSize: '36px' }} />}
58+
value={3}
5159
/>
52-
</div>
60+
</Tabs>
5361
);
5462
};
5563

‎app/src/containers/LeftContainer.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import React, { useState } from 'react';
2+
13
import ContentArea from '../components/left/ContentArea';
2-
import React from 'react';
34
import { BrowserRouter as Router } from 'react-router-dom';
45
import Sidebar from '../components/left/Sidebar';
56

67
function App() {
8+
const [value, setValue] = useState<number | null>(null);
9+
710
return (
8-
<Router>
9-
<Sidebar />
10-
<ContentArea />
11-
</Router>
11+
<div style={{ display: 'flex' }}>
12+
<Sidebar value={value} setValue={setValue} />
13+
<ContentArea value={value} />
14+
</div>
1215
);
1316
}
1417

0 commit comments

Comments
 (0)