Skip to content

Commit c2e9e90

Browse files
bachlq1901bachlq1901
committed
fix menu and topbar
1 parent e98a058 commit c2e9e90

File tree

2 files changed

+157
-95
lines changed

2 files changed

+157
-95
lines changed

‎src/App.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,3 +625,6 @@ aside .iAmBabu {
625625
padding: 10px 15px;
626626
}
627627
}
628+
.align-items-center{
629+
justify-content: space-between;
630+
}

‎src/Components/Menu/Menu.tsx

Lines changed: 154 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import { Link } from 'react-router-dom'
3-
import { Image } from '../Images/Image'
4-
import "./menu.module.css"
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import { Image } from "../Images/Image";
4+
import "./menu.module.css";
55
import iconCommunity from "./img/icon-community.svg";
6-
import shoppingBasket from "./img/icon-shopping-basket.svg"
6+
import shoppingBasket from "./img/icon-shopping-basket.svg";
77
import iconPool from "./img/icon-pool.svg";
88
import iconFarms from "./img/icon-farms.svg";
99
import iconMarket from "./img/icon-market.svg";
@@ -16,96 +16,155 @@ import iconHelp from "./img/icon-help.svg";
1616
import iconHouseHeart from "./img/icon-house-heart.svg";
1717
import iconAppDownload from "./img/icon-app-download.svg";
1818
import iAmBabu from "./img/i-am-babu.png";
19-
function Menu():JSX.Element {
20-
return (
21-
<>
22-
<div className="col-auto">
23-
<aside>
24-
<ul id="mainmenu" className="list-unstyled">
25-
<li>
26-
<Link to="#" className="active">
27-
<img src={iconCommunity} className="icon" /><span className="text">Home</span>
28-
</Link>
29-
</li>
30-
<li>
31-
<Link to="#">
32-
<img src={shoppingBasket} className="icon" /><span className="text">Buy $BABU</span>
33-
</Link>
34-
</li>
35-
<li className="parentMenu">
36-
<Link to="#nftSubmenu" data-bs-toggle="collapse">
37-
<Image src={iconPool} className="icon" /><span className="text">NFT Mining</span>
38-
</Link>
39-
<ul className="subMenu collapse list-unstyled" id="nftSubmenu">
40-
<li><Link to="#">Babbu Family NFT</Link></li>
41-
<li><Link to="#">Babbu Friends Card</Link></li>
42-
<li><Link to="#">Crystal Stone</Link></li>
43-
<li><Link to="#">Bounty</Link></li>
44-
</ul>
45-
</li>
46-
<li>
47-
<Link to="#">
48-
<Image src={iconFarms} className="icon" /><span className="text">Farms</span><span className="badge arrow bg-pink text-white">HOT</span>
49-
</Link>
50-
</li>
51-
<li>
52-
<Link to="#">
53-
<Image src={iconMarket} className="icon" /><span className="text">NFT Market</span>
54-
</Link>
55-
</li>
56-
<li>
57-
<Link to="#">
58-
<Image src={iconGamebase} className="icon" /><span className="text">Gamebase</span><span className="badge arrow bg-yellow">NEW</span>
59-
</Link>
60-
</li>
61-
<li className="parentMenu">
62-
<Link to="#babbuNftSubmenu" data-bs-toggle="collapse">
63-
<Image src={iconLogo} className="icon" /><span className="text">Babbu NFT</span>
64-
</Link>
65-
<ul className="subMenu collapse list-unstyled" id="babbuNftSubmenu">
66-
<li><Link to="#">Babbu NFT Box</Link></li>
67-
<li><Link to="#">NFT Mint</Link></li>
68-
</ul>
69-
</li>
70-
<li>
71-
<Link to="#">
72-
<Image src={iconBounty} className="icon" /><span className="text">Bounty</span>
73-
</Link>
74-
</li>
75-
<li>
76-
<Link to="#">
77-
<Image src={iconKnight} className="icon" /><span className="text">Guide</span><span className="badge arrow bg-grey">COMING SOON</span>
78-
</Link>
79-
</li>
80-
<li>
81-
<Link to="#">
82-
<Image src={iconThumbsUp} className="icon" /><span className="text">Community</span>
83-
</Link>
84-
</li>
85-
<li>
86-
<Link to="#">
87-
<Image src={iconHelp} className="icon" /><span className="text">Help Center</span>
88-
</Link>
89-
</li>
90-
<li>
91-
<Link to="#">
92-
<Image src={iconHouseHeart} className="icon" /><span className="text">About BABBU</span>
93-
</Link>
94-
</li>
95-
<li>
96-
<Link to="#">
97-
<Image src={iconAppDownload} className="icon" /><span className="text">App Download</span>
98-
</Link>
99-
</li>
100-
</ul>
101-
<div className="iAmBabu">
102-
<Image src={iAmBabu} alt="" />
103-
</div>
104-
</aside>
105-
</div>
106-
</>
107-
)
19+
20+
const submenuData = [
21+
{
22+
title: "Home",
23+
icon: iconCommunity,
24+
path: "/",
25+
},
26+
{
27+
title: "Buy $BABU",
28+
icon: shoppingBasket,
29+
path: "#",
30+
},
31+
{
32+
title: "NFT Mining",
33+
icon: iconPool,
34+
path: "#",
35+
subNav: [
36+
{
37+
title: "Babbu Family NFT",
38+
path: "#",
39+
},
40+
{
41+
title: "Babbu Friends Card",
42+
path: "#",
43+
},
44+
{
45+
title: "Crystal Stone",
46+
path: "#",
47+
},
48+
{
49+
title: "Bounty",
50+
path: "#",
51+
},
52+
],
53+
},
54+
{
55+
title: "Farm",
56+
icon: iconFarms,
57+
path: "#",
58+
},
59+
{
60+
title: "NFT Market",
61+
icon: iconMarket,
62+
path: "#",
63+
},
64+
{
65+
title: "Gamebase",
66+
icon: iconGamebase,
67+
path: "#",
68+
69+
new: true,
70+
},
71+
{
72+
title: "Babbu NFT",
73+
icon: iconLogo,
74+
path: "#",
75+
subNav: [
76+
{
77+
title: "Babbu NFT Box",
78+
path: "#",
79+
},
80+
{
81+
title: "NFT Mint",
82+
path: "#",
83+
},
84+
],
85+
},
86+
{
87+
title: "Bounty",
88+
icon: iconBounty,
89+
path: "#",
90+
},
91+
{
92+
title: "Guide",
93+
icon: iconKnight,
94+
path: "#",
95+
96+
comingsoon: true,
97+
},
98+
{
99+
title: "Community",
100+
icon: iconThumbsUp,
101+
path: "#",
102+
},
103+
{
104+
title: "Help Center",
105+
icon: iconHelp,
106+
path: "#",
107+
},
108+
{
109+
title: "About BABU",
110+
icon: iconHouseHeart,
111+
path: "#",
112+
},
113+
{
114+
title: "App Dowload",
115+
icon: iconAppDownload,
116+
path: "#",
117+
},
118+
];
119+
120+
function SubMenu(data: any): JSX.Element {
121+
const { item } = data;
122+
const [subnav, setSubnav] = React.useState(false);
123+
124+
const showSubnav = () => setSubnav(!subnav);
125+
return (
126+
<li className={item.subNav ? "parentMenu" : ""}>
127+
<Link to={item.path} onClick={item.subNav && showSubnav}>
128+
<img src={item.icon} className="icon" />
129+
<span className="text">{item.title}</span>
130+
</Link>
131+
{item.subNav ? (
132+
<ul
133+
className={
134+
subnav
135+
? "subMenu collapse list-unstyled show"
136+
: "subMenu collapse list-unstyled"
137+
}
138+
id="nftSubmenu"
139+
>
140+
{item.subNav.map((subItem: any, subIndex: any) => (
141+
<li key={subIndex}>
142+
<Link to={subItem.path}>{subItem.title}</Link>
143+
</li>
144+
))}
145+
</ul>
146+
) : null}
147+
</li>
148+
);
108149
}
109150

110-
export default Menu
151+
function Menu(): JSX.Element {
152+
return (
153+
<>
154+
<div className="col-auto">
155+
<aside>
156+
<ul id="mainmenu" className="list-unstyled">
157+
{submenuData.map((item: any, index: any) => (
158+
<SubMenu item={item} key={index} />
159+
))}
160+
</ul>
161+
<div className="iAmBabu">
162+
<Image src={iAmBabu} alt="" />
163+
</div>
164+
</aside>
165+
</div>
166+
</>
167+
);
168+
}
111169

170+
export default Menu;

0 commit comments

Comments
 (0)