Skip to content

Commit a83b613

Browse files
YohezeYoheze
committed
revamped navbar
1 parent 83d4d34 commit a83b613

File tree

7 files changed

+322
-305
lines changed

7 files changed

+322
-305
lines changed

‎app/src/components/login/SignIn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
327327
Continue as Guest
328328
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
329329
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
330-
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
330+
<path fillRule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
331331
</svg>
332332
</Button>
333333
<Grid container>

‎app/src/components/right/ExportButton.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,15 +104,12 @@ export default function ExportButton() {
104104
}, []);
105105
return (
106106
<div>
107-
<Button
108-
variant="contained"
109-
color="secondary"
110-
onClick={showGenerateAppModal}
111-
id="navbarButton"
112-
endIcon={<GetAppIcon />}
113-
>
114-
EXPORT
115-
</Button>
107+
<button onClick={showGenerateAppModal}>Export Project
108+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-download" viewBox="0 0 16 16">
109+
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
110+
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
111+
</svg>
112+
</button>
116113
{modal}
117114
</div>
118115
);

‎app/src/components/right/LoginButton.tsx

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,29 +24,20 @@ export default function LoginButton() {
2424
}
2525
if (state.isLoggedIn) {
2626
return (
27-
<Button
28-
id="navbarButton"
29-
variant="contained"
30-
color="secondary"
31-
className="navbarButton"
32-
style={{ minWidth: '102.11px' }}
33-
onClick={handleLogout}
34-
endIcon={<ExitToAppIcon />}
35-
>
36-
Log Out
37-
</Button>
27+
<button onClick={handleLogout}>Log out
28+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-box-arrow-right" viewBox="0 0 16 16">
29+
<path fillRule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
30+
<path fillRule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
31+
</svg>
32+
</button>
3833
);
3934
}
4035
return (
41-
<Button
42-
variant="contained"
43-
color="secondary"
44-
className="navbarButton"
45-
style={{ minWidth: '102.11px' }}
46-
onClick={handleLogout}
47-
endIcon={<ExitToAppIcon />}
48-
>
49-
Log In
50-
</Button>
36+
<button onClick={handleLogout}>Log in
37+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-box-arrow-right" viewBox="0 0 16 16">
38+
<path fillRule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
39+
<path fillRule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
40+
</svg>
41+
</button>
5142
);
5243
}

‎app/src/components/top/NavBar.tsx

Lines changed: 20 additions & 272 deletions
Original file line numberDiff line numberDiff line change
@@ -1,282 +1,30 @@
1-
import React, { useState, useContext } from 'react';
2-
import { Theme } from '@mui/material/styles';
3-
import withStyles from '@mui/styles/withStyles';
4-
import createStyles from '@mui/styles/createStyles';
5-
import makeStyles from '@mui/styles/makeStyles';
6-
import AppBar from '@mui/material/AppBar';
1+
import React from 'react';
72
import Avatar from '@mui/material/Avatar';
8-
import Brightness3Icon from '@mui/icons-material/Brightness3';
9-
import Brightness5Icon from '@mui/icons-material/Brightness5';
10-
import DashboardIcon from '@mui/icons-material/Dashboard';
11-
import Toolbar from '@mui/material/Toolbar';
12-
import Typography from '@mui/material/Typography';
13-
import Button from '@mui/material/Button';
14-
import DeleteIcon from '@mui/icons-material/Delete';
15-
import FilterListIcon from '@mui/icons-material/FilterList';
16-
import Menu from '@mui/material/Menu';
17-
import MenuItem from '@mui/material/MenuItem';
18-
import List from '@mui/material/List';
19-
import ListItem from '@mui/material/ListItem';
20-
import ListItemText from '@mui/material/ListItemText';
21-
import { Link } from 'react-router-dom';
22-
import LoginButton from '../right/LoginButton';
23-
import ExportButton from '../right/ExportButton';
24-
import SaveProjectButton from '../right/SaveProjectButton';
25-
import DeleteProjects from '../right/DeleteProjects';
26-
import ProjectsFolder from '../right/OpenProjects';
27-
import createModal from '../right/createModal';
283
import logo from '../../public/icons/win/logo.png';
29-
// Imports for redux toolkit usage
30-
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
31-
import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
32-
import { useSelector, useDispatch } from 'react-redux';
33-
import { setStyle } from '../../redux/reducers/slice/styleSlice'
34-
// NavBar text and button styling
35-
const useStyles = makeStyles((theme: Theme) =>
36-
createStyles({
37-
root: {
38-
flexGrow: 1,
39-
width: '100%'
40-
},
41-
menuButton: {
42-
marginRight: theme.spacing(1),
43-
color: 'white'
44-
},
45-
title: {
46-
flexGrow: 1,
47-
color: 'white'
48-
},
49-
manageProject: {
50-
display: 'flex',
51-
justifyContent: 'center'
52-
}
53-
})
54-
);
4+
import NavbarDropDown from './NavBarButtons';
5+
import { useSelector } from 'react-redux'
556

56-
// Drop down menu button for export
57-
const StyledMenu = withStyles({
58-
paper: {
59-
border: '1px solid #d3d4d5'
60-
}
61-
})(props => (
62-
<Menu
63-
elevation={0}
64-
// getContentAnchorEl={null}
65-
anchorOrigin={{
66-
vertical: 'bottom',
67-
horizontal: 'center'
68-
}}
69-
transformOrigin={{
70-
vertical: 'top',
71-
horizontal: 'center'
72-
}}
73-
{...props}
74-
/>
75-
));
76-
77-
const StyledMenuItem = withStyles(theme => ({
78-
root: {
79-
'&:focus': {
80-
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
81-
color: theme.palette.common.white
82-
}
83-
}
84-
}
85-
}))(MenuItem);
86-
87-
//export default function NavBar(props)
887
const NavBar = (props) => {
89-
const classes = useStyles();
90-
// const { style, setStyle } = useContext(styleContext);
91-
92-
// State for export menu button
93-
const [anchorEl, setAnchorEl] = React.useState(null);
94-
// State for clear canvas button
95-
const [modal, setModal] = useState(null);
96-
// const [state, dispatch] = useContext(StateContext);
97-
const dispatch = useDispatch();
98-
const { state, style, isDarkMode } = useSelector(store => ({
99-
state: store.appState,
100-
style: store.style,
101-
isDarkMode: store.darkMode.isDarkMode
8+
9+
// for dropdown navbar
10+
const [dropMenu, setDropMenu] = React.useState(false);
11+
const isDarkMode = useSelector(state=>state.darkMode.isDarkMode)
10212

103-
}));
104-
105-
//NEW DARK MODE
106-
const handleDarkModeToggle = () => {
107-
dispatch(toggleDarkMode());
108-
// Add your logic to update the style and theme based on darkMode
109-
isDarkMode ? dispatch(setStyle(null)) : dispatch(setStyle({ backgroundColor: '#21262c' }));
110-
props.setTheme(isDarkMode);
111-
};
112-
113-
const handleClick = event => {
114-
setAnchorEl(event.currentTarget);
115-
};
116-
const handleClose = () => {
117-
setAnchorEl(null);
118-
};
119-
// ---Clear canvas functionality---
120-
// Closes out the open modal
121-
const closeModal = () => setModal('');
122-
// Creates modal that asks if user wants to clear workspace
123-
// If user clears their workspace, then their components are removed from state and the modal is closed
124-
const clearWorkspace = () => {
125-
// Reset state for project to initial state
126-
const resetState = () => {
127-
dispatch(resetAllState());
128-
};
129-
// Set modal options
130-
const children = (
131-
<List className="export-preference">
132-
<ListItem
133-
key={'clear'}
134-
button
135-
onClick={resetState}
136-
style={{
137-
border: '1px solid #3f51b5',
138-
marginBottom: '2%',
139-
marginTop: '5%'
140-
}}
141-
>
142-
<ListItemText
143-
primary={'Yes, delete all project data'}
144-
style={{ textAlign: 'center' }}
145-
onClick={closeModal}
146-
/>
147-
</ListItem>
148-
</List>
149-
);
150-
// Create modal
151-
setModal(
152-
createModal({
153-
closeModal,
154-
children,
155-
message: 'Are you sure want to delete all data?',
156-
primBtnLabel: null,
157-
primBtnAction: null,
158-
secBtnAction: null,
159-
secBtnLabel: null,
160-
open: true
161-
})
162-
);
163-
};
16413
return (
165-
<div className={classes.root} style={style}>
166-
<AppBar position="static">
167-
<Toolbar>
168-
<Avatar src={logo}></Avatar>
169-
<Typography
170-
variant="h6"
171-
style={{
172-
marginLeft: '1rem',
173-
color: isDarkMode ? '#fff' : '#0d47a1'
174-
}}
175-
className={classes.title}
176-
>
177-
ReacType
178-
</Typography>
179-
<Link to="/tutorial" style={{ textDecoration: 'none' }} target='_blank'>
180-
<Button
181-
variant="contained"
182-
color="secondary"
183-
style={{ minWidth: '137.69px' }}
184-
className="navbarButton"
185-
id="navbarButton"
186-
>
187-
Tutorial
188-
</Button>
189-
</Link>
190-
{/* ==================================Dashboard Button================================================== */}
191-
{state.isLoggedIn ? (
192-
<Link to="/dashboard" style={{ textDecoration: 'none' }}>
193-
<Button
194-
variant="contained"
195-
color="secondary"
196-
style={{ minWidth: '137.69px' }}
197-
className="navbarButton"
198-
endIcon={<DashboardIcon />}
199-
id="navbarButton"
200-
>
201-
Dashboard
202-
</Button>
203-
</Link>
204-
) : (
205-
<span></span>
206-
)}
207-
{/* ==================================Clear Canvas Button================================================== */}
208-
<Button
209-
variant="contained"
210-
color="secondary"
211-
style={{ minWidth: '137.69px' }}
212-
onClick={clearWorkspace}
213-
className="navbarButton"
214-
id="navbarButton"
215-
endIcon={<DeleteIcon />}
216-
>
217-
Clear Canvas
218-
</Button>
219-
<ExportButton />
220-
<Button
221-
className="navbarButton"
222-
id="navbarButton"
223-
color="secondary"
224-
variant="contained"
225-
style={{ minWidth: '113.97px' }}
226-
endIcon={
227-
props.isThemeLight ? <Brightness3Icon /> : <Brightness5Icon />
228-
}
229-
onClick={handleDarkModeToggle}
230-
>
231-
{isDarkMode ? 'Light Mode' : 'Dark Mode'}
232-
</Button>
233-
{state.isLoggedIn ? ( // render Manage Project button/dropdown only if user is logged in
234-
<Button
235-
variant="contained"
236-
color="secondary"
237-
onClick={handleClick}
238-
className="navbarButton"
239-
id="navbarButton"
240-
endIcon={<FilterListIcon />}
241-
>
242-
MANAGE PROJECT
243-
</Button>
244-
) : (
245-
<span></span>
246-
)}
247-
<LoginButton />
248-
<StyledMenu // Dropdown menu connected to Manage Project Button
249-
id="customized-menu"
250-
anchorEl={anchorEl}
251-
keepMounted
252-
open={Boolean(anchorEl)}
253-
onClose={handleClose}
254-
>
255-
<StyledMenuItem
256-
id="navbarButton"
257-
className={classes.manageProject}
258-
onClick={handleClose}
259-
>
260-
<SaveProjectButton />
261-
</StyledMenuItem>
262-
<StyledMenuItem
263-
className={classes.manageProject}
264-
onClick={handleClose}
265-
>
266-
<ProjectsFolder />
267-
</StyledMenuItem>
268-
<StyledMenuItem
269-
className={classes.manageProject}
270-
onClick={handleClose}
271-
>
272-
<DeleteProjects />
273-
</StyledMenuItem>
274-
</StyledMenu>
275-
</Toolbar>
276-
</AppBar>
277-
{modal}
14+
<nav className="main-navbar" style={isDarkMode ? {backgroundColor: '#013365'} : {backgroundColor: 'white'}}>
15+
<div className="main-logo">
16+
<Avatar src={logo}></Avatar>
17+
<h1 style={isDarkMode ? {color: 'white'} : {color: '#013365'}}>ReacType</h1>
18+
</div>
19+
<div onMouseLeave={()=>setDropMenu(false)}>
20+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-gear-wide-connected navbar-icon" viewBox="0 0 16 16"
21+
onMouseOver={()=>setDropMenu(true)}>
22+
<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
23+
</svg>
24+
{dropMenu && <NavbarDropDown></NavbarDropDown>}
27825
</div>
279-
);
26+
</nav>
27+
)
28028
}
28129

28230
export default NavBar;

0 commit comments

Comments
 (0)