Skip to content

Commit 7a566cd

Browse files
liamrohliamroh
authored
Merge pull request #12 from oslabs-beta/Ahnafkhvn/Navbar
Ahnafkhvn/navbar
2 parents dc9cbbb + bf74fd9 commit 7a566cd

File tree

4 files changed

+149
-48
lines changed

4 files changed

+149
-48
lines changed

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

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,69 @@
1+
import React, { useState } from 'react';
12
import Avatar from '@mui/material/Avatar';
23
import NavbarDropDown from './NavBarButtons';
3-
import React from 'react';
44
import { RootState } from '../../redux/store';
5-
//commenting out the line below breaks the app
65
import logo from '../../public/icons/win/logo.png';
6+
import NewExportButton from './NewExportButton';
77
import { useSelector } from 'react-redux';
8+
import Button from '@mui/material/Button';
9+
import MoreVertIcon from '@mui/icons-material/MoreVert';
10+
import NavBarButtons from './NavBarButtons';
811

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

1649
return (
17-
<nav
18-
className="main-navbar"
19-
style={
20-
isDarkMode
21-
? { backgroundColor: '#013365' }
22-
: { backgroundColor: '#151515' }
23-
}
24-
>
50+
<nav className="main-navbar" style={isDarkMode ? { backgroundColor: '#013365' } : { backgroundColor: 'white' }}>
2551
<div className="main-logo">
2652
<Avatar src={logo}></Avatar>
27-
<h1 style={isDarkMode ? { color: '#C6C6C6' } : { color: '#C6C6C6' }}>
28-
ReacType
29-
</h1>
53+
<h1 style={isDarkMode ? { color: 'white' } : { color: '#013365' }}>ReacType</h1>
3054
</div>
31-
<div onMouseLeave={() => setDropMenu(false)}>
32-
<svg
33-
xmlns="http://www.w3.org/2000/svg"
34-
width="16"
35-
height="16"
36-
fill="currentColor"
37-
className="bi bi-gear-wide-connected navbar-icon"
38-
viewBox="0 0 16 16"
39-
onMouseOver={() => setDropMenu(true)}
55+
<div style={buttonContainerStyle}>
56+
<button style={buttonStyle}>Share</button>
57+
<NewExportButton />
58+
<Button
59+
style={moreVertButtonStyle}
60+
variant="contained"
61+
color="primary"
62+
onClick={() => setDropMenu((prevDropMenu) => !prevDropMenu)}
4063
>
41-
<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" />
42-
</svg>
43-
<NavbarDropDown dropMenu={dropMenu}></NavbarDropDown>
64+
<MoreVertIcon style={{ color: 'white' }} />
65+
</Button>
66+
<NavBarButtons dropMenu={dropMenu} setDropMenu={setDropMenu} style={{ color: 'white' }} />
4467
</div>
4568
</nav>
4669
);

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

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

253253
const handleClose = () => {
254254
setAnchorEl(null);
255+
props.setDropMenu(false);
255256
};
256257

257258
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: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -603,28 +603,15 @@ NAVBAR
603603
cursor: pointer;
604604
}
605605

606-
.navbar-icon:hover {
607-
animation: spinningWheel 2s infinite;
608-
}
609-
610-
@keyframes spinningWheel {
611-
0% {
612-
transform: rotate(0deg)
613-
}
614-
615-
100% {
616-
transform: rotate(360deg)
617-
}
618-
}
619606

620607
.navDropDown {
621608
position: absolute;
622-
border: 1px solid black;
609+
border: 1px solid #555;
623610
width: 20vw;
624611
border-radius: 5px;
625612
right: 1vw;
626613
z-index: 10;
627-
background-color: white;
614+
background-color: rgba(0, 0, 0, 0.9);
628615
top: 45px;
629616
padding-top: 5px;
630617
padding-bottom: 5px;
@@ -638,7 +625,7 @@ NAVBAR
638625
.navDropDown button {
639626
width: 90%;
640627
margin: 3px 5%;
641-
background-color: #009ae6;
628+
background-color: #333333;
642629
color: white;
643630
padding-top: 5px;
644631
padding-bottom: 5px;
@@ -649,11 +636,12 @@ NAVBAR
649636

650637
.navDropDown p {
651638
margin: 3px 5%;
639+
color: whitesmoke
652640
}
653641

654642
.navDropDown button:hover {
655643
cursor: pointer;
656-
background-color: #007ab8
644+
background-color: #555
657645
}
658646

659647
.navDropDown button svg {

0 commit comments

Comments
 (0)