arch/dev-connect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added MaterialUI

Browse Source
This commit is contained in:
Malak
2024-08-18 14:42:24 +03:00
committed by QkoSad
parent 7cd63ec826
commit 78ba14cc98
24 changed files with 738 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Navbar.tsx
+111 -76
View File
@@ -1,4 +1,4 @@
import React from "react";
import React from "react";
import { Link } from "react-router-dom";
import { logOut } from "../../reducers/auth";
import { useAppDispatch, useAppSelector } from "../../utils/hooks";
@@ -15,14 +15,14 @@ import MenuItem from "@mui/material/MenuItem";
import MenuIcon from "@mui/icons-material/Menu";
import AdbIcon from "@mui/icons-material/Adb";
const linkStyle = { color: 'inherit', textDecoration: 'none' }
const linkStyle = { color: "inherit", textDecoration: "none" };
const Navbar = () => {
const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
const dispatch = useAppDispatch();
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
null,
null
);
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
@@ -30,74 +30,39 @@ const Navbar = () => {
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const authLinksSmall = [
(<MenuItem onClick={handleCloseNavMenu} key={1}>
<Link style={linkStyle} to={'/profiles'}>Developers</Link>
</MenuItem>),
(<MenuItem onClick={handleCloseNavMenu} key={2}>
<Link style={linkStyle} to={'/posts'}>Posts</Link>
</MenuItem>),
(<MenuItem onClick={handleCloseNavMenu} key={3}>
<Link style={linkStyle} to={'/profile'}>Profile</Link>
</MenuItem>),
(<MenuItem onClick={handleCloseNavMenu} key={4}>
<a style={linkStyle} onClick={() => dispatch(logOut())} href="#!">
<span>Logout</span>
</a>
</MenuItem>)]
const guestLinksSmall = [
(
<MenuItem onClick={handleCloseNavMenu} key={1}>
<Link style={linkStyle} to={'/profiles'}>Developers</Link>
</MenuItem>),
(<MenuItem onClick={handleCloseNavMenu} key={2}>
<Link style={linkStyle} to={'/register'}>Register</Link>
</MenuItem>),
(<MenuItem onClick={handleCloseNavMenu} key={3}>
<Link style={linkStyle} to={'/login'}>Login</Link>
</MenuItem>)]
const authLinksBig = [
(<Button key={1}
sx={{ my: 2, color: "white", display: "block" }}
>
<Link style={linkStyle} to={'/profiles'} >Developers</Link>
</Button>),
(<Button key={2}
sx={{ my: 2, color: "white", display: "block" }}
>
<Link style={linkStyle} to={'/posts'}>posts</Link>
</Button>),
(<Button
key={3} sx={{ my: 2, color: "white", display: "block" }}
>
<Link style={linkStyle} to={'/profile'}>Profile</Link>
</Button>
), (<Button
key={4} sx={{ my: 2, color: "white", display: "block" }}
>
<a style={linkStyle} onClick={() => dispatch(logOut())} href="#!">
<span>Logout</span>
</a>
</Button>
)]
const guestLinksBig = [
(<Button key={1}
sx={{ my: 2, color: "white", display: "block" }}
>
<Link style={linkStyle} to={'/profiles'} >Developers</Link>
</Button>),
(<Button key={2}
sx={{ my: 2, color: "white", display: "block" }}
>
<Link style={linkStyle} to={'/register'}>Register</Link>
</Button>),
(<Button key={3}
sx={{ my: 2, color: "white", display: "block" }}
>
<Link style={linkStyle} to={'/login'}>Login</Link>
</Button>)
const authLinks = [
{
id: 1,
to: "/profiles",
message: "Developers",
},
{
id: 2,
to: "/posts",
message: "Posts",
},
{
id: 3,
to: "/dashboard",
message: "Profile",
},
];
const guestLinks = [
{
id: 1,
to: "/profiles",
message: "Developers",
},
{
id: 2,
to: "/register",
message: "Register",
},
{
id: 3,
to: "/login",
message: "Login",
},
];
return (
@@ -110,7 +75,6 @@ const Navbar = () => {
<Typography
variant="h6"
noWrap
component="h6"
sx={{
mr: 2,
display: { xs: "none", md: "flex" },
@@ -120,8 +84,10 @@ const Navbar = () => {
color: "inherit",
textDecoration: "none",
}}
component={Link}
to="/posts"
>
<Link style={linkStyle} to={"/posts"}>DevConnect</Link>
DevConnect
</Typography>
{/* Small display menu*/}
<Box
@@ -160,7 +126,42 @@ const Navbar = () => {
display: { xs: "block", md: "none" },
}}
>
{isAuthenticated ? authLinksSmall.map(el => el) : guestLinksSmall.map(el => el)}
{isAuthenticated ? (
<>
{" "}
{authLinks.map((el) => (
<MenuItem
component={Link}
to={el.to}
onClick={handleCloseNavMenu}
key={el.id}
>
{el.message}
</MenuItem>
))}
<MenuItem onClick={handleCloseNavMenu} key={4}>
<a
style={linkStyle}
onClick={() => dispatch(logOut())}
href="#!"
>
Logout
</a>
</MenuItem>
,
</>
) : (
guestLinks.map((el) => (
<MenuItem
component={Link}
to={el.to}
onClick={handleCloseNavMenu}
key={el.id}
>
{el.message}
</MenuItem>
))
)}
</Menu>
</Box>
{/* Icon for small display */}
@@ -180,11 +181,45 @@ const Navbar = () => {
textDecoration: "none",
}}
>
<Link style={linkStyle} to={"/posts"}>DevConnect</Link>
<Link style={linkStyle} to={"/posts"}>
DevConnect
</Link>
</Typography>
{/* Menu bar for big display*/}
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
{isAuthenticated ? authLinksBig.map(el => el) : guestLinksBig.map(el => el)}
{isAuthenticated ? (
<>
{authLinks.map((el) => (
<Button
key={el.id}
sx={{ my: 2, color: "white", display: "block" }}
component={Link}
to={el.to}
>
{el.message}
</Button>
))}
<Button
key={4}
sx={{ my: 2, color: "white", display: "block" }}
onClick={() => dispatch(logOut())}
href="#!"
>
Logout
</Button>
</>
) : (
guestLinks.map((el) => (
<Button
key={el.id}
sx={{ my: 2, color: "white", display: "block" }}
component={Link}
to={el.to}
>
{el.message}
</Button>
))
)}
</Box>
</Toolbar>
</Container>