l-min-components 1.0.255 → 1.0.257
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/AppMainLayout/index.jsx +9 -7
- package/src/components/dropdown component/styles.js +16 -0
- package/src/components/header/account-dropdown.jsx +0 -66
- package/src/components/header/index.jsx +24 -5
- package/src/components/header/index.styled.js +15 -13
- package/src/components/header/login-header.jsx +8 -3
package/package.json
CHANGED
|
@@ -34,13 +34,15 @@ const AppMainLayout = () => {
|
|
|
34
34
|
<MainLayout>
|
|
35
35
|
<LeftLayout>
|
|
36
36
|
<SideBar routes={leftNavMenu} />
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
{!window.location.host.includes("coming") && (
|
|
38
|
+
<SideMenu
|
|
39
|
+
user={user}
|
|
40
|
+
routes={sideMenuOptions}
|
|
41
|
+
userType={"developer"}
|
|
42
|
+
isOpen={isOpen}
|
|
43
|
+
setIsOpen={setIsOpen}
|
|
44
|
+
/>
|
|
45
|
+
)}
|
|
44
46
|
</LeftLayout>
|
|
45
47
|
<CenterLayout isOpen={isOpen}>
|
|
46
48
|
<Outlet />
|
|
@@ -54,6 +54,22 @@ export const DropDownContent = styled.ul`
|
|
|
54
54
|
width: 100%;
|
|
55
55
|
max-height: 200px;
|
|
56
56
|
overflow-y: scroll;
|
|
57
|
+
scrollbar-width: thin;
|
|
58
|
+
/* "auto" or "thin" depending on browser support */
|
|
59
|
+
scrollbar-color: transparent transparent;
|
|
60
|
+
/* color values for thumb and track */
|
|
61
|
+
|
|
62
|
+
&::-webkit-scrollbar {
|
|
63
|
+
width: 6px;
|
|
64
|
+
/* adjust as needed */
|
|
65
|
+
background-color: transparent;
|
|
66
|
+
/* color value for track */
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&::-webkit-scrollbar-thumb {
|
|
70
|
+
background-color: transparent;
|
|
71
|
+
/* color value for thumb */
|
|
72
|
+
}
|
|
57
73
|
// padding: 4px 10px;
|
|
58
74
|
`;
|
|
59
75
|
|
|
@@ -22,73 +22,7 @@ const AccountDropdown = (props) => {
|
|
|
22
22
|
const navigate = useNavigate();
|
|
23
23
|
const { pathname } = useLocation();
|
|
24
24
|
useEffect(() => {}, [pathname]);
|
|
25
|
-
// useEffect(() => {
|
|
26
|
-
// if (props?.data?.data) {
|
|
27
|
-
// let personalArray = [];
|
|
28
|
-
// let developerArray = [];
|
|
29
|
-
// let instructorArray = [];
|
|
30
|
-
// let enterpriseArray = [];
|
|
31
|
-
// const cookies = document.cookie;
|
|
32
|
-
// const cookieArray = cookies.split(";");
|
|
33
|
-
// let activeDeveloperAccount;
|
|
34
|
-
// for (let i = 0; i < cookieArray.length; i++) {
|
|
35
|
-
// const cookie = cookieArray[i].trim();
|
|
36
|
-
// if (cookie.startsWith("activeDeveloperAccount=")) {
|
|
37
|
-
// activeDeveloperAccount = cookie.substring(
|
|
38
|
-
// "activeDeveloperAccount=".length,
|
|
39
|
-
// cookie.length
|
|
40
|
-
// );
|
|
41
|
-
// break;
|
|
42
|
-
// }
|
|
43
|
-
// }
|
|
44
|
-
// props?.data?.data?.results?.map((accountItem, idx) => {
|
|
45
|
-
// if (
|
|
46
|
-
// accountItem?.type === "PERSONAL" &&
|
|
47
|
-
// !props?.personalAccountData?.includes(accountItem)
|
|
48
|
-
// ) {
|
|
49
|
-
// personalArray.push(accountItem);
|
|
50
|
-
// props?.setPersonalAccountData(personalArray);
|
|
51
|
-
// }
|
|
52
|
-
// if (
|
|
53
|
-
// accountItem?.type === "DEVELOPER" &&
|
|
54
|
-
// !props?.developerAccountData?.includes(accountItem)
|
|
55
|
-
// ) {
|
|
56
|
-
// developerArray.push(accountItem);
|
|
57
|
-
// props?.setDeveloperAccountData(developerArray);
|
|
58
|
-
// }
|
|
59
|
-
// if (
|
|
60
|
-
// accountItem?.type === "INSTRUCTOR" &&
|
|
61
|
-
// !props?.instructorAccountData?.includes(accountItem)
|
|
62
|
-
// ) {
|
|
63
|
-
// instructorArray.push(accountItem);
|
|
64
|
-
// props?.setInstructorAccountData(instructorArray);
|
|
65
|
-
// }
|
|
66
|
-
// if (
|
|
67
|
-
// accountItem?.type === "ENTERPRISE" &&
|
|
68
|
-
// !props?.enterpriseAccountData?.includes(accountItem)
|
|
69
|
-
// ) {
|
|
70
|
-
// enterpriseArray.push(accountItem);
|
|
71
|
-
// props?.setEnterpriseAccountData(enterpriseArray);
|
|
72
|
-
// }
|
|
73
|
-
// });
|
|
74
25
|
|
|
75
|
-
// if (pathname?.includes("personal")) {
|
|
76
|
-
// props?.setSelectedAccount(personalArray[0]);
|
|
77
|
-
// }
|
|
78
|
-
// if (window.location.host?.includes("developer")) {
|
|
79
|
-
// props?.setSelectedAccount(
|
|
80
|
-
// developerArray.find((item) => item.id === activeDeveloperAccount) ??
|
|
81
|
-
// item
|
|
82
|
-
// );
|
|
83
|
-
// }
|
|
84
|
-
// if (pathname?.includes("instructor")) {
|
|
85
|
-
// props?.setSelectedAccount(instructorArray[0]);
|
|
86
|
-
// }
|
|
87
|
-
// if (pathname?.includes("enterprise")) {
|
|
88
|
-
// props?.setSelectedAccount(enterpriseArray[0]);
|
|
89
|
-
// }
|
|
90
|
-
// }
|
|
91
|
-
// }, [props?.data?.data]);
|
|
92
26
|
useEffect(() => {
|
|
93
27
|
if (props?.selectedAccount?.type === "DEVELOPER") {
|
|
94
28
|
const date = new Date();
|
|
@@ -131,7 +131,12 @@ const HeaderComponent = (props) => {
|
|
|
131
131
|
return (
|
|
132
132
|
<Navbar>
|
|
133
133
|
<img src={logo} alt="Learngual logo" />
|
|
134
|
-
<Nav
|
|
134
|
+
<Nav
|
|
135
|
+
onClick={() => {
|
|
136
|
+
setLanguageDropdown();
|
|
137
|
+
setIsOpen();
|
|
138
|
+
}}
|
|
139
|
+
>
|
|
135
140
|
<li>
|
|
136
141
|
<a href="#" className="active">
|
|
137
142
|
<BookIcon /> Learning
|
|
@@ -164,7 +169,12 @@ const HeaderComponent = (props) => {
|
|
|
164
169
|
</li> */}
|
|
165
170
|
</Nav>
|
|
166
171
|
|
|
167
|
-
<NavGroup
|
|
172
|
+
<NavGroup
|
|
173
|
+
onClick={() => {
|
|
174
|
+
setLanguageDropdown();
|
|
175
|
+
setIsOpen();
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
168
178
|
<SearchInputGroup>
|
|
169
179
|
<SearchIcon />
|
|
170
180
|
<SearchInput
|
|
@@ -187,10 +197,13 @@ const HeaderComponent = (props) => {
|
|
|
187
197
|
)}
|
|
188
198
|
</SearchInputGroup>
|
|
189
199
|
|
|
190
|
-
<div className="language_dropdown">
|
|
200
|
+
<div className="language_dropdown" onClick={(e) => e.stopPropagation()}>
|
|
191
201
|
<div
|
|
192
202
|
className="drop_holder"
|
|
193
|
-
onClick={() =>
|
|
203
|
+
onClick={() => {
|
|
204
|
+
setLanguageDropdown(!languageDropdown);
|
|
205
|
+
setIsOpen();
|
|
206
|
+
}}
|
|
194
207
|
>
|
|
195
208
|
<img src={usFlag} alt="" />
|
|
196
209
|
<ArrowDownIcon />
|
|
@@ -205,7 +218,13 @@ const HeaderComponent = (props) => {
|
|
|
205
218
|
</div>
|
|
206
219
|
|
|
207
220
|
{selectedAccount && (
|
|
208
|
-
<UserProfile
|
|
221
|
+
<UserProfile
|
|
222
|
+
onClick={(e) => {
|
|
223
|
+
e.stopPropagation();
|
|
224
|
+
setIsOpen(!isOpen);
|
|
225
|
+
setLanguageDropdown();
|
|
226
|
+
}}
|
|
227
|
+
>
|
|
209
228
|
<div className="user-img-container">
|
|
210
229
|
<img
|
|
211
230
|
src={selectedAccount?.profile_photo?.url || avatar}
|
|
@@ -35,20 +35,20 @@ export const NavGroup = styled.div`
|
|
|
35
35
|
}
|
|
36
36
|
.dropdown_list {
|
|
37
37
|
position: absolute;
|
|
38
|
-
top:
|
|
38
|
+
top: 75px;
|
|
39
39
|
width: fit-content;
|
|
40
40
|
background: white;
|
|
41
|
-
padding:
|
|
42
|
-
border-radius:
|
|
41
|
+
padding: 15px 0;
|
|
42
|
+
border-radius: 15px;
|
|
43
43
|
li {
|
|
44
44
|
list-style-type: none;
|
|
45
45
|
display: flex;
|
|
46
46
|
align-items: center;
|
|
47
47
|
cursor: pointer;
|
|
48
|
-
padding: 5px
|
|
49
|
-
font-size:
|
|
48
|
+
padding: 5px 30px 5px 15px;
|
|
49
|
+
font-size: 14px;
|
|
50
50
|
&:hover {
|
|
51
|
-
background: rgba(
|
|
51
|
+
background: rgba(0, 194, 194, 0.1);
|
|
52
52
|
}
|
|
53
53
|
img {
|
|
54
54
|
width: 20px;
|
|
@@ -403,7 +403,9 @@ export const AccountDropdownFooter = styled.div`
|
|
|
403
403
|
justify-content: center;
|
|
404
404
|
border-top: 1px solid rgba(51, 51, 51, 0.15);
|
|
405
405
|
margin-top: auto;
|
|
406
|
-
|
|
406
|
+
&:hover {
|
|
407
|
+
background: rgba(0, 194, 194, 0.1);
|
|
408
|
+
}
|
|
407
409
|
& button {
|
|
408
410
|
display: flex;
|
|
409
411
|
border: none;
|
|
@@ -514,20 +516,20 @@ export const NavGroup2 = styled.div`
|
|
|
514
516
|
}
|
|
515
517
|
.dropdown_list {
|
|
516
518
|
position: absolute;
|
|
517
|
-
top:
|
|
519
|
+
top: 75px;
|
|
518
520
|
width: fit-content;
|
|
519
521
|
background: white;
|
|
520
|
-
padding:
|
|
521
|
-
border-radius:
|
|
522
|
+
padding: 15px 0;
|
|
523
|
+
border-radius: 15px;
|
|
522
524
|
li {
|
|
523
525
|
list-style-type: none;
|
|
524
526
|
display: flex;
|
|
525
527
|
align-items: center;
|
|
526
528
|
cursor: pointer;
|
|
527
|
-
padding: 5px
|
|
528
|
-
font-size:
|
|
529
|
+
padding: 5px 30px 5px 15px;
|
|
530
|
+
font-size: 14px;
|
|
529
531
|
&:hover {
|
|
530
|
-
background: rgba(
|
|
532
|
+
background: rgba(0, 194, 194, 0.1);
|
|
531
533
|
}
|
|
532
534
|
img {
|
|
533
535
|
width: 20px;
|
|
@@ -33,7 +33,11 @@ const HeaderComponentTwo = (props) => {
|
|
|
33
33
|
navigate("/sign-in");
|
|
34
34
|
}, []);
|
|
35
35
|
return (
|
|
36
|
-
<Navbar2
|
|
36
|
+
<Navbar2
|
|
37
|
+
onClick={() => {
|
|
38
|
+
setLanguageDropdown();
|
|
39
|
+
}}
|
|
40
|
+
>
|
|
37
41
|
<img src={logo} alt="Learngual logo" />
|
|
38
42
|
{/* <Nav2>
|
|
39
43
|
<li>
|
|
@@ -53,7 +57,7 @@ const HeaderComponentTwo = (props) => {
|
|
|
53
57
|
</Nav2> */}
|
|
54
58
|
|
|
55
59
|
<NavGroup2>
|
|
56
|
-
<div className="language_dropdown">
|
|
60
|
+
<div className="language_dropdown" onClick={(e) => e.stopPropagation()}>
|
|
57
61
|
<div
|
|
58
62
|
className="drop_holder"
|
|
59
63
|
onClick={() => setLanguageDropdown(!languageDropdown)}
|
|
@@ -71,7 +75,8 @@ const HeaderComponentTwo = (props) => {
|
|
|
71
75
|
</div>
|
|
72
76
|
|
|
73
77
|
{location.pathname.includes("sign-up") &&
|
|
74
|
-
!location.pathname.includes("organization-details") &&
|
|
78
|
+
!location.pathname.includes("organization-details") &&
|
|
79
|
+
!location.pathname.includes("subscription-plan")(
|
|
75
80
|
<ButtonComponent
|
|
76
81
|
type="secondary"
|
|
77
82
|
text="Log in"
|