Skip to content

Commit f2ac536

Browse files
liamrohliamroh
authored
Merge pull request #15 from oslabs-beta/victor/sidebar
Merge branch 'dev' into victor/sidebar
2 parents 4b1f14a + 5f18d78 commit f2ac536

File tree

12 files changed

+229
-164
lines changed

12 files changed

+229
-164
lines changed

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

Lines changed: 29 additions & 32 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+
const ContentArea: React.FC<{ value: number | null }> = ({ value }) => {
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;
43-
}
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+
);
40+
};
4441

4542
export default ContentArea;

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

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,46 @@ 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+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
42+
HTML Elements
43+
</h3>
44+
<Grid
45+
container
46+
spacing={{ xs: 0.5, md: 0.5 }}
47+
columns={{ xs: 4, sm: 4, md: 4 }}
48+
justifyContent="center"
49+
>
4550
{htmlTypesToRender.map((option) => {
4651
if (
4752
!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
4853
option.name
4954
)
5055
) {
5156
return (
52-
<HTMLItem
53-
name={option.name}
54-
key={`html-${option.name}`}
55-
id={option.id}
56-
Icon={option.icon}
57-
handleDelete={handleDelete}
58-
/>
57+
<Grid item xs={2} sm={2} md={2} key={option.name}>
58+
<HTMLItem
59+
name={option.name}
60+
key={`html-${option.name}`}
61+
id={option.id}
62+
Icon={option.icon}
63+
handleDelete={handleDelete}
64+
/>
65+
</Grid>
5966
);
6067
}
6168
})}
62-
{state.projectType === 'Classic React' ? (
63-
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
64-
REACT ROUTER
65-
</h3>
66-
) : null}
69+
</Grid>
70+
{state.projectType === 'Classic React' ? (
71+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
72+
React Router
73+
</h3>
74+
) : null}
75+
<Grid
76+
container
77+
spacing={{ xs: 0.5, md: 0.5 }}
78+
columns={{ xs: 4, sm: 4, md: 4 }}
79+
justifyContent="center"
80+
>
6781
{htmlTypesToRender.map((option) => {
6882
if (
6983
(option.name === 'Switch' ||
@@ -72,37 +86,39 @@ const DragDropPanel = (props): JSX.Element => {
7286
state.projectType === 'Classic React'
7387
) {
7488
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-
/>
89+
<Grid item xs={2} sm={2} md={2}>
90+
<HTMLItem
91+
name={option.name}
92+
key={`html-${option.name}`}
93+
id={option.id}
94+
Icon={option.icon}
95+
handleDelete={handleDelete}
96+
/>
97+
</Grid>
10298
);
10399
}
104100
})}
105101
</Grid>
102+
103+
{state.projectType === 'Next.js' ? (
104+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>Next.js</h3>
105+
) : null}
106+
{htmlTypesToRender.map((option) => {
107+
if (
108+
option.framework === 'nextjs' &&
109+
state.projectType === 'Next.js'
110+
) {
111+
return (
112+
<HTMLItem
113+
name={option.name}
114+
key={`html-${option.name}`}
115+
id={option.id}
116+
Icon={option.icon}
117+
handleDelete={handleDelete}
118+
/>
119+
);
120+
}
121+
})}
106122
</div>
107123
</div>
108124
);

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Drawer, List, ListItem, ListItemIcon } from '@mui/material';
1+
import { Box, Drawer, List, ListItem, ListItemIcon } from '@mui/material';
22
import React, { useCallback, useEffect } from 'react';
33
import { useDispatch, useSelector } from 'react-redux';
44

@@ -38,13 +38,22 @@ const ElementsContainer = (props): JSX.Element => {
3838
}, []);
3939

4040
return (
41-
<Grid container direction="column" alignItems="center">
41+
<Box
42+
sx={{
43+
display: 'flex',
44+
flexDirection: 'column',
45+
alignItems: 'center',
46+
justifyContent: 'top',
47+
color: '#ffffff',
48+
textAlign: 'center'
49+
}}
50+
>
4251
<h4>Drag and Drop</h4>
4352
<DragDropPanel />
4453
<div id={'CompBottomHalf'}>
4554
<ComponentDrag isThemeLight={props.isThemeLight} />
4655
</div>
47-
</Grid>
56+
</Box>
4857
);
4958
};
5059

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import React, { useState, useCallback, useEffect } from 'react';
1+
import { Button, InputLabel } from '@mui/material';
2+
import React, { useCallback, useEffect, useState } from 'react';
23
import { useDispatch, useSelector } from 'react-redux';
4+
5+
import { BorderColor } from '@mui/icons-material';
6+
import { RootState } from '../../redux/store';
7+
import TextField from '@mui/material/TextField';
38
import { addElement } from '../../redux/reducers/slice/appStateSlice';
49
import makeStyles from '@mui/styles/makeStyles';
5-
import {
6-
Button,
7-
InputLabel
8-
} from '@mui/material';
9-
import TextField from '@mui/material/TextField';
10-
import { RootState } from '../../redux/store';
11-
import { BorderColor } from '@mui/icons-material';
1210

1311
/*
1412
DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -31,8 +29,10 @@ const HTMLPanel = (props): JSX.Element => {
3129
const [name, setName] = useState('');
3230
const [errorMsg, setErrorMsg] = useState('');
3331
const [errorStatus, setErrorStatus] = useState(false);
34-
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
35-
const state = useSelector((store:RootState) => store.appState);
32+
const isDarkMode = useSelector(
33+
(store: RootState) => store.darkMode.isDarkMode
34+
);
35+
const state = useSelector((store: RootState) => store.appState);
3636
const dispatch = useDispatch();
3737
let startingID = 0;
3838
state.HTMLTypes.forEach((element) => {
@@ -339,7 +339,7 @@ const useStyles = makeStyles({
339339
border: '1px solid #186BB4'
340340
},
341341
lightThemeFontColor: {
342-
color: 'white',
342+
color: '#155084',
343343
'& .MuiInputBase-root': {
344344
color: 'rgba (0, 0, 0, 0.54)'
345345
}

‎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: '#4A4A4A'
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

0 commit comments

Comments
 (0)