l-min-components 1.0.171 → 1.0.181

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "l-min-components",
-  "version": "1.0.171",
+  "version": "1.0.181",
   "type": "module",
   "files": [
     "src/assets",
-    "src/components"
+    "src/components",
+    "src/hooks"
   ],
   "scripts": {
     "dev": "vite",

package/src/assets/svg/award.jsx

@@ -0,0 +1,32 @@
+export const AwardIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "24"}
+    height={height || "25"}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.25781 11.2011V16.1711C4.25781 17.9911 4.25781 17.9911 5.97781 19.1511L10.7078 21.8811C11.4178 22.2911 12.5778 22.2911 13.2878 21.8811L18.0178 19.1511C19.7378 17.9911 19.7378 17.9911 19.7378 16.1711V11.2011C19.7378 9.38109 19.7378 9.38109 18.0178 8.22109L13.2878 5.49109C12.5778 5.08109 11.4178 5.08109 10.7078 5.49109L5.97781 8.22109C4.25781 9.38109 4.25781 9.38109 4.25781 11.2011Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17.5 7.80969V5.17969C17.5 3.17969 16.5 2.17969 14.5 2.17969H9.5C7.5 2.17969 6.5 3.17969 6.5 5.17969V7.73969"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.6317 11.1706L13.2017 12.0606C13.2917 12.2006 13.4917 12.3406 13.6417 12.3806L14.6617 12.6406C15.2917 12.8006 15.4617 13.3406 15.0517 13.8406L14.3817 14.6506C14.2817 14.7806 14.2017 15.0106 14.2117 15.1706L14.2717 16.2206C14.3117 16.8706 13.8517 17.2006 13.2517 16.9606L12.2717 16.5706C12.1217 16.5106 11.8717 16.5106 11.7217 16.5706L10.7417 16.9606C10.1417 17.2006 9.68173 16.8606 9.72173 16.2206L9.78173 15.1706C9.79173 15.0106 9.71173 14.7706 9.61173 14.6506L8.94173 13.8406C8.53173 13.3406 8.70173 12.8006 9.33173 12.6406L10.3517 12.3806C10.5117 12.3406 10.7117 12.1906 10.7917 12.0606L11.3617 11.1706C11.7217 10.6306 12.2817 10.6306 12.6317 11.1706Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/assets/svg/dashboard.jsx

@@ -0,0 +1,42 @@
+export const DashboardIcon = ({ width, height, stroke }) => (
+  <svg
+    width={width || "24"}
+    height={height || "25"}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 10.1797H7C9 10.1797 10 9.17969 10 7.17969V5.17969C10 3.17969 9 2.17969 7 2.17969H5C3 2.17969 2 3.17969 2 5.17969V7.17969C2 9.17969 3 10.1797 5 10.1797Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17 10.1797H19C21 10.1797 22 9.17969 22 7.17969V5.17969C22 3.17969 21 2.17969 19 2.17969H17C15 2.17969 14 3.17969 14 5.17969V7.17969C14 9.17969 15 10.1797 17 10.1797Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17 22.1797H19C21 22.1797 22 21.1797 22 19.1797V17.1797C22 15.1797 21 14.1797 19 14.1797H17C15 14.1797 14 15.1797 14 17.1797V19.1797C14 21.1797 15 22.1797 17 22.1797Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5 22.1797H7C9 22.1797 10 21.1797 10 19.1797V17.1797C10 15.1797 9 14.1797 7 14.1797H5C3 14.1797 2 15.1797 2 17.1797V19.1797C2 21.1797 3 22.1797 5 22.1797Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/assets/svg/document.jsx

@@ -0,0 +1,18 @@
+export const DocumentIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "24"}
+    height={height || "25"}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 12.1797H15M9 16.1797H15M17 21.1797H7C5.89543 21.1797 5 20.2843 5 19.1797V5.17969C5 4.07512 5.89543 3.17969 7 3.17969H12.5858C12.851 3.17969 13.1054 3.28504 13.2929 3.47258L18.7071 8.88679C18.8946 9.07433 19 9.32868 19 9.5939V19.1797C19 20.2843 18.1046 21.1797 17 21.1797Z"
+      stroke="white"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/assets/svg/teams.jsx

@@ -0,0 +1,17 @@
+export const TeamsIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "25"}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17 20.1797H22V18.1797C22 16.5228 20.6569 15.1797 19 15.1797C18.0444 15.1797 17.1931 15.6265 16.6438 16.3226M17 20.1797H7M17 20.1797V18.1797C17 17.5234 16.8736 16.8967 16.6438 16.3226M7 20.1797H2V18.1797C2 16.5228 3.34315 15.1797 5 15.1797C5.95561 15.1797 6.80686 15.6265 7.35625 16.3226M7 20.1797V18.1797C7 17.5234 7.12642 16.8967 7.35625 16.3226M7.35625 16.3226C8.0935 14.4807 9.89482 13.1797 12 13.1797C14.1052 13.1797 15.9065 14.4807 16.6438 16.3226M15 7.17969C15 8.83654 13.6569 10.1797 12 10.1797C10.3431 10.1797 9 8.83654 9 7.17969C9 5.52283 10.3431 4.17969 12 4.17969C13.6569 4.17969 15 5.52283 15 7.17969ZM21 10.1797C21 11.2843 20.1046 12.1797 19 12.1797C17.8954 12.1797 17 11.2843 17 10.1797C17 9.07512 17.8954 8.17969 19 8.17969C20.1046 8.17969 21 9.07512 21 10.1797ZM7 10.1797C7 11.2843 6.10457 12.1797 5 12.1797C3.89543 12.1797 3 11.2843 3 10.1797C3 9.07512 3.89543 8.17969 5 8.17969C6.10457 8.17969 7 9.07512 7 10.1797Z"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/assets/svg/volume.jsx

@@ -0,0 +1,29 @@
+export const VolumeIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "25"}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 10.1814V14.1814C2 16.1814 3 17.1814 5 17.1814H6.43C6.8 17.1814 7.17 17.2914 7.49 17.4814L10.41 19.3114C12.93 20.8914 15 19.7414 15 16.7714V7.59143C15 4.61143 12.93 3.47143 10.41 5.05143L7.49 6.88143C7.17 7.07143 6.8 7.18143 6.43 7.18143H5C3 7.18143 2 8.18143 2 10.1814Z"
+      stroke="white"
+      stroke-width="1.5"
+    />
+    <path
+      d="M18 8.17969C19.78 10.5497 19.78 13.8097 18 16.1797"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.8281 5.67969C22.7181 9.52969 22.7181 14.8297 19.8281 18.6797"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/AppMainLayout/index.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useState, useEffect, createContext } from "react";
+import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
   CenterLayout,
@@ -7,44 +7,51 @@ import {
   RightLayout,
   MainLayout,
 } from "./index.styled";
-import HeaderComponent from "../header";
-import Banner from "../banner";
-import SideBar from "../sideNav";
+import {
+  Header as HeaderComponent,
+  Banner,
+  SideNav as SideBar,
+  SideMenu,
+} from "../";
 import { leftNavMenu, user, sideMenuOptions } from "../../hooks/leftNavMenu";
-import SideMenu from "../sideBar/sideMenu";
+// import SideMenu from "../sideBar/sideMenu";
 
-const AppMainLayout = (props) => {
+const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
   const location = useLocation();
 
-  console.log(location);
-
   useEffect(() => {
     if (location.pathname === "/documentation") setIsOpen(false);
   }, [isOpen]);
-
+  const [rightLayout, setRightLayout] = useState(true);
+  const [rightComponent, setRightComponent] = useState();
   return (
-    <Layout>
-      <HeaderComponent />
-      <MainLayout>
-        <LeftLayout>
-          <SideBar routes={leftNavMenu} />
-          <SideMenu
-            user={user}
-            routes={sideMenuOptions}
-            userType={"developer"}
-            isOpen={isOpen}
-            setIsOpen={setIsOpen}
-          />
-        </LeftLayout>
-        <CenterLayout>{props.children}</CenterLayout>
+    <OutletContext.Provider value={{ setRightComponent, setRightLayout }}>
+      <Layout>
+        <HeaderComponent />
+        <MainLayout>
+          <LeftLayout>
+            <SideBar routes={leftNavMenu} />
+            <SideMenu
+              user={user}
+              routes={sideMenuOptions}
+              userType={"developer"}
+              isOpen={isOpen}
+              setIsOpen={setIsOpen}
+            />
+          </LeftLayout>
+          <CenterLayout>
+            <Outlet />
+          </CenterLayout>
 
-        <RightLayout>
-          <Banner />
-        </RightLayout>
-      </MainLayout>
-    </Layout>
+          {rightLayout && (
+            <RightLayout>{rightComponent ?? <Banner />}</RightLayout>
+          )}
+        </MainLayout>
+      </Layout>
+    </OutletContext.Provider>
   );
 };
 
+export const OutletContext = createContext({});
 export default AppMainLayout;

package/src/components/header/account-dropdown.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { CloseIcon } from "./assets/svg/close";
 import { AddIcon } from "./assets/svg/add";
 import {
@@ -7,6 +7,7 @@ import {
   AccountDropdownBody,
   AccountDropdownFooter,
 } from "./index.styled";
+import { useLocation, useNavigate } from "react-router-dom";
 /**
  * @param {{
  *  type: string,
@@ -17,59 +18,222 @@ import {
  *
  */
 const AccountDropdown = (props) => {
+  const [personalAccountData, setPersonalAccountData] = useState([]);
+  const [developerAccountData, setDeveloperAccountData] = useState([]);
+  const [instructorAccountData, setInstructorAccountData] = useState([]);
+  const [enterpriseAccountData, setEnterpriseAccountData] = useState([]);
+  const [selectedAccount, setSelectedAccount] = useState();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  useEffect(() => {
+    if (pathname?.includes("personal")) {
+      setSelectedAccount(personalAccountData[0]);
+    }
+    if (pathname?.includes("developer")) {
+      setSelectedAccount(developerAccountData[0]);
+    }
+    if (pathname?.includes("instructor")) {
+      setSelectedAccount(instructorAccountData[0]);
+    }
+    if (pathname?.includes("enterprise")) {
+      setSelectedAccount(enterpriseAccountData[0]);
+    }
+  }, [pathname]);
+  useEffect(() => {
+    if (props?.data?.data) {
+      let personalArray = [];
+      let developerArray = [];
+      let instructorArray = [];
+      let enterpriseArray = [];
+      props?.data?.data?.results?.map((accountItem, idx) => {
+        if (
+          accountItem?.type === "PERSONAL" &&
+          !personalAccountData?.includes(accountItem)
+        ) {
+          personalArray.push(accountItem);
+          setPersonalAccountData(personalArray);
+        }
+        if (
+          accountItem?.type === "DEVELOPER" &&
+          !developerAccountData?.includes(accountItem)
+        ) {
+          developerArray.push(accountItem);
+          setDeveloperAccountData(developerArray);
+        }
+        if (
+          accountItem?.type === "INSTRUCTOR" &&
+          !instructorAccountData?.includes(accountItem)
+        ) {
+          instructorArray.push(accountItem);
+          setInstructorAccountData(instructorArray);
+        }
+        if (
+          accountItem?.type === "ENTERPRISE" &&
+          !enterpriseAccountData?.includes(accountItem)
+        ) {
+          enterpriseArray.push(accountItem);
+          setEnterpriseAccountData(enterpriseArray);
+        }
+      });
+    }
+  }, [props?.data?.data]);
+  useEffect(() => {
+    if (selectedAccount) {
+      window.localStorage.setItem("current-account", selectedAccount);
+    }
+  }, [selectedAccount]);
   return (
     <>
       <AccountDropdownLayout>
         <AccountDropdownHeader>
           <div>
-            <img src={props.avatar} alt="account photo" />
+            <img
+              src={selectedAccount?.profile_photo || props?.avatar}
+              alt="account photo"
+            />
           </div>
           <div>
-            <h1> {props.activeAccountName}</h1>
-            <h2>{props.activeAccountType} </h2>
+            <h1>
+              {" "}
+              {selectedAccount?.display_name ||
+                selectedAccount?.metadata?.organization_name ||
+                props.activeAccountName}
+            </h1>
+            <h2 style={{ textTransform: "capitalize" }}>
+              {selectedAccount?.type || props.activeAccountType}{" "}
+            </h2>
           </div>
           <CloseIcon onClick={(e) => props.setIsOpen(!props.isOpen)} />
         </AccountDropdownHeader>
         <AccountDropdownBody>
           {/* {props.apiAccountType === `${props.accountType}` && ( */}
-          <div>
-            <h3>{props.accountType} </h3>
-            <div className="account-info">
-              <div className="avatar-container">
-                <img src={props.avatar} alt="account photo" />
-              </div>
-              <div className="account-details">
-                <h1> {props.accountName}</h1>
-                <span>{props.notificationCount} </span>
-              </div>
-            </div>
-          </div>
 
-          <div>
-            <h3>{props.accountType} </h3>
-            <div className="account-info">
-              <div className="avatar-container">
-                <img src={props.avatar} alt="account photo" />
-              </div>
-              <div className="account-details">
-                <h1> {props.accountName}</h1>
-                <span>{props.notificationCount} </span>
-              </div>
+          {personalAccountData?.length > 0 && (
+            <div>
+              <h3>Personal account</h3>
+              {personalAccountData?.map((personalItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(personalItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/personal`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/personal`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={personalItem?.profile_photo || props?.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1> {personalItem?.display_name || props.accountName}</h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
             </div>
-          </div>
-
-          <div>
-            <h3>{props.accountType} </h3>
-            <div className="account-info">
-              <div className="avatar-container">
-                <img src={props.avatar} alt="account photo" />
-              </div>
-              <div className="account-details">
-                <h1> {props.accountName}</h1>
-                <span>{props.notificationCount} </span>
-              </div>
+          )}
+          {developerAccountData.length > 0 && (
+            <div>
+              <h3>Developer account</h3>
+              {developerAccountData?.map((developerItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(developerItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/developer`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/developer`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={developerItem?.profile_photo || props.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1> {developerItem?.display_name || props.accountName}</h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
             </div>
-          </div>
+          )}
+          {instructorAccountData?.length > 0 && (
+            <div>
+              <h3>Instructor account</h3>
+              {instructorAccountData?.map((instructorItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(instructorItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/instructor`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/instructor`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={instructorItem?.profile_photo || props.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1>
+                      {" "}
+                      {instructorItem?.display_name || props.accountName}
+                    </h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+          {enterpriseAccountData?.length > 0 && (
+            <div>
+              <h3>Enterprise account</h3>
+              {enterpriseAccountData?.map((enterpriseItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(enterpriseItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/enterprise`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/enterprise`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={enterpriseItem?.profile_photo || props.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1>
+                      {" "}
+                      {enterpriseItem?.display_name || props.accountName}
+                    </h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
           {/* // )} */}
         </AccountDropdownBody>
 

package/src/components/header/getHeaderDetails.js

@@ -0,0 +1,31 @@
+import useAxios from "axios-hooks";
+
+const useHeader = () => {
+  // get user details
+  const [{ ...userDetails }, getUserDetails] = useAxios();
+
+  const handleGetUserDetails = async () => {
+    await getUserDetails({
+      method: "get",
+      url: "/iam/v1/users/me/",
+    });
+  };
+
+  // get user accounts detail
+
+  const [{ ...userAccountsDetail }, getUserAccountsDetail] = useAxios();
+
+  const handleGetUserAccountsDetail = async () => {
+    await getUserAccountsDetail({
+      method: "get",
+      url: "/iam/v1/accounts/",
+    });
+  };
+  return {
+    handleGetUserDetails,
+    userDetails,
+    handleGetUserAccountsDetail,
+    userAccountsDetail,
+  };
+};
+export default useHeader;

package/src/components/header/index.jsx

@@ -19,6 +19,7 @@ import {
   UserProfile,
   CountryFlagGroup,
 } from "./index.styled";
+import useHeader from "./getHeaderDetails";
 
 /**
  * @param {{
@@ -33,11 +34,17 @@ const HeaderComponent = (props) => {
   const [selected, setSelected] = useState("ES");
   const [isOpen, setIsOpen] = useState(false);
   const [searchResultOpen, setSearchResultOpen] = useState(false);
-
-  console.log(selected);
+  const {
+    handleGetUserAccountsDetail,
+    handleGetUserDetails,
+    userAccountsDetail,
+    userDetails,
+  } = useHeader();
 
   useEffect(() => {
     setIsOpen(false);
+    handleGetUserAccountsDetail();
+    // handleGetUserDetails();
   }, []);
 
   return (
@@ -118,13 +125,14 @@ const HeaderComponent = (props) => {
       {isOpen && (
         <AccountDropdown
           avatar={avatar}
-          activeAccountName={"Michael Ohaga"}
+          activeAccountName={"Default name"}
           activeAccountType={"Personal Account"}
-          accountName={"Jo Gulgowski"}
-          accountType={"Instructor Account"}
+          accountName={"Default name"}
+          accountType={"Default Account"}
           notificationCount={"5"}
           isOpen={isOpen}
           setIsOpen={setIsOpen}
+          data={userAccountsDetail}
         />
       )}
     </Navbar>

package/src/components/header/index.styled.js

@@ -176,7 +176,10 @@ export const CountryFlagGroup = styled.div`
     height: 10px;
     top: 18px;
   }
-
+  & .ReactFlagsSelect-module_selectOptions__3LNBJ {
+    width: 155px !important;
+    font-size: 12px !important;
+  }
   & .ReactFlagsSelect-module_flagsSelect__2pfa2 {
     width: 100%;
     padding-bottom: 0;
@@ -451,7 +454,10 @@ export const CountryFlagGroup2 = styled.div`
     height: 7px;
     top: 17px;
   }
-
+  & .ReactFlagsSelect-module_selectOptions__3LNBJ {
+    width: 155px !important;
+    font-size: 12px !important;
+  }
   & .ReactFlagsSelect-module_flagsSelect__2pfa2 {
     width: 100%;
     padding-bottom: 0;

package/src/components/index.js

@@ -26,3 +26,5 @@ export { default as NotificationThresholdComponent } from "./notificationThresho
 export { default as DevAPIdocs } from "./developerAPIdocs";
 export { default as Calender } from "./calender/input";
 export { default as ErrorPage } from "./errorPage";
+export { default as AppMainLayout } from "./AppMainLayout";
+export { OutletContext as OutletContext } from "./AppMainLayout";

package/src/components/sideBar/userCard/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {
   UserCardContainer,
@@ -7,15 +7,31 @@ import {
   Handle,
   UserDetail,
 } from "./styles";
+import useHeader from "../../header/getHeaderDetails";
+import Loader from "../../loader";
 
 const UserCard = ({ user, isOpen }) => {
+  const { handleGetUserDetails, userDetails } = useHeader();
+  useEffect(() => {
+    handleGetUserDetails();
+  }, []);
   return (
     <UserCardContainer isOpen={isOpen}>
-      <Avatar src={user.avatar} isOpen={isOpen} />
-      <UserDetail isOpen={isOpen}>
-        <UserName>{user.name}</UserName>
-        <Handle>{user.handle}</Handle>
-      </UserDetail>
+      {userDetails?.loading ? (
+        <Loader />
+      ) : (
+        <>
+          <Avatar src={user.avatar} isOpen={isOpen} />
+          <UserDetail isOpen={isOpen}>
+            <UserName>
+              {userDetails?.data?.first_name +
+                " " +
+                userDetails?.data?.last_name}
+            </UserName>
+            <Handle>{`@ ${userDetails?.data?.username}`}</Handle>
+          </UserDetail>
+        </>
+      )}
     </UserCardContainer>
   );
 };

package/src/hooks/leftNavMenu.jsx

@@ -0,0 +1,112 @@
+// import { useState } from "react";
+import {
+  FaSmile,
+  FaMicrophone,
+  FaHeadphonesAlt,
+  FaLanguage,
+  FaChartLine,
+  FaFileAlt,
+  FaBook,
+  FaUsers,
+  FaBullhorn,
+  FaUser,
+  FaCog,
+  FaQuestion,
+  FaCode,
+} from "react-icons/fa";
+// import { HiOutlineBookOpen } from "react-icons/hi";
+import { BsChatSquareText } from "react-icons/bs";
+import { MdOutlineBook } from "react-icons/md";
+import UserImage from "../assets/images/dashboardImage.png";
+import Learning from "../assets/svg/learning";
+import { AwardIcon } from "../assets/svg/award";
+import { DocumentIcon } from "../assets/svg/document";
+import { TeamsIcon } from "../assets/svg/teams";
+import { VolumeIcon } from "../assets/svg/volume";
+import { BookIcon } from "../assets/svg/book";
+import { DashboardIcon } from "../assets/svg/dashboard";
+
+export const user = {
+  name: "John Doe",
+  handle: "@johndoe",
+  avatar: UserImage,
+};
+
+export const leftNavMenu = [
+  {
+    path: "/learning",
+    label: "Learning",
+    icon: <Learning />,
+  },
+  {
+    path: "/community",
+    label: "Community",
+    icon: <BsChatSquareText />,
+  },
+  {
+    path: "/fun",
+    label: "Fun",
+    icon: <FaSmile />,
+  },
+  {
+    path: "/duet",
+    label: "Duet",
+    icon: <FaHeadphonesAlt />,
+  },
+  {
+    path: "/speech",
+    label: "Speech",
+    icon: <FaMicrophone />,
+  },
+  {
+    path: "/dictionary",
+    label: "Dictionary",
+    icon: <MdOutlineBook />,
+  },
+];
+
+export const sideMenuOptions = [
+  {
+    userType: "developer",
+    routes: [
+      {
+        path: "/dashboard",
+        icon: <DashboardIcon />,
+        text: "Dashboard",
+      },
+      { path: "/reports/students", icon: <AwardIcon />, text: "Reports" },
+
+      {
+        path: "/courses",
+        icon: <BookIcon />,
+        text: "Courses",
+      },
+      {
+        path: "/manage-teams",
+        icon: <TeamsIcon />,
+        text: "Manage Teams",
+      },
+      {
+        path: "/announcements",
+        icon: <VolumeIcon />,
+        text: "Announcements",
+        notifications: 3,
+      },
+    ],
+  },
+  {
+    userType: "user",
+    routes: [
+      {
+        path: "/dashboard",
+        icon: <FaChartLine />,
+        text: "Dashboard",
+        notifications: 1,
+      },
+      { path: "/courses", icon: <FaBook />, text: "Courses" },
+      { path: "/teams", icon: <FaUsers />, text: "My teams" },
+      { path: "/profile", icon: <FaUser />, text: "Profile" },
+      { path: "/help", icon: <FaQuestion />, text: "Help" },
+    ],
+  },
+];