Skip to content

Commit 9be4c2c

Browse files
AhnafKhvnAhnafKhvn
committed
Worked on NavBar/export
1 parent 2937578 commit 9be4c2c

File tree

4 files changed

+158
-41
lines changed

4 files changed

+158
-41
lines changed

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

Lines changed: 61 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,71 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import Avatar from '@mui/material/Avatar';
3-
//commenting out the line below breaks the app
43
import logo from '../../public/icons/win/logo.png';
5-
import NavbarDropDown from './NavBarButtons';
4+
import NewExportButton from './NewExportButton';
65
import { useSelector } from 'react-redux';
76
import { RootState } from '../../redux/store';
7+
import Button from '@mui/material/Button';
8+
import MoreVertIcon from '@mui/icons-material/MoreVert';
9+
import NavBarButtons from './NavBarButtons';
810

11+
const NavBar = () => {
12+
const [dropMenu, setDropMenu] = useState(false);
13+
const isDarkMode = useSelector((state: RootState) => state.darkMode.isDarkMode);
914

10-
const NavBar = (props) => {
11-
12-
// for dropdown navbar
13-
const [dropMenu, setDropMenu] = React.useState(false);
14-
const isDarkMode = useSelector((state:RootState)=>state.darkMode.isDarkMode)
15+
const buttonContainerStyle = {
16+
display: 'flex',
17+
alignItems: 'center',
18+
justifyContent: 'flex-start',
19+
};
20+
21+
const buttonStyle = {
22+
backgroundColor: '#333',
23+
border: 'none',
24+
color: isDarkMode ? 'lightgray' : 'white',
25+
fontSize: '12px',
26+
padding: '8px 12px',
27+
cursor: 'pointer',
28+
marginRight: '10px',
29+
marginLeft: '5px',
30+
borderRadius: '4px',
31+
};
32+
33+
const moreVertButtonStyle = {
34+
backgroundColor: '#333',
35+
border: '1px solid #333',
36+
padding: '0',
37+
cursor: 'pointer',
38+
display: 'flex',
39+
alignItems: 'center',
40+
justifyContent: 'flex-start',
41+
borderRadius: '4px',
42+
width: '30px',
43+
minWidth: '20px',
44+
marginLeft: '0px',
45+
marginRight: '10px',
46+
};
1547

1648
return (
17-
<nav className="main-navbar" style={isDarkMode ? {backgroundColor: '#013365'} : {backgroundColor: 'white'}}>
18-
<div className="main-logo">
19-
<Avatar src={logo}></Avatar>
20-
<h1 style={isDarkMode ? {color: 'white'} : {color: '#013365'}}>ReacType</h1>
21-
</div>
22-
<div onMouseLeave={()=>setDropMenu(false)}>
23-
<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"
24-
onMouseOver={()=>setDropMenu(true)}>
25-
<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"/>
26-
</svg>
27-
<NavbarDropDown dropMenu={dropMenu}></NavbarDropDown>
28-
</div>
29-
</nav>
30-
)
31-
}
49+
<nav className="main-navbar" style={isDarkMode ? { backgroundColor: '#013365' } : { backgroundColor: 'white' }}>
50+
<div className="main-logo">
51+
<Avatar src={logo}></Avatar>
52+
<h1 style={isDarkMode ? { color: 'white' } : { color: '#013365' }}>ReacType</h1>
53+
</div>
54+
<div style={buttonContainerStyle}>
55+
<button style={buttonStyle}>Share</button>
56+
<NewExportButton />
57+
<Button
58+
style={moreVertButtonStyle}
59+
variant="contained"
60+
color="primary"
61+
onClick={() => setDropMenu((prevDropMenu) => !prevDropMenu)}
62+
>
63+
<MoreVertIcon style={{ color: 'white' }} />
64+
</Button>
65+
<NavBarButtons dropMenu={dropMenu} setDropMenu={setDropMenu} style={{ color: 'white' }} />
66+
</div>
67+
</nav>
68+
);
69+
};
3270

3371
export default NavBar;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@ function navbarDropDown(props) {
240240

241241
const handleClose = () => {
242242
setAnchorEl(null);
243+
props.setDropMenu(false);
243244
};
244245

245246
React.useEffect(() => {

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, { useState, useCallback, useEffect } from 'react';
2+
import List from '@mui/material/List';
3+
import ListItem from '@mui/material/ListItem';
4+
import ListItemText from '@mui/material/ListItemText';
5+
import createModal from '../../components/right/createModal';
6+
import zipFiles from '../../helperFunctions/zipFiles'; // Import your zipFiles function
7+
import { useSelector } from 'react-redux';
8+
import { RootState } from '../../redux/store';
9+
10+
export default function NewExportButton() {
11+
const [modal, setModal] = useState(null);
12+
const state = useSelector((store: RootState) => store.appState);
13+
14+
const genOptions: string[] = ['Export components'];
15+
16+
const closeModal = () => setModal('');
17+
18+
const buttonStyle = {
19+
backgroundColor: '#333',
20+
border: 'none',
21+
color: 'white',
22+
fontSize: '12px',
23+
padding: '8px 12px',
24+
cursor: 'pointer',
25+
marginRight: '10px',
26+
borderRadius: '4px',
27+
};
28+
29+
const showGenerateAppModal = () => {
30+
const children = (
31+
<List className="export-preference">
32+
{genOptions.map((option: string, i: number) => (
33+
<ListItem
34+
id="export-modal"
35+
key={i}
36+
onClick={() => chooseGenOptions()}
37+
style={{
38+
border: '1px solid #3f51b5',
39+
marginBottom: '2%',
40+
marginTop: '5%',
41+
}}
42+
>
43+
<ListItemText primary={option} style={{ textAlign: 'center' }} />
44+
</ListItem>
45+
))}
46+
</List>
47+
);
48+
49+
const chooseGenOptions = () => {
50+
zipFiles(state);
51+
closeModal();
52+
};
53+
54+
setModal(
55+
createModal({
56+
closeModal,
57+
children,
58+
message: 'Click to download in zip file:',
59+
primBtnLabel: null,
60+
primBtnAction: null,
61+
secBtnAction: null,
62+
secBtnLabel: null,
63+
open: true,
64+
})
65+
);
66+
};
67+
68+
const exportKeyBind = useCallback((e) => {
69+
if ((e.key === 'e' && e.metaKey) || (e.key === 'e' && e.ctrlKey)) {
70+
showGenerateAppModal();
71+
}
72+
}, []);
73+
74+
useEffect(() => {
75+
document.addEventListener('keydown', exportKeyBind);
76+
return () => {
77+
document.removeEventListener('keydown', exportKeyBind);
78+
};
79+
}, []);
80+
81+
return (
82+
<div>
83+
<button style={buttonStyle} onClick={showGenerateAppModal}>
84+
&lt; &gt; Export
85+
</button>
86+
{modal}
87+
</div>
88+
);
89+
}

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

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,8 @@ span.material-symbols-outlined {
201201
#HTMLItem {
202202
transition: 0.3s;
203203
border: 2px solid black;
204-
border-radius: 4px;
204+
border-radius: 0;
205+
position: relative;
205206
}
206207

207208
#HTMLItem:hover {
@@ -576,28 +577,15 @@ NAVBAR
576577
cursor: pointer;
577578
}
578579

579-
.navbar-icon:hover {
580-
animation: spinningWheel 2s infinite;
581-
}
582-
583-
@keyframes spinningWheel {
584-
0% {
585-
transform: rotate(0deg)
586-
}
587-
588-
100% {
589-
transform: rotate(360deg)
590-
}
591-
}
592580

593581
.navDropDown {
594582
position: absolute;
595-
border: 1px solid black;
583+
border: 1px solid #555;
596584
width: 20vw;
597585
border-radius: 5px;
598586
right: 1vw;
599587
z-index: 10;
600-
background-color: white;
588+
background-color: rgba(0, 0, 0, 0.9);
601589
top: 45px;
602590
padding-top: 5px;
603591
padding-bottom: 5px;
@@ -611,7 +599,7 @@ NAVBAR
611599
.navDropDown button {
612600
width: 90%;
613601
margin: 3px 5%;
614-
background-color: #009ae6;
602+
background-color: #333333;
615603
color: white;
616604
padding-top: 5px;
617605
padding-bottom: 5px;
@@ -622,11 +610,12 @@ NAVBAR
622610

623611
.navDropDown p {
624612
margin: 3px 5%;
613+
color: whitesmoke
625614
}
626615

627616
.navDropDown button:hover {
628617
cursor: pointer;
629-
background-color: #007ab8
618+
background-color: #555
630619
}
631620

632621
.navDropDown button svg {

0 commit comments

Comments
 (0)