l-min-components 1.0.559 → 1.0.562

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.559",
+  "version": "1.0.562",
   "type": "module",
   "files": [
     "src/assets",
@@ -42,7 +42,7 @@
     "react-lottie": "^1.2.4",
     "react-mic": "^12.4.6",
     "react-modal": "^3.16.1",
-    "react-player": "^2.14.1",
+    "react-player": "^2.15.1",
     "react-router-dom": "^6.8.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",

package/src/components/header/index.jsx

@@ -222,6 +222,21 @@ const HeaderComponent = (props) => {
     }
   }, []);
 
+
+  // Determine home page for active style purpose
+  const isHomePage = () => window.location.pathname === '/';
+
+  // Determine the label based on the current path
+  const getNavLinkLabel = () => {
+    const path = window.location.pathname;
+    if (path.includes("fun")) return "Fun";
+    if (path.includes("community")) return "Community";
+    if (path.includes("duet")) return "Duet";
+    if (path.includes("speech")) return "Speech";
+    if (path.includes("dictionary")) return "Dictionary";
+    return "Learning";
+  };
+
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />
@@ -232,15 +247,8 @@ const HeaderComponent = (props) => {
         }}
       >
         <li>
-          <a className={"active"}>
-            <BookIcon />{" "}
-            {(window.location.pathname.includes("fun") && "Fun") ||
-              (window.location.pathname.includes("community") && "Community") ||
-              (window.location.pathname.includes("duet") && "Duet") ||
-              (window.location.pathname.includes("speech") && "Speech") ||
-              (window.location.pathname.includes("dictionary") &&
-                "Dictionary") ||
-              "Learning"}
+          <a className={isHomePage() ? 'active' : ''}>
+            <BookIcon /> {getNavLinkLabel()}
           </a>
         </li>
         {/* <li>
@@ -259,6 +267,7 @@ const HeaderComponent = (props) => {
               window.location.href =
                 "https://developer-staging-01.learngual.com/settings/";
             }}
+            className={window.location.pathname.includes("settings") ? 'active' : ''}
             style={{ cursor: "pointer" }}
           >
             <SettingIcon /> Settings

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

@@ -82,6 +82,7 @@ export const Nav = styled.ul`
   @media screen and (max-width: 1530px) {
     width: 40%;
   }
+
   & li {
     display: flex;
     align-items: center;
@@ -93,51 +94,117 @@ export const Nav = styled.ul`
     margin-left: 35px;
   }
 
-  & a.active {
-    color: rgba(0, 194, 194, 1) !important;
-    font-size: 21px;
-    font-weight: 600;
-    & svg path {
-      stroke: rgba(0, 194, 194, 1);
-    }
-  }
-
   & a {
     text-decoration: none;
     display: flex;
     align-items: center;
     color: #4a4d4d;
     font-size: 15px;
-    font-style: normal;
     font-weight: 600;
-    line-height: normal;
     position: relative;
 
-    &:hover:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: -9px;
-      width: 40px;
-      height: 4px;
-      background-color: rgba(0, 194, 194, 1);
-      transition: width 0.3s ease-in-out;
+    &:hover,
+    &.active {
+      color: rgba(0, 194, 194, 1);
+      font-weight: 600;
+      &::after {
+        content: "";
+         position: absolute;
+         left: 0;
+         bottom: -9px;
+         width: 40px;
+         height: 4px;
+         background-color: rgba(0, 194, 194, 1);
+         transition: width 0.3s ease-in-out;
+      }
     }
 
     & svg {
       margin-right: 12px;
     }
 
-    &:hover {
-      color: rgba(0, 194, 194, 1);
-      // border-bottom: 2px solid rgba(0, 194, 194, 1);
-      & svg path {
-        stroke: rgba(0, 194, 194, 1);
-      }
+    & svg path {
+      stroke: ${({ isActive }) => (isActive ? 'rgba(0, 194, 194, 1)' : 'currentcolor')};
     }
   }
 `;
 
+// export const Nav = styled.ul`
+//   display: flex;
+//   list-style: none;
+//   align-items: center;
+//   margin: 0 10px;
+//   padding: 0 5px;
+//   width: 57%;
+//   @media screen and (max-width: 1530px) {
+//     width: 40%;
+//   }
+//   & li {
+//     display: flex;
+//     align-items: center;
+//     margin: 0 10px;
+//   }
+
+//   & li:nth-of-type(1) {
+//     margin-right: 75px;
+//     margin-left: 35px;
+//   }
+
+//   & a.active {
+//     color: rgba(0, 194, 194, 1) !important;
+//     font-size: 21px;
+//     font-weight: 600;
+//     & svg path {
+//       stroke: rgba(0, 194, 194, 1);
+//     }
+//   }
+//   /* & a.active:after {
+//       content: "";
+//       position: absolute;
+//       left: 0;
+//       bottom: -9px;
+//       width: 40px;
+//       height: 4px;
+//       background-color: rgba(0, 194, 194, 1);
+//       transition: width 0.3s ease-in-out;
+//     } */
+
+//   & a {
+//     text-decoration: none;
+//     display: flex;
+//     align-items: center;
+//     color: #4a4d4d;
+//     font-size: 15px;
+//     font-style: normal;
+//     font-weight: 600;
+//     line-height: normal;
+//     position: relative;
+
+//     &:hover:after {
+//       content: "";
+//       position: absolute;
+//       left: 0;
+//       bottom: -9px;
+//       width: 40px;
+//       height: 4px;
+//       background-color: rgba(0, 194, 194, 1);
+//       transition: width 0.3s ease-in-out;
+//     }
+
+//     & svg {
+//       margin-right: 12px;
+//     }
+
+//     &:hover {
+//       color: rgba(0, 194, 194, 1);
+//       // border-bottom: 2px solid rgba(0, 194, 194, 1);
+//       & svg path {
+//         stroke: rgba(0, 194, 194, 1);
+//       }
+//     }
+//   }
+// `;
+
 export const SearchInputGroup = styled.div`
   background-color: transparent;
   border-radius: 60px;