l-min-components 1.0.260 → 1.0.262

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.260",
+  "version": "1.0.262",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AppMainLayout/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext } from "react";
+import React, { useState, useEffect, createContext, useRef } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
@@ -22,9 +22,7 @@ const AppMainLayout = () => {
   const [rightLayout, setRightLayout] = useState(true);
   const [rightComponent, setRightComponent] = useState();
   const [generalData, setGeneralData] = useState({});
-  console.log("====================================");
-  console.log(generalData);
-  console.log("====================================");
+
   return (
     <OutletContext.Provider
       value={{ setRightComponent, setRightLayout, generalData, setGeneralData }}

package/src/components/header/index.jsx

@@ -115,8 +115,9 @@ const HeaderComponent = (props) => {
         window.location.host?.includes("localhost")
       ) {
         setSelectedAccount(
-          developerArray.find((item) => item?.id === activeDeveloperAccount) ??
-            item
+          developerArray?.find(
+            (item) => item?.id === activeDeveloperAccount ?? item
+          )
         );
       }
       if (pathname?.includes("instructor")) {
@@ -127,7 +128,46 @@ const HeaderComponent = (props) => {
       }
     }
   }, [userAccountsDetail?.data]);
+  const containerRef = useRef(null);
+  const secondContainerRef = useRef(null);
 
+  // logic for closing language dropdown when clicking outside
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target)
+      ) {
+        setLanguageDropdown();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [setLanguageDropdown]);
+
+  // logic for closing accounts dropdown when clicking outside
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        secondContainerRef.current &&
+        !secondContainerRef.current.contains(event.target)
+      ) {
+        setIsOpen();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [setIsOpen]);
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />
@@ -209,7 +249,7 @@ const HeaderComponent = (props) => {
             <ArrowDownIcon />
           </div>
           {languageDropdown && (
-            <ul className="dropdown_list">
+            <ul className="dropdown_list" ref={containerRef}>
               <li onClick={() => setLanguageDropdown()}>
                 <img src={usFlag} alt="" /> <span>English</span>
               </li>
@@ -224,6 +264,7 @@ const HeaderComponent = (props) => {
               setIsOpen(!isOpen);
               setLanguageDropdown();
             }}
+            ref={secondContainerRef}
           >
             <div className="user-img-container">
               <img

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

@@ -40,6 +40,7 @@ export const NavGroup = styled.div`
       background: white;
       padding: 15px 0;
       border-radius: 15px;
+      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       li {
         list-style-type: none;
         display: flex;
@@ -521,6 +522,7 @@ export const NavGroup2 = styled.div`
       background: white;
       padding: 15px 0;
       border-radius: 15px;
+      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       li {
         list-style-type: none;
         display: flex;

package/src/components/header/login-header.jsx

@@ -32,6 +32,27 @@ const HeaderComponentTwo = (props) => {
   const goToLogin = useCallback(() => {
     navigate("/sign-in");
   }, []);
+
+  // logic for closing language dropdown when clicking outside
+
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target)
+      ) {
+        setLanguageDropdown();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [setLanguageDropdown]);
   return (
     <Navbar2
       onClick={() => {
@@ -66,7 +87,7 @@ const HeaderComponentTwo = (props) => {
             <ArrowDownIcon />
           </div>
           {languageDropdown && (
-            <ul className="dropdown_list">
+            <ul className="dropdown_list" ref={containerRef}>
               <li onClick={() => setLanguageDropdown()}>
                 <img src={usFlag} alt="" /> <span>English</span>
               </li>
@@ -74,9 +95,10 @@ const HeaderComponentTwo = (props) => {
           )}
         </div>
 
-        {location.pathname.includes("sign-up") &&
-          !location.pathname.includes("organization-details") &&
-          !location.pathname.includes("subscription-plan")(
+        {window.location.pathname.includes("sign-up") &&
+          !window.location.pathname.includes("organization-details") &&
+          !window.location.pathname.includes("subscription-plan") &&
+          !window.location.pathname.includes("payment") && (
             <ButtonComponent
               type="secondary"
               text="Log in"

package/src/components/sideNav/svg/commIcon.jsx

@@ -0,0 +1,35 @@
+const CommunityIcon = () => {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.58073 16.3327H7.16406C3.83073 16.3327 2.16406 15.4993 2.16406 11.3327V7.16602C2.16406 3.83268 3.83073 2.16602 7.16406 2.16602H13.8307C17.1641 2.16602 18.8307 3.83268 18.8307 7.16602V11.3327C18.8307 14.666 17.1641 16.3327 13.8307 16.3327H13.4141C13.1557 16.3327 12.9057 16.4577 12.7474 16.666L11.4974 18.3327C10.9474 19.066 10.0474 19.066 9.4974 18.3327L8.2474 16.666C8.11406 16.4827 7.80573 16.3327 7.58073 16.3327Z"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.33594 7.16602H14.6693"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.33594 11.334H11.3359"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+export default CommunityIcon;

package/src/components/sideNav/svg/dictionaryIcon.jsx

@@ -0,0 +1,33 @@
+const DictionaryIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="19"
+      viewBox="0 0 14 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.17966 0.431108C1.59313 0.502443 1.1572 0.716446 0.733159 1.14445C0.400265 1.47338 0.186262 1.83402 0.0713344 2.25806C0.00396302 2.49584 0 2.94763 0 9.50643C0 16.0652 0.00396302 16.517 0.0713344 16.7548C0.305153 17.5989 0.990755 18.2885 1.8428 18.5302C2.08851 18.5976 2.39763 18.6016 8.04493 18.6016H13.9895V11.9041C13.9895 8.21845 13.9776 5.15899 13.9617 5.09955C13.9221 4.96084 13.7517 4.76269 13.5971 4.67947C13.4822 4.61606 13.0582 4.6121 7.72789 4.59228L1.98151 4.57247L1.7041 4.43772C1.00661 4.0969 0.594453 3.32411 0.72127 2.58699C0.844123 1.86572 1.4148 1.2792 2.12022 1.14445C2.25496 1.12067 4.41084 1.10482 8.16382 1.10482H14.0014L13.9696 0.958191C13.9102 0.69663 13.7002 0.490555 13.4307 0.431108C13.2484 0.387516 2.53237 0.387516 2.17966 0.431108ZM1.30383 5.01632C1.4148 5.07181 1.60106 5.15503 1.72391 5.20259C1.94188 5.28581 1.94584 5.28581 7.62089 5.2977L13.2959 5.30562V11.6068V17.908H7.81111C4.29591 17.908 2.25496 17.8922 2.12022 17.8684C1.64465 17.7773 1.14531 17.4166 0.919421 17.0045C0.68164 16.5685 0.693529 16.8856 0.693529 10.4694V4.59228L0.899606 4.75477C1.01057 4.84195 1.19287 4.96084 1.30383 5.01632Z"
+        fill="#ADB3B3"
+      />
+      <path
+        d="M4.36646 7.4497C4.33079 7.46952 4.27531 7.53689 4.2436 7.59633C4.12471 7.82619 2.98733 10.7509 2.91203 11.0204C2.85655 11.2066 2.82088 11.492 2.80503 11.817L2.78125 12.3242L3.13396 12.3123L3.48667 12.3004L3.51045 11.8209C3.52233 11.5594 3.54611 11.3255 3.56197 11.2978C3.60556 11.2265 6.237 11.2304 6.24493 11.2978C6.24889 11.3255 6.26078 11.5633 6.27663 11.8249L6.30041 12.3004L6.65312 12.3123L7.00583 12.3242L6.98205 11.817C6.97016 11.5078 6.93053 11.1987 6.88298 11.0323C6.74427 10.5171 5.56725 7.59237 5.46025 7.4933C5.37307 7.41404 5.32551 7.40611 4.90147 7.40611C4.64783 7.40611 4.40609 7.42592 4.36646 7.4497ZM5.49196 9.32817C5.74955 9.97811 5.95167 10.521 5.94374 10.5329C5.92393 10.5488 3.85523 10.5448 3.83938 10.525C3.83145 10.5171 4.0296 10.0059 4.27531 9.38762C4.52102 8.76543 4.73502 8.22645 4.74691 8.18682C4.76672 8.13531 4.80635 8.11945 4.8975 8.12738C5.02036 8.13927 5.02432 8.14323 5.49196 9.32817Z"
+        fill="#ADB3B3"
+      />
+      <path
+        d="M7.71094 11.2492V11.6058H9.38333H11.0597L9.42693 13.2386C8.52732 14.1382 7.77435 14.9268 7.75057 14.9863C7.73075 15.0497 7.71094 15.2597 7.71094 15.4539V15.8066H9.81134H11.9157L11.9038 15.4579L11.8919 15.1131L10.2275 15.1012L8.56695 15.0933L10.1958 13.4566C11.8206 11.8278 11.8246 11.8238 11.8721 11.6058C11.8959 11.4869 11.9117 11.2809 11.9038 11.1501L11.8919 10.9123L9.80341 10.9004L7.71094 10.8925V11.2492Z"
+        fill="#ADB3B3"
+      />
+      <path
+        d="M2.0392 1.9017C1.84105 1.99285 1.62308 2.17911 1.53986 2.34159C1.50815 2.40104 1.48438 2.45652 1.48438 2.47237C1.48438 2.48426 4.1396 2.49219 7.38928 2.49219H13.2942V2.15533V1.81847H7.75784C2.27302 1.81847 2.21753 1.82244 2.0392 1.9017Z"
+        fill="#ADB3B3"
+      />
+      <path
+        d="M1.48438 3.26011C1.48438 3.37503 1.7499 3.66434 1.95994 3.77926L2.1779 3.89815L7.73802 3.91004L13.2942 3.91797V3.5613V3.20463H7.38928C2.30868 3.20463 1.48438 3.21255 1.48438 3.26011Z"
+        fill="#ADB3B3"
+      />
+    </svg>
+  );
+};
+export default DictionaryIcon;

package/src/components/sideNav/svg/duetIcon.jsx

@@ -0,0 +1,29 @@
+const DuetIcon = () => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.0026 8.33398C15.2938 8.49109 12.6887 9.4301 10.5026 11.0373C8.31652 9.4301 5.71138 8.49109 3.00261 8.33398V10.8007C2.55984 10.8015 2.13554 10.9782 1.82301 11.2918C1.51047 11.6055 1.33528 12.0304 1.33594 12.4732V13.3098C1.33594 14.234 3.00261 15.1498 3.00261 15.1498V16.8223C5.21594 16.9647 7.35049 17.6985 9.18344 18.9473C9.64626 19.2685 10.087 19.6204 10.5026 20.0007C10.9182 19.6204 11.359 19.2685 11.8218 18.9473C13.6547 17.6985 15.7893 16.9647 18.0026 16.8223V14.9823C18.4454 14.9814 18.8697 14.8048 19.1822 14.4911C19.4947 14.1775 19.6699 13.7526 19.6693 13.3098V12.4732C19.6699 12.0304 19.4947 11.6055 19.1822 11.2918C18.8697 10.9782 18.4454 10.8015 18.0026 10.8007V8.33398ZM10.5026 17.8523C8.77426 16.5857 6.77882 15.7316 4.66927 15.3557V10.2307C6.28601 10.5563 7.821 11.203 9.18344 12.1323C9.64626 12.4535 10.087 12.8054 10.5026 13.1857C10.9182 12.8054 11.359 12.4535 11.8218 12.1323C13.1841 11.2027 14.7191 10.5558 16.3359 10.2298V15.3557C14.2264 15.7316 12.231 16.5857 10.5026 17.8523ZM9.66927 6.66732H11.3359V7.50065H9.66927V6.66732ZM9.66927 3.33398H11.3359V4.16732H9.66927V3.33398Z"
+        fill="#ADB2B2"
+      />
+      <path
+        d="M9.66355 8.33283H11.3302V9.16617H9.66355V8.33283ZM7.99689 4.16617C8.2179 4.16617 8.42986 4.07837 8.58614 3.92209C8.74242 3.76581 8.83022 3.55385 8.83022 3.33283C8.83099 3.22428 8.81019 3.11665 8.769 3.0162C8.72781 2.91576 8.66707 2.8245 8.59031 2.74774C8.51355 2.67098 8.42229 2.61024 8.32185 2.56905C8.2214 2.52787 8.11378 2.50706 8.00522 2.50783C7.89633 2.50729 7.7884 2.52819 7.68759 2.56936C7.58678 2.61052 7.49507 2.67114 7.41769 2.74774C7.26141 2.90246 7.17299 3.11292 7.17189 3.33283C7.17078 3.55274 7.25708 3.76408 7.4118 3.92036C7.56651 4.07664 7.77698 4.16506 7.99689 4.16617Z"
+        fill="#ADB2B2"
+      />
+      <path
+        d="M12.9974 4.16667C13.4576 4.16667 13.8307 3.79357 13.8307 3.33333C13.8307 2.8731 13.4576 2.5 12.9974 2.5C12.5372 2.5 12.1641 2.8731 12.1641 3.33333C12.1641 3.79357 12.5372 4.16667 12.9974 4.16667Z"
+        fill="#ADB2B2"
+      />
+      <path
+        d="M13.8307 6.66667H7.16406C6.50122 6.666 5.86572 6.4024 5.39703 5.9337C4.92833 5.465 4.66472 4.8295 4.66406 4.16667V2.5C4.66472 1.83716 4.92833 1.20166 5.39703 0.732964C5.86572 0.264266 6.50122 0.000661846 7.16406 0L13.8307 0C14.4936 0.000661846 15.1291 0.264266 15.5978 0.732964C16.0665 1.20166 16.3301 1.83716 16.3307 2.5V4.16667C16.3301 4.8295 16.0665 5.465 15.5978 5.9337C15.1291 6.4024 14.4936 6.666 13.8307 6.66667ZM7.16406 1.66667C6.94312 1.66689 6.73128 1.75476 6.57505 1.91099C6.41882 2.06722 6.33095 2.27905 6.33073 2.5V4.16667C6.33095 4.38761 6.41882 4.59945 6.57505 4.75568C6.73128 4.91191 6.94312 4.99978 7.16406 5H13.8307C14.0517 4.99978 14.2635 4.91191 14.4197 4.75568C14.576 4.59945 14.6638 4.38761 14.6641 4.16667V2.5C14.6638 2.27905 14.576 2.06722 14.4197 1.91099C14.2635 1.75476 14.0517 1.66689 13.8307 1.66667H7.16406Z"
+        fill="#ADB2B2"
+      />
+    </svg>
+  );
+};
+export default DuetIcon;

package/src/components/sideNav/svg/fun.jsx

@@ -0,0 +1,75 @@
+const FunIcon = () => {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.47135 10.8828L5.92969 13.4245"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.96094 10.9082L8.5026 13.4499"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M11.7734 12.166H11.7818"
+        stroke="#ADB3B3"
+        stroke-width="1.44747"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15.0547 12.166H15.063"
+        stroke="#ADB3B3"
+        stroke-width="1.44747"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13.4141 13.8174V13.8008"
+        stroke="#ADB3B3"
+        stroke-width="1.44747"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13.4141 10.5342V10.5176"
+        stroke="#ADB3B3"
+        stroke-width="1.44747"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7.9974 18.8333H12.9974C17.1641 18.8333 18.8307 17.1667 18.8307 13V11.3333C18.8307 7.16667 17.1641 5.5 12.9974 5.5H7.9974C3.83073 5.5 2.16406 7.16667 2.16406 11.3333V13C2.16406 17.1667 3.83073 18.8333 7.9974 18.8333Z"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M11.3401 2.16602L11.3318 3.00768C11.3234 3.46602 10.9568 3.83268 10.4984 3.83268H10.4734C10.0151 3.83268 9.64844 4.20768 9.64844 4.66602C9.64844 5.12435 10.0234 5.49935 10.4818 5.49935H11.3151"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+export default FunIcon;

package/src/components/sideNav/svg/learnIcon.jsx

@@ -0,0 +1,41 @@
+const LearnIcon = () => {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.8307 14.4501V4.39174C18.8307 3.39174 18.0141 2.65008 17.0224 2.73341H16.9724C15.2224 2.88341 12.5641 3.77508 11.0807 4.70841L10.9391 4.80008C10.6974 4.95008 10.2974 4.95008 10.0557 4.80008L9.8474 4.67508C8.36406 3.75008 5.71406 2.86674 3.96406 2.72508C2.9724 2.64174 2.16406 3.39174 2.16406 4.38341V14.4501C2.16406 15.2501 2.81406 16.0001 3.61406 16.1001L3.85573 16.1334C5.66406 16.3751 8.45573 17.2917 10.0557 18.1667L10.0891 18.1834C10.3141 18.3084 10.6724 18.3084 10.8891 18.1834C12.4891 17.3001 15.2891 16.3751 17.1057 16.1334L17.3807 16.1001C18.1807 16.0001 18.8307 15.2501 18.8307 14.4501Z"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.5 5.07422V17.5742"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.96094 7.57422H5.08594"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7.58594 10.0742H5.08594"
+        stroke="#ADB3B3"
+        stroke-width="1.0856"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+export default LearnIcon;

package/src/components/sideNav/svg/speechIcon.jsx

@@ -0,0 +1,17 @@
+const SpeechIcon = () => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.3516 6.14648C13.6988 5.5076 13.1746 4.76454 12.7791 3.91732C12.383 3.0701 12.1849 2.29232 12.1849 1.58398C12.1849 1.37565 12.2646 1.19843 12.4241 1.05232C12.5841 0.906762 12.7821 0.833984 13.0182 0.833984C13.2266 0.833984 13.4141 0.913707 13.5807 1.07315C13.7474 1.23315 13.8446 1.43121 13.8724 1.66732C13.9696 2.29232 14.1571 2.88954 14.4349 3.45898C14.7127 4.02843 15.0738 4.53537 15.5182 4.97982C15.9627 5.42426 16.4696 5.78871 17.0391 6.07315C17.6085 6.35815 18.2057 6.54926 18.8307 6.64648C19.0668 6.67426 19.2646 6.76787 19.4241 6.92732C19.5841 7.08732 19.6641 7.27148 19.6641 7.47982C19.6641 7.71593 19.5946 7.91398 19.4557 8.07398C19.3168 8.23343 19.1432 8.31315 18.9349 8.31315C18.2127 8.31315 17.428 8.11176 16.5807 7.70898C15.7335 7.30621 14.9905 6.78537 14.3516 6.14648ZM16.6849 3.81315C16.3238 3.45204 16.0391 3.06648 15.8307 2.65648C15.6224 2.24704 15.5182 1.86871 15.5182 1.52148C15.5182 1.32704 15.6016 1.16371 15.7682 1.03148C15.9349 0.899818 16.1363 0.833984 16.3724 0.833984C16.5668 0.833984 16.7371 0.906762 16.8832 1.05232C17.0288 1.19843 17.1432 1.38954 17.2266 1.62565C17.296 1.8201 17.3793 2.00065 17.4766 2.16732C17.5738 2.33398 17.6988 2.49371 17.8516 2.64648C18.0043 2.79926 18.1641 2.92065 18.3307 3.01065C18.4974 3.10121 18.678 3.18121 18.8724 3.25065C19.1085 3.33398 19.2996 3.45204 19.4457 3.60482C19.5913 3.7576 19.6641 3.93121 19.6641 4.12565C19.6641 4.36176 19.5982 4.56315 19.4666 4.72982C19.3343 4.89648 19.171 4.97982 18.9766 4.97982C18.6293 4.97982 18.2507 4.87565 17.8407 4.66732C17.4313 4.45898 17.046 4.17426 16.6849 3.81315ZM8.83073 10.834C7.91406 10.834 7.12934 10.5076 6.47656 9.85482C5.82378 9.20204 5.4974 8.41732 5.4974 7.50065C5.4974 6.58398 5.82378 5.79926 6.47656 5.14648C7.12934 4.49371 7.91406 4.16732 8.83073 4.16732C9.7474 4.16732 10.5321 4.49371 11.1849 5.14648C11.8377 5.79926 12.1641 6.58398 12.1641 7.50065C12.1641 8.41732 11.8377 9.20204 11.1849 9.85482C10.5321 10.5076 9.7474 10.834 8.83073 10.834ZM3.83073 17.5007C3.3724 17.5007 2.98017 17.3376 2.65406 17.0115C2.3274 16.6848 2.16406 16.2923 2.16406 15.834V15.1673C2.16406 14.709 2.28212 14.2784 2.51823 13.8757C2.75434 13.4729 3.08073 13.1673 3.4974 12.959C4.20573 12.5979 5.00434 12.2923 5.89323 12.0423C6.78212 11.7923 7.76128 11.6673 8.83073 11.6673C9.90017 11.6673 10.8793 11.7923 11.7682 12.0423C12.6571 12.2923 13.4557 12.5979 14.1641 12.959C14.5807 13.1673 14.9071 13.4729 15.1432 13.8757C15.3793 14.2784 15.4974 14.709 15.4974 15.1673V15.834C15.4974 16.2923 15.3343 16.6848 15.0082 17.0115C14.6816 17.3376 14.2891 17.5007 13.8307 17.5007H3.83073ZM3.83073 15.834H13.8307V15.1673C13.8307 15.0145 13.7927 14.8757 13.7166 14.7507C13.6399 14.6257 13.5391 14.5284 13.4141 14.459C12.9141 14.209 12.2718 13.959 11.4874 13.709C10.7024 13.459 9.81684 13.334 8.83073 13.334C7.84462 13.334 6.95906 13.459 6.17406 13.709C5.38962 13.959 4.7474 14.209 4.2474 14.459C4.1224 14.5284 4.02184 14.6257 3.94573 14.7507C3.86906 14.8757 3.83073 15.0145 3.83073 15.1673V15.834ZM8.83073 9.16732C9.28906 9.16732 9.68156 9.00398 10.0082 8.67732C10.3343 8.35121 10.4974 7.95898 10.4974 7.50065C10.4974 7.04232 10.3343 6.64982 10.0082 6.32315C9.68156 5.99704 9.28906 5.83398 8.83073 5.83398C8.3724 5.83398 7.98017 5.99704 7.65406 6.32315C7.3274 6.64982 7.16406 7.04232 7.16406 7.50065C7.16406 7.95898 7.3274 8.35121 7.65406 8.67732C7.98017 9.00398 8.3724 9.16732 8.83073 9.16732Z"
+        fill="#ADB2B2"
+      />
+    </svg>
+  );
+};
+export default SpeechIcon;

package/src/hooks/leftNavMenu.jsx

@@ -26,6 +26,11 @@ import { TeamsIcon } from "../assets/svg/teams";
 import { VolumeIcon } from "../assets/svg/volume";
 import { BookIcon } from "../assets/svg/book";
 import { DashboardIcon } from "../assets/svg/dashboard";
+import CommunityIcon from "../components/sideNav/svg/commIcon";
+import FunIcon from "../components/sideNav/svg/fun";
+import DuetIcon from "../components/sideNav/svg/duetIcon";
+import SpeechIcon from "../components/sideNav/svg/speechIcon";
+import DictionaryIcon from "../components/sideNav/svg/dictionaryIcon";
 
 export const user = {
   name: "John Doe",
@@ -42,27 +47,27 @@ export const leftNavMenu = [
   {
     path: "/community",
     label: "Community",
-    icon: <BsChatSquareText />,
+    icon: <CommunityIcon />,
   },
   {
     path: "/fun",
     label: "Fun",
-    icon: <FaSmile />,
+    icon: <FunIcon />,
   },
   {
     path: "/duet",
     label: "Duet",
-    icon: <FaHeadphonesAlt />,
+    icon: <DuetIcon />,
   },
   {
     path: "/speech",
     label: "Speech",
-    icon: <FaMicrophone />,
+    icon: <SpeechIcon />,
   },
   {
     path: "/dictionary",
     label: "Dictionary",
-    icon: <MdOutlineBook />,
+    icon: <DictionaryIcon />,
   },
 ];
 

package/src/components/sideNav/svg/commIcon.svg

@@ -1,5 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.58073 16.3327H7.16406C3.83073 16.3327 2.16406 15.4993 2.16406 11.3327V7.16602C2.16406 3.83268 3.83073 2.16602 7.16406 2.16602H13.8307C17.1641 2.16602 18.8307 3.83268 18.8307 7.16602V11.3327C18.8307 14.666 17.1641 16.3327 13.8307 16.3327H13.4141C13.1557 16.3327 12.9057 16.4577 12.7474 16.666L11.4974 18.3327C10.9474 19.066 10.0474 19.066 9.4974 18.3327L8.2474 16.666C8.11406 16.4827 7.80573 16.3327 7.58073 16.3327Z" stroke="#ADB3B3" stroke-width="1.0856" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.33594 7.16602H14.6693" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.33594 11.334H11.3359" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/sideNav/svg/dictionaryIcon.svg

@@ -1,7 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.17966 0.931109C5.59313 1.00244 5.1572 1.21645 4.73316 1.64445C4.40027 1.97338 4.18626 2.33402 4.07133 2.75806C4.00396 2.99584 4 3.44763 4 10.0064C4 16.5652 4.00396 17.017 4.07133 17.2548C4.30515 18.0989 4.99076 18.7885 5.8428 19.0302C6.08851 19.0976 6.39763 19.1016 12.0449 19.1016H17.9895V12.4041C17.9895 8.71845 17.9776 5.65899 17.9617 5.59955C17.9221 5.46084 17.7517 5.26269 17.5971 5.17947C17.4822 5.11606 17.0582 5.1121 11.7279 5.09228L5.98151 5.07247L5.7041 4.93772C5.00661 4.5969 4.59445 3.82411 4.72127 3.08699C4.84412 2.36572 5.4148 1.7792 6.12022 1.64445C6.25496 1.62067 8.41084 1.60482 12.1638 1.60482H18.0014L17.9696 1.45819C17.9102 1.19663 17.7002 0.990554 17.4307 0.931109C17.2484 0.887515 6.53237 0.887515 6.17966 0.931109ZM5.30383 5.51632C5.4148 5.57181 5.60106 5.65503 5.72391 5.70259C5.94188 5.78581 5.94584 5.78581 11.6209 5.7977L17.2959 5.80563V12.1068V18.408H11.8111C8.29591 18.408 6.25496 18.3922 6.12022 18.3684C5.64465 18.2773 5.14531 17.9166 4.91942 17.5045C4.68164 17.0685 4.69353 17.3856 4.69353 10.9694V5.09228L4.89961 5.25477C5.01057 5.34195 5.19287 5.46084 5.30383 5.51632Z" fill="#00C2C2"/>
-<path d="M8.36646 7.9497C8.33079 7.96952 8.27531 8.03689 8.2436 8.09633C8.12471 8.32619 6.98733 11.2509 6.91203 11.5204C6.85655 11.7066 6.82088 11.992 6.80503 12.317L6.78125 12.8242L7.13396 12.8123L7.48667 12.8004L7.51045 12.3209C7.52233 12.0594 7.54611 11.8255 7.56197 11.7978C7.60556 11.7265 10.237 11.7304 10.2449 11.7978C10.2489 11.8255 10.2608 12.0633 10.2766 12.3249L10.3004 12.8004L10.6531 12.8123L11.0058 12.8242L10.9821 12.317C10.9702 12.0078 10.9305 11.6987 10.883 11.5323C10.7443 11.0171 9.56725 8.09237 9.46025 7.9933C9.37307 7.91404 9.32551 7.90611 8.90147 7.90611C8.64783 7.90611 8.40609 7.92592 8.36646 7.9497ZM9.49196 9.82817C9.74955 10.4781 9.95167 11.021 9.94374 11.0329C9.92393 11.0488 7.85523 11.0448 7.83938 11.025C7.83145 11.0171 8.0296 10.5059 8.27531 9.88762C8.52102 9.26543 8.73502 8.72645 8.74691 8.68682C8.76672 8.63531 8.80635 8.61945 8.8975 8.62738C9.02036 8.63927 9.02432 8.64323 9.49196 9.82817Z" fill="#00C2C2"/>
-<path d="M11.7109 11.7492V12.1058H13.3833H15.0597L13.4269 13.7386C12.5273 14.6382 11.7743 15.4268 11.7506 15.4863C11.7308 15.5497 11.7109 15.7597 11.7109 15.9539V16.3066H13.8113H15.9157L15.9038 15.9579L15.8919 15.6131L14.2275 15.6012L12.567 15.5933L14.1958 13.9566C15.8206 12.3278 15.8246 12.3238 15.8721 12.1058C15.8959 11.9869 15.9117 11.7809 15.9038 11.6501L15.8919 11.4123L13.8034 11.4004L11.7109 11.3925V11.7492Z" fill="#00C2C2"/>
-<path d="M6.0392 2.4017C5.84105 2.49285 5.62308 2.67911 5.53986 2.84159C5.50815 2.90104 5.48438 2.95652 5.48438 2.97237C5.48438 2.98426 8.1396 2.99219 11.3893 2.99219H17.2942V2.65533V2.31847H11.7578C6.27302 2.31847 6.21753 2.32244 6.0392 2.4017Z" fill="#00C2C2"/>
-<path d="M5.48438 3.76011C5.48438 3.87503 5.7499 4.16434 5.95994 4.27926L6.1779 4.39815L11.738 4.41004L17.2942 4.41797V4.0613V3.70463H11.3893C6.30868 3.70463 5.48438 3.71255 5.48438 3.76011Z" fill="#00C2C2"/>
-</svg>

package/src/components/sideNav/svg/fun.svg

@@ -1,10 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.47135 10.8828L5.92969 13.4245" stroke="#ADB3B3" stroke-width="1.0856" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.96094 10.9082L8.5026 13.4499" stroke="#ADB3B3" stroke-width="1.0856" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.7734 12.166H11.7818" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.0547 12.166H15.063" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.4141 13.8174V13.8008" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.4141 10.5342V10.5176" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.9974 18.8333H12.9974C17.1641 18.8333 18.8307 17.1667 18.8307 13V11.3333C18.8307 7.16667 17.1641 5.5 12.9974 5.5H7.9974C3.83073 5.5 2.16406 7.16667 2.16406 11.3333V13C2.16406 17.1667 3.83073 18.8333 7.9974 18.8333Z" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.3401 2.16602L11.3318 3.00768C11.3234 3.46602 10.9568 3.83268 10.4984 3.83268H10.4734C10.0151 3.83268 9.64844 4.20768 9.64844 4.66602C9.64844 5.12435 10.0234 5.49935 10.4818 5.49935H11.3151" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/sideNav/svg/learnIcon.svg

@@ -1,6 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.8307 14.4501V4.39174C18.8307 3.39174 18.0141 2.65008 17.0224 2.73341H16.9724C15.2224 2.88341 12.5641 3.77508 11.0807 4.70841L10.9391 4.80008C10.6974 4.95008 10.2974 4.95008 10.0557 4.80008L9.8474 4.67508C8.36406 3.75008 5.71406 2.86674 3.96406 2.72508C2.9724 2.64174 2.16406 3.39174 2.16406 4.38341V14.4501C2.16406 15.2501 2.81406 16.0001 3.61406 16.1001L3.85573 16.1334C5.66406 16.3751 8.45573 17.2917 10.0557 18.1667L10.0891 18.1834C10.3141 18.3084 10.6724 18.3084 10.8891 18.1834C12.4891 17.3001 15.2891 16.3751 17.1057 16.1334L17.3807 16.1001C18.1807 16.0001 18.8307 15.2501 18.8307 14.4501Z" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.5 5.07422V17.5742" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.96094 7.57422H5.08594" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.58594 10.0742H5.08594" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/sideNav/svg/speechIcon.svg

@@ -1,3 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.3516 6.14648C13.6988 5.5076 13.1746 4.76454 12.7791 3.91732C12.383 3.0701 12.1849 2.29232 12.1849 1.58398C12.1849 1.37565 12.2646 1.19843 12.4241 1.05232C12.5841 0.906762 12.7821 0.833984 13.0182 0.833984C13.2266 0.833984 13.4141 0.913707 13.5807 1.07315C13.7474 1.23315 13.8446 1.43121 13.8724 1.66732C13.9696 2.29232 14.1571 2.88954 14.4349 3.45898C14.7127 4.02843 15.0738 4.53537 15.5182 4.97982C15.9627 5.42426 16.4696 5.78871 17.0391 6.07315C17.6085 6.35815 18.2057 6.54926 18.8307 6.64648C19.0668 6.67426 19.2646 6.76787 19.4241 6.92732C19.5841 7.08732 19.6641 7.27148 19.6641 7.47982C19.6641 7.71593 19.5946 7.91398 19.4557 8.07398C19.3168 8.23343 19.1432 8.31315 18.9349 8.31315C18.2127 8.31315 17.428 8.11176 16.5807 7.70898C15.7335 7.30621 14.9905 6.78537 14.3516 6.14648ZM16.6849 3.81315C16.3238 3.45204 16.0391 3.06648 15.8307 2.65648C15.6224 2.24704 15.5182 1.86871 15.5182 1.52148C15.5182 1.32704 15.6016 1.16371 15.7682 1.03148C15.9349 0.899818 16.1363 0.833984 16.3724 0.833984C16.5668 0.833984 16.7371 0.906762 16.8832 1.05232C17.0288 1.19843 17.1432 1.38954 17.2266 1.62565C17.296 1.8201 17.3793 2.00065 17.4766 2.16732C17.5738 2.33398 17.6988 2.49371 17.8516 2.64648C18.0043 2.79926 18.1641 2.92065 18.3307 3.01065C18.4974 3.10121 18.678 3.18121 18.8724 3.25065C19.1085 3.33398 19.2996 3.45204 19.4457 3.60482C19.5913 3.7576 19.6641 3.93121 19.6641 4.12565C19.6641 4.36176 19.5982 4.56315 19.4666 4.72982C19.3343 4.89648 19.171 4.97982 18.9766 4.97982C18.6293 4.97982 18.2507 4.87565 17.8407 4.66732C17.4313 4.45898 17.046 4.17426 16.6849 3.81315ZM8.83073 10.834C7.91406 10.834 7.12934 10.5076 6.47656 9.85482C5.82378 9.20204 5.4974 8.41732 5.4974 7.50065C5.4974 6.58398 5.82378 5.79926 6.47656 5.14648C7.12934 4.49371 7.91406 4.16732 8.83073 4.16732C9.7474 4.16732 10.5321 4.49371 11.1849 5.14648C11.8377 5.79926 12.1641 6.58398 12.1641 7.50065C12.1641 8.41732 11.8377 9.20204 11.1849 9.85482C10.5321 10.5076 9.7474 10.834 8.83073 10.834ZM3.83073 17.5007C3.3724 17.5007 2.98017 17.3376 2.65406 17.0115C2.3274 16.6848 2.16406 16.2923 2.16406 15.834V15.1673C2.16406 14.709 2.28212 14.2784 2.51823 13.8757C2.75434 13.4729 3.08073 13.1673 3.4974 12.959C4.20573 12.5979 5.00434 12.2923 5.89323 12.0423C6.78212 11.7923 7.76128 11.6673 8.83073 11.6673C9.90017 11.6673 10.8793 11.7923 11.7682 12.0423C12.6571 12.2923 13.4557 12.5979 14.1641 12.959C14.5807 13.1673 14.9071 13.4729 15.1432 13.8757C15.3793 14.2784 15.4974 14.709 15.4974 15.1673V15.834C15.4974 16.2923 15.3343 16.6848 15.0082 17.0115C14.6816 17.3376 14.2891 17.5007 13.8307 17.5007H3.83073ZM3.83073 15.834H13.8307V15.1673C13.8307 15.0145 13.7927 14.8757 13.7166 14.7507C13.6399 14.6257 13.5391 14.5284 13.4141 14.459C12.9141 14.209 12.2718 13.959 11.4874 13.709C10.7024 13.459 9.81684 13.334 8.83073 13.334C7.84462 13.334 6.95906 13.459 6.17406 13.709C5.38962 13.959 4.7474 14.209 4.2474 14.459C4.1224 14.5284 4.02184 14.6257 3.94573 14.7507C3.86906 14.8757 3.83073 15.0145 3.83073 15.1673V15.834ZM8.83073 9.16732C9.28906 9.16732 9.68156 9.00398 10.0082 8.67732C10.3343 8.35121 10.4974 7.95898 10.4974 7.50065C10.4974 7.04232 10.3343 6.64982 10.0082 6.32315C9.68156 5.99704 9.28906 5.83398 8.83073 5.83398C8.3724 5.83398 7.98017 5.99704 7.65406 6.32315C7.3274 6.64982 7.16406 7.04232 7.16406 7.50065C7.16406 7.95898 7.3274 8.35121 7.65406 8.67732C7.98017 9.00398 8.3724 9.16732 8.83073 9.16732Z" fill="#ADB2B2"/>
-</svg>