1const primaryMenuItems = [
2 {
3 title: "Dashboard",
4 path: "/dashboard",
5 icon: <Icon name="" />,
6 },
7 {
8 title: "Tables",
9 path: "/tables",
10 icon: <Icon name="" />,
11 },
12 {
13 title: "Games",
14 path: "/games",
15 icon: <Icon name="" />,
16 },
17];
18
19const renderPrimarymenutems = () => {
20 return primaryMenuItems.map((item) => (
21 <MenuItem className="flex gap-x-6">
22 {item.icon}
23 <span>{item.title}</span>
24 </MenuItem>
25 ));
26};
27
28const secondaryMenuItems = [
29 {
30 title: "Stats",
31 path: "/stats",
32 icon: <Icon name="" />,
33 },
34 {
35 title: "Account",
36 path: "/account",
37 icon: <Icon name="" />,
38 },
39];
40
41const renderSecondaryMenutems = () => {
42 return secondaryMenuItems.map((item) => (
43 <MenuItem className="flex-row gap-x-6">
44 {item.icon}
45 <span>{item.title}</span>
46 </MenuItem>
47 ));
48};
49
50// ... rendering...
51return (
52 <div>
53 <div>
54 {renderPrimarymenutems()}
55 </div>
56
57 <span className="separator" />
58
59 <button onClick={...}>more items</button>
60 <div>
61 {renderSecondaryMenutems()}
62 </div>
63 </div>
64)