|
1 | 1 | import React, { useState, useEffect } from "react"; |
2 | | -import { Link, NavLink } from "react-router-dom"; |
| 2 | + |
| 3 | +import Menu from './Menu'; |
3 | 4 | import Submenu from "./SubMenu"; |
4 | | -import dp from "../../assets/images/dp.png"; |
| 5 | +import SocialMedia from './SocialMedia'; |
| 6 | + |
5 | 7 | import Parse from "parse"; |
| 8 | +import dp from "../../assets/images/dp.png"; |
| 9 | + |
6 | 10 | const Sidebar = ({ isOpen, closeSidebar }) => { |
| 11 | + const [menuList, setmenuList] = useState([]); |
7 | 12 | let username = localStorage.getItem("username"); |
8 | 13 | const image = localStorage.getItem("profileImg") || dp; |
9 | 14 | const tenantname = localStorage.getItem("TenantName"); |
10 | | - const [menuList, setmenuList] = useState([]); |
11 | 15 |
|
12 | 16 | useEffect(() => { |
13 | 17 | if (localStorage.getItem("accesstoken")) { |
14 | 18 | menuItem(); |
15 | 19 | } |
16 | 20 | }, []); |
| 21 | + |
17 | 22 | const menuItem = async () => { |
18 | 23 | const parseBaseUrl = localStorage.getItem("baseUrl"); |
19 | 24 | const parseAppId = localStorage.getItem("parseAppId"); |
| 25 | + |
20 | 26 | try { |
21 | 27 | Parse.serverURL = parseBaseUrl; |
22 | 28 | Parse.initialize(parseAppId); |
23 | 29 | var sideMenu = Parse.Object.extend("w_menu"); |
24 | 30 | var query = new Parse.Query(sideMenu); |
25 | 31 | query.equalTo("objectId", localStorage.getItem("defaultmenuid")); |
26 | | - |
| 32 | + |
27 | 33 | const results = await query.first(); |
28 | 34 | const resultjson = results.toJSON(); |
29 | | - // console.log("resultjson ", resultjson); |
30 | 35 | let result = resultjson; |
31 | 36 | setmenuList(result.menuItems); |
32 | 37 | } catch (e) { |
33 | 38 | console.error("Problem", e); |
34 | 39 | } |
| 40 | + |
35 | 41 | }; |
36 | 42 |
|
37 | 43 | return ( |
38 | | - <div |
39 | | - className={`${ |
40 | | - isOpen ? "block" : "hidden" |
41 | | - } bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 ${ |
42 | | - isOpen ? "translate-x-0" : "-translate-x-full" |
43 | | - }`} |
| 44 | + <aside |
| 45 | + className={`${isOpen ? "block" : "hidden" |
| 46 | + } bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 ${isOpen ? "translate-x-0" : "-translate-x-full" |
| 47 | + }`} |
44 | 48 | > |
45 | 49 | <div className="flex px-2 py-3 gap-2 items-center shadow-md"> |
46 | 50 | <div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden"> |
47 | | - <img className="w-full h-full object-contain" src={image} alt="img" /> |
| 51 | + <img className="w-full h-full object-cover" src={image} alt="Profile" /> |
48 | 52 | </div> |
49 | 53 | <div> |
50 | | - <p className="text-[14px] font-bold">{username && username}</p> |
51 | | - <p |
52 | | - className={`text-[12px] ${tenantname && tenantname ? "mt-2" : ""}`} |
53 | | - > |
54 | | - {tenantname && tenantname} |
| 54 | + <p className="text-[14px] font-bold">{username}</p> |
| 55 | + <p className={`text-[12px] ${tenantname ? "mt-2" : ""}`}> |
| 56 | + {tenantname} |
55 | 57 | </p> |
56 | 58 | </div> |
57 | 59 | </div> |
58 | | - <ul className="text-sm"> |
59 | | - {menuList.length > 0 && ( |
60 | | - <> |
61 | | - {menuList.map((item) => |
62 | | - !item.children ? ( |
63 | | - <li key={item.title} onClick={() => closeSidebar()}> |
64 | | - <Link |
65 | | - className={`mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 hover:no-underline cursor-pointer`} |
66 | | - to={`/${item.pageType}/${item.objectId}`} |
67 | | - > |
68 | | - <i className={item.icon + " text-[18px]"}></i> |
69 | | - <span title={item.description} className="ml-3 lg:ml-4"> |
70 | | - {item.title} |
71 | | - </span> |
72 | | - </Link> |
73 | | - </li> |
74 | | - ) : ( |
75 | | - <Submenu key={item.title} icon={item.icon} title={item.title}> |
76 | | - {item.children.map((item) => ( |
77 | | - <li key={item.title} onClick={() => closeSidebar()} className="pl-6 md:pl-8 hover:bg-[#eef1f5] cursor-pointer"> |
78 | | - <Link |
79 | | - className={`mx-auto flex items-center p-2 lg:p-3 hover:no-underline`} |
80 | | - to={`/${item.pageType}/${item.objectId}`} |
81 | | - > |
82 | | - <i className={item.icon + " text-[18px]"}></i> |
83 | | - <span title={item.description} className="ml-3 lg:ml-4"> |
84 | | - {item.title} |
85 | | - </span> |
86 | | - </Link> |
87 | | - </li> |
88 | | - ))} |
89 | | - </Submenu> |
90 | | - ) |
91 | | - )} |
92 | | - </> |
93 | | - )} |
94 | | - </ul> |
95 | | - <div className="mt-4 flex justify-center items-center text-[25px] text-black gap-3"> |
96 | | - <NavLink to="https://github.com/opensignlabs/opensign" target="_blank"> |
97 | | - <i className="fa-brands fa-github"></i> |
98 | | - </NavLink> |
99 | | - <NavLink |
100 | | - to="https://www.linkedin.com/company/opensign%E2%84%A2/" |
101 | | - target="_blank" |
102 | | - > |
103 | | - <i className="fa-brands fa-linkedin"></i> |
104 | | - </NavLink> |
105 | | - <NavLink to="https://www.twitter.com/opensignlabs" target="_blank"> |
106 | | - <i className="fa-brands fa-square-x-twitter"></i> |
107 | | - </NavLink> |
108 | | - <NavLink to="https://discord.com/invite/xe9TDuyAyj" target="_blank"> |
109 | | - <i className="fa-brands fa-discord"></i> |
110 | | - </NavLink> |
111 | | - </div> |
112 | | - </div> |
| 60 | + <nav aria-label="OpenSign Sidebar Navigation"> |
| 61 | + <ul className="text-sm" role="menubar" aria-label="OpenSign Sidebar Navigation"> |
| 62 | + {menuList.map((item) => ( |
| 63 | + !item.children ? ( |
| 64 | + <Menu key={item.title} item={item} isOpen={isOpen} closeSidebar={closeSidebar} /> |
| 65 | + ) : ( |
| 66 | + <Submenu key={item.title} item={item} closeSidebar={closeSidebar} /> |
| 67 | + ) |
| 68 | + ))} |
| 69 | + </ul> |
| 70 | + </nav> |
| 71 | + <footer className="mt-4 flex justify-center items-center text-[25px] text-black gap-3"> |
| 72 | + <SocialMedia /> |
| 73 | + </footer> |
| 74 | + </aside> |
113 | 75 | ); |
114 | 76 | }; |
115 | 77 |
|
|
0 commit comments