AndrewTrieu/chathive
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navbar

Browse Source
This commit is contained in:
Andrew Trieu
2023-07-14 12:51:49 +03:00
parent fb0a10ab49
commit e96b6a8d62
2 changed files with 185 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -16,3 +16,4 @@ Table:
| 12.07.2023 | Add mock assets and initialize frontend | 3 | | 12.07.2023 | Add mock assets and initialize frontend | 3 |
| 13.07.2023 | Setup frontend | 6 | | 13.07.2023 | Setup frontend | 6 |
| 13.07.2023 | Theme and styling | 10 | | 13.07.2023 | Theme and styling | 10 |
| 14.07.2023 | Navbar | 10 |

185
client/src/scenes/navbar/index.jsx
View File

@@ -1,7 +1,188 @@
import { useState } from "react";
import {
Box,
IconButton,
InputBase,
Typography,
Select,
MenuItem,
FormControl,
useTheme,
useMediaQuery,
} from "@mui/material";
import {
Search,
Message,
DarkMode,
LightMode,
Notifications,
Menu,
Help,
Close,
} from "@mui/icons-material";
import { useDispatch, useSelector } from "react-redux";
import { setMode, setLogout } from "state";
import { useNavigate } from "react-router-dom";
import FlexBetween from "components/FlexBetween";
const Navbar = () => { const Navbar = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const dispatch = useDispatch();
const navigate = useNavigate();
const user = useSelector((state) => state.user);
const isNotMobile = useMediaQuery("(min-width: 1000px)");
const theme = useTheme();
const neutralLight = theme.palette.neutral.light;
const dark = theme.palette.neutral.dark;
const background = theme.palette.background.default;
const primaryLight = theme.palette.primary.light;
const alt = theme.palette.background.alt;
const userName = `${user.firstName} ${user.lastName}`;
return ( return (
<div>navbar</div> <FlexBetween padding="1rem 6%" backgroundColor={alt}>
) <FlexBetween gap="1.75rem">
<Typography
fontWeight="bold"
fontSize="clamp(1rem, 2rem, 2.25rem"
color="primary"
onClick={() => navigate("/home")}
sx={{
"&:hover": {
color: primaryLight,
cursor: "pointer",
},
}}
>
ChatHive
</Typography>
{isNotMobile && (
<FlexBetween
backgroundColor={neutralLight}
borderRadius="9px"
gap="3rem"
padding="0.1rem 1.5rem"
>
<InputBase placeholder="Search" />
<IconButton>
<Search />
</IconButton>
</FlexBetween>
)}
</FlexBetween>
{/* Desktop */}
{isNotMobile ? (
<FlexBetween gap="2rem">
<IconButton onClick={() => dispatch(setMode())}>
{theme.palette.mode === "dark" ? (
<DarkMode sx={{ fontSize: "25px" }} />
) : (
<LightMode sx={{ color: dark, fontSize: "25px" }} />
)}
</IconButton>
<Message sx={{ fontSize: "25px" }} />
<Notifications sx={{ fontSize: "25px" }} />
<Help sx={{ fontSize: "25px" }} />
<FormControl variant="standard" value={userName}>
<Select
value={userName}
sx={{
backgroundColor: neutralLight,
width: "150px",
borderRadius: "0.25rem",
p: "0.25rem 1rem",
"& .MuiSvgIcon-root": {
pr: "0.25rem",
width: "3rem",
},
"& .MuiSelect-select:focus": {
backgroundColor: neutralLight,
},
}}
input={<InputBase />}
>
<MenuItem value={userName}>
<Typography>{userName}</Typography>
</MenuItem>
<MenuItem onClick={() => dispatch(setLogout())}>Log out</MenuItem>
</Select>
</FormControl>
</FlexBetween>
) : (
<IconButton onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
<Menu />
</IconButton>
)}
{/* Mobile */}
{!isNotMobile && isMobileMenuOpen && (
<Box
position="fixed"
right="0"
bottom="0"
height="100%"
zIndex="100"
maxWidth="500px"
minWidth="300px"
backgroundColor={background}
>
{/* Close button */}
<Box display="flex" justifyContent="flex-end" padding="1rem">
<IconButton onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
<Close />
</IconButton>
</Box>
{/* Menu items */}
<FlexBetween
display="flex"
flexDirection="column"
justifyContent="center"
alignItems="center"
gap="2rem"
>
<IconButton onClick={() => dispatch(setMode())}>
{theme.palette.mode === "dark" ? (
<DarkMode sx={{ fontSize: "25px" }} />
) : (
<LightMode sx={{ color: dark, fontSize: "25px" }} />
)}
</IconButton>
<Message sx={{ fontSize: "25px" }} />
<Notifications sx={{ fontSize: "25px" }} />
<Help sx={{ fontSize: "25px" }} />
<FormControl variant="standard" value={userName}>
<Select
value={userName}
sx={{
backgroundColor: neutralLight,
width: "150px",
borderRadius: "0.25rem",
p: "0.25rem 1rem",
"& .MuiSvgIcon-root": {
pr: "0.25rem",
width: "3rem",
},
"& .MuiSelect-select:focus": {
backgroundColor: neutralLight,
},
}}
input={<InputBase />}
>
<MenuItem value={userName}>
<Typography>{userName}</Typography>
</MenuItem>
<MenuItem onClick={() => dispatch(setLogout())}>
Log out
</MenuItem>
</Select>
</FormControl>
</FlexBetween>
</Box>
)}
</FlexBetween>
);
}; };
export default Navbar; export default Navbar;