Skip to content

Commit 9d4dc8c

Browse files
aziemp66aziemp66
committed
Making Mobile Menu
1 parent a9e8979 commit 9d4dc8c

File tree

5 files changed

+7708
-7768
lines changed

5 files changed

+7708
-7768
lines changed

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<title>Srifoton 2022</title>
1313
</head>
1414
<body>
15-
<div id="mobile-nav"></div>
15+
<div id="mobile-menu"></div>
1616
<div id="root"></div>
1717
</body>
1818
</html>

‎src/Assets/Icons/hamburger-menu.svg

+5
Loading

‎src/Components/MobileMenu/MobileMenu.jsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { useContext } from "react";
2+
import { Link } from "react-router-dom";
3+
4+
import AuthContext from "../../Contexts/AuthContext";
5+
6+
const MobileMenu = ({ setShowMenu }) => {
7+
const authCtx = useContext(AuthContext);
8+
9+
return (
10+
<nav
11+
onClick={() => setShowMenu(false)}
12+
className="bg-[rgba(20,20,20,0.95)] z-20 fixed justify-center items-center w-full h-full flex gap-5 flex-col sm:hidden"
13+
>
14+
<Link className="text-red-primary font-bold text-center text-lg" to="/">
15+
Beranda
16+
</Link>
17+
<Link
18+
className="text-red-primary font-bold text-center text-lg"
19+
to="/competition"
20+
>
21+
Kompetisi
22+
</Link>
23+
<Link
24+
className="text-red-primary font-bold text-center text-lg"
25+
to="/team"
26+
>
27+
Tim
28+
</Link>
29+
<Link
30+
className="text-red-primary font-bold text-center text-lg"
31+
to="/settings"
32+
>
33+
Settings
34+
</Link>
35+
{authCtx.userData ? (
36+
<>
37+
<Link
38+
className="text-red-primary font-bold text-center text-lg"
39+
to="/settings"
40+
>
41+
{authCtx.userData.name}
42+
</Link>
43+
<p
44+
className="text-red-primary font-bold text-center text-lg"
45+
onClick={() => authCtx.logout()}
46+
>
47+
Logout
48+
</p>
49+
</>
50+
) : (
51+
<>
52+
<Link
53+
className="text-red-primary font-bold text-center text-lg"
54+
to="/"
55+
>
56+
Akun
57+
</Link>
58+
<Link
59+
className="text-red-primary font-bold text-center text-lg"
60+
to="/login"
61+
>
62+
Login
63+
</Link>
64+
</>
65+
)}
66+
</nav>
67+
);
68+
};
69+
70+
export default MobileMenu;

‎src/Components/Navbar/Navbar.jsx

+90-72
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,103 @@
11
import { Link } from "react-router-dom";
2-
import React, { useContext } from "react";
2+
import React, { useContext, useState } from "react";
3+
import ReactDOM from "react-dom";
4+
5+
import HamburgerMenu from "../../Assets/Icons/hamburger-menu.svg";
6+
import MobileMenu from "../MobileMenu/MobileMenu";
37

48
import AuthContext from "../../Contexts/AuthContext";
59

610
const Navbar = () => {
711
const authCtx = useContext(AuthContext);
12+
const [showMenu, setShowMenu] = useState(false);
813

914
return (
10-
<nav className="bg-black-light z-10 w-full py-2 flex flex-row items-center sticky top-0 justify-between shadow-md">
11-
<Link
12-
to="/"
13-
className="bg-red-primary block no-underline rounded-r-full w-fit pl-12 pr-6 py-2"
14-
>
15-
<img
16-
src="/background/headericon.png"
17-
className="h-[30px] w-auto"
18-
alt="icon"
19-
/>
20-
</Link>
21-
<div className="flex flex-row gap-12 pr-12 items-center">
22-
<div className="flex flex-row gap-5">
23-
<Link
24-
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
25-
to="/"
26-
>
27-
Beranda
28-
</Link>
29-
<Link
30-
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
31-
to="/competition"
32-
>
33-
Kompetisi
34-
</Link>
35-
<Link
36-
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
37-
to="/team"
38-
>
39-
Tim
40-
</Link>
41-
<Link
42-
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
43-
to="/settings"
44-
>
45-
Setting
46-
</Link>
15+
<>
16+
{showMenu &&
17+
ReactDOM.createPortal(
18+
<MobileMenu setShowMenu={setShowMenu} />,
19+
document.getElementById("mobile-menu")
20+
)}
21+
<nav className="bg-black-light z-10 w-full py-2 flex flex-row items-center sticky top-0 justify-between shadow-md">
22+
<div
23+
onClick={() => setShowMenu((prev) => !prev)}
24+
className="bg-red-primary no-underline cursor-pointer rounded-r-full w-fit pl-4 xs:pl-12 pr-6 py-2 block sm:hidden"
25+
>
26+
<img src={HamburgerMenu} alt="menu" className="w-8 h-auto" />
4727
</div>
48-
<div className="flex flex-row gap-5 items-center">
49-
{authCtx.userData ? (
50-
<>
51-
<Link
52-
className="font-bold text-white hover:underline transition-all duration-150"
53-
to="/settings"
54-
>
55-
{authCtx.userData.name}
56-
</Link>
57-
<p
58-
className="font-bold text-white hover:underline transition-all duration-150"
59-
onClick={() => authCtx.logout()}
60-
>
61-
Logout
62-
</p>
63-
</>
64-
) : (
65-
<>
66-
<Link
67-
className="font-bold text-white hover:underline transition-all duration-150"
68-
to="/"
69-
>
70-
Akun
71-
</Link>
72-
<Link
73-
className="font-bold transition-all duration-150 bg-red-primary text-white border-2 border-transparent hover:bg-red-700 hover:border-red-primary-semibold block px-5 py-1 rounded-full"
74-
to="/login"
75-
>
76-
Login
77-
</Link>
78-
</>
79-
)}
28+
<Link
29+
to="/"
30+
className="bg-red-primary no-underline rounded-r-full w-fit pl-4 xs:pl-12 pr-6 py-2 hidden sm:block"
31+
>
32+
<img
33+
src="/background/headericon.png"
34+
className="h-[30px] w-auto"
35+
alt="icon"
36+
/>
37+
</Link>
38+
<div className="flex flex-row gap-12 pr-12 items-center ">
39+
<div className="hidden sm:flex flex-row gap-5 ">
40+
<Link
41+
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
42+
to="/"
43+
>
44+
Beranda
45+
</Link>
46+
<Link
47+
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
48+
to="/competition"
49+
>
50+
Kompetisi
51+
</Link>
52+
<Link
53+
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
54+
to="/team"
55+
>
56+
Tim
57+
</Link>
58+
<Link
59+
className="text-gray-300 hover:text-white hover:underline transition-all duration-150"
60+
to="/settings"
61+
>
62+
Settings
63+
</Link>
64+
</div>
65+
<div className="hidden sm:flex flex-row gap-5 items-center">
66+
{authCtx.userData ? (
67+
<>
68+
<Link
69+
className="font-bold text-white hover:underline transition-all duration-150"
70+
to="/settings"
71+
>
72+
{authCtx.userData.name}
73+
</Link>
74+
<p
75+
className="font-bold text-white hover:underline transition-all duration-150"
76+
onClick={() => authCtx.logout()}
77+
>
78+
Logout
79+
</p>
80+
</>
81+
) : (
82+
<>
83+
<Link
84+
className="font-bold text-white hover:underline transition-all duration-150"
85+
to="/"
86+
>
87+
Akun
88+
</Link>
89+
<Link
90+
className="font-bold transition-all duration-150 bg-red-primary text-white border-2 border-transparent hover:bg-red-700 hover:border-red-primary-semibold block px-5 py-1 rounded-full"
91+
to="/login"
92+
>
93+
Login
94+
</Link>
95+
</>
96+
)}
97+
</div>
8098
</div>
81-
</div>
82-
</nav>
99+
</nav>
100+
</>
83101
);
84102
};
85103

0 commit comments

Comments
 (0)