Skip to content

Commit e579953

Browse files
martins5225martins5225
committed
add side bar ui
1 parent 23aed40 commit e579953

File tree

8 files changed

+188
-57
lines changed

8 files changed

+188
-57
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const ComponentsContainer = () => {
4+
return <div>ComponentsContainer</div>;
5+
};
6+
7+
export default ComponentsContainer;

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Route, Switch, useLocation } from 'react-router-dom';
2+
import { useDispatch, useSelector } from 'react-redux';
3+
4+
import ComponentsContainer from './ComponentsContainer';
5+
import ElementsContainer from './ElementsContainer';
6+
import React from 'react';
7+
import RoomsContainer from './RoomsContainer';
8+
import TreeContainer from './TreeContainer';
9+
10+
function ContentArea() {
11+
const { contextParam, style } = useSelector((store) => ({
12+
contextParam: store.contextSlice,
13+
style: store.styleSlice
14+
}));
15+
const dispatch = useDispatch();
16+
17+
const location = useLocation<{ hideContent: boolean }>();
18+
19+
// If the hideContent flag is true, don't render any content
20+
if (location.state?.hideContent) {
21+
return null;
22+
}
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+
}
41+
42+
return null;
43+
}
44+
45+
export default ContentArea;

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Drawer, List, ListItem, ListItemIcon } from '@mui/material';
2+
import React, { useCallback, useEffect } from 'react';
3+
import { useDispatch, useSelector } from 'react-redux';
4+
5+
import ComponentDrag from './ComponentDrag';
6+
import DragDropPanel from './DragDropPanel';
7+
import FolderIcon from '@mui/icons-material/Folder';
8+
import Grid from '@mui/material/Grid';
9+
import SettingsIcon from '@mui/icons-material/Settings';
10+
import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
11+
12+
// Left-hand portion of the app, where component options are displayed
13+
const ElementsContainer = (props): JSX.Element => {
14+
const [selectedTab, setSelectedTab] = React.useState('files');
15+
16+
const { contextParam, style } = useSelector((store) => ({
17+
contextParam: store.contextSlice,
18+
style: store.styleSlice
19+
}));
20+
const dispatch = useDispatch();
21+
22+
const handleDelete = () => {
23+
dispatch(deleteChild({ id: {}, contextParam: contextParam }));
24+
};
25+
const keyBindedFunc = useCallback((e) => {
26+
if (
27+
e.key === 'Backspace' &&
28+
e.target.tagName !== 'TEXTAREA' &&
29+
e.target.tagName !== 'INPUT'
30+
)
31+
handleDelete();
32+
}, []);
33+
useEffect(() => {
34+
document.addEventListener('keydown', keyBindedFunc);
35+
return () => {
36+
document.removeEventListener('keydown', keyBindedFunc);
37+
};
38+
}, []);
39+
40+
return (
41+
<Grid container direction="column" alignItems="center">
42+
<h4>Drag and Drop</h4>
43+
<DragDropPanel />
44+
<div id={'CompBottomHalf'}>
45+
<ComponentDrag isThemeLight={props.isThemeLight} />
46+
</div>
47+
</Grid>
48+
);
49+
};
50+
51+
export default ElementsContainer;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const RoomsContainer = () => {
4+
return <div>RoomsContainer</div>;
5+
};
6+
7+
export default RoomsContainer;

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { useHistory, useLocation } from 'react-router-dom';
2+
3+
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';
7+
import React from 'react';
8+
import SettingsIcon from '@mui/icons-material/Settings';
9+
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+
};
21+
22+
return (
23+
<div
24+
style={{
25+
width: '65px',
26+
display: 'flex',
27+
flexDirection: 'column',
28+
alignItems: 'center',
29+
justifyContent: 'top',
30+
position: 'relative',
31+
height: '100vh',
32+
background: '#151515',
33+
zIndex: 9999
34+
}}
35+
>
36+
<AddBoxIcon
37+
style={{ margin: '10px', color: 'white' }}
38+
onClick={() => navigate('/elements')}
39+
/>
40+
<SettingsIcon
41+
style={{ margin: '10px', color: 'white' }}
42+
onClick={() => navigate('/reuseable')}
43+
/>
44+
<ProfileIcon
45+
style={{ margin: '10px', color: 'white' }}
46+
onClick={() => navigate('/component-tree')}
47+
/>
48+
<NotificationsIcon
49+
style={{ margin: '10px', color: 'white' }}
50+
onClick={() => navigate('/rooms')}
51+
/>
52+
</div>
53+
);
54+
};
55+
56+
export default Sidebar;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const TreeContainer = () => {
4+
return <div>TreeContainer</div>;
5+
};
6+
7+
export default TreeContainer;

‎app/src/containers/LeftContainer.tsx

Lines changed: 11 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,15 @@
1-
import { Drawer, List, ListItem, ListItemIcon } from '@mui/material';
2-
import React, { useCallback, useEffect } from 'react';
3-
import { useDispatch, useSelector } from 'react-redux';
4-
5-
import ComponentDrag from '../components/left/ComponentDrag';
6-
import DragDropPanel from '../components/left/DragDropPanel';
7-
import FolderIcon from '@mui/icons-material/Folder';
8-
import Grid from '@mui/material/Grid';
9-
import SettingsIcon from '@mui/icons-material/Settings';
10-
import { deleteChild } from '../redux/reducers/slice/appStateSlice';
11-
12-
// Left-hand portion of the app, where component options are displayed
13-
const LeftContainer = (props): JSX.Element => {
14-
const [selectedTab, setSelectedTab] = React.useState('files');
15-
16-
const { contextParam, style } = useSelector((store) => ({
17-
contextParam: store.contextSlice,
18-
style: store.styleSlice
19-
}));
20-
const dispatch = useDispatch();
21-
22-
const handleDelete = () => {
23-
dispatch(deleteChild({ id: {}, contextParam: contextParam }));
24-
};
25-
const keyBindedFunc = useCallback((e) => {
26-
if (
27-
e.key === 'Backspace' &&
28-
e.target.tagName !== 'TEXTAREA' &&
29-
e.target.tagName !== 'INPUT'
30-
)
31-
handleDelete();
32-
}, []);
33-
useEffect(() => {
34-
document.addEventListener('keydown', keyBindedFunc);
35-
return () => {
36-
document.removeEventListener('keydown', keyBindedFunc);
37-
};
38-
}, []);
1+
import ContentArea from '../components/left/ContentArea';
2+
import React from 'react';
3+
import { BrowserRouter as Router } from 'react-router-dom';
4+
import Sidebar from '../components/left/Sidebar';
395

6+
function App() {
407
return (
41-
<div className="left-container">
42-
<div className="column left" style={style.style}>
43-
<Grid container direction="column" alignItems="center">
44-
<h4>Drag and Drop</h4>
45-
<DragDropPanel />
46-
<div id={'CompBottomHalf'}>
47-
<ComponentDrag isThemeLight={props.isThemeLight} />
48-
</div>
49-
</Grid>
50-
</div>
51-
{/* <div className="left-indicator">
52-
<span className="material-symbols-outlined">eject</span>
53-
</div> */}
54-
</div>
8+
<Router>
9+
<Sidebar />
10+
<ContentArea />
11+
</Router>
5512
);
56-
};
13+
}
5714

58-
export default LeftContainer;
15+
export default App;

‎app/src/public/styles/style.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ header {
9494

9595
.column {
9696
background-color: #151515;
97+
color: white;
9798
}
9899

99100
/*
@@ -132,14 +133,13 @@ span.material-symbols-outlined {
132133
display: flex;
133134
height: 100%;
134135
width: 280px;
135-
margin-left: 80px;
136136
min-width: 225px;
137137
flex-direction: column;
138138
align-content: center;
139139
position: relative;
140140
overflow-x: hidden;
141-
border-right: solid black 3px;
142-
border-top: solid gray 2px;
141+
/* border-right: solid black 3px; */
142+
border: solid gray 1px;
143143
}
144144

145145

@@ -581,6 +581,7 @@ NAVBAR
581581
justify-content: space-between;
582582
align-items: center;
583583
z-index: 9999;
584+
border: solid gray 1px;
584585
}
585586

586587
.main-logo {

0 commit comments

Comments
 (0)