l-min-components 1.0.216 → 1.0.223

package/package.json

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

package/src/components/datePicker/dateNavigation.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { NavContainer, NavButton  } from "./style"
+import LeftImage from "./images/leftDateIcon.png";
+import Rightimage from "./images/rightDateIcon.png";
+
+const CustomDatePickerHeader = ({ selected, onMonthChange }) => {
+  const handlePrevClick = () => {
+    onMonthChange(-1);
+  };
+
+  const handleNextClick = () => {
+    onMonthChange(1);
+  };
+
+  return (
+    <NavContainer className="custom-datepicker-header">
+       <div className="custom-datepicker-selected-month">
+        {selected.toLocaleString('default', { month: 'long' })} {selected.getFullYear()}
+      </div>
+      <div className='buttons'>
+        <NavButton onClick={handlePrevClick} className='left_icon'>
+            {/* <FontAwesomeIcon icon={faChevronLeft} /> */}
+            <img src={LeftImage} alt='' className='icon' />
+        </NavButton>
+        <NavButton onClick={handleNextClick} className='right_icon'>
+            {/* <FontAwesomeIcon icon={faChevronRight} /> */}
+            <img src={Rightimage} alt='' />
+        </NavButton>
+      </div>
+
+     
+    </NavContainer>
+  );
+};
+
+export default CustomDatePickerHeader;

package/src/components/datePicker/index.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import DatePicker from "react-datepicker";
+import { CalendarIcon } from "./svg/calendar";
+import { DownloadIcon } from "./svg/download";
+import CustomDatePickerHeader from "./dateNavigation";
+import { DatePickerWrapper, DateCont  } from "./style";
+
+const DatePickerCalender = ({
+    borderColor,
+    ...props
+}) => {
+    const [dateRange, setDateRange] = useState({
+        startDate: new Date(),
+        endDate: new Date(),
+      });
+
+    return(
+        <DatePickerWrapper {...props}>
+           <DateCont className="datepicker__wrapper" borderColor={borderColor}>
+            <DatePicker
+            selected={dateRange.endDate}
+            endDate={dateRange.endDate}
+            dateFormat="d MMM yyyy"
+            renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
+                <CustomDatePickerHeader selected={date} onMonthChange={(value) => {
+                if (value === -1) {
+                    decreaseMonth();
+                } else if (value === 1) {
+                    increaseMonth();
+                }
+                }} />
+            )}
+            onChange={(dates) =>
+                setDateRange({
+                ...dateRange,
+                endDate: dates,
+                })
+            }
+            calendarClassName="datepicker_style"
+            />
+            <CalendarIcon />
+        </DateCont>
+      </DatePickerWrapper>
+
+    )
+}
+
+export default DatePickerCalender

package/src/components/datePicker/style.jsx

@@ -0,0 +1,221 @@
+import styled from "styled-components";
+
+export const DatePickerWrapper = styled.div`
+`;
+
+export const DateCont = styled.div`
+      display: flex;
+      align-items: center;
+      width: 120px;
+      border-radius: 10px;
+      padding: 7px 12px;
+    //   border: 0.5px solid #e0e0e0;
+      border: 0.5px solid ${(props) => (props.borderColor ? props.borderColor : "#e0e0e0")};
+
+
+      .react-datepicker{
+        background: #FFFFFF;
+        border: none;
+        border-radius: 12px;
+        z-index: 1;
+        // padding: 5px;
+      
+      }
+
+      .react-datepicker__header{
+        background: #FFFFFF;
+        border: none;
+        
+      }
+      .react-datepicker__current-month{
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 20px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        font-weight: 600;
+        font-size: 16px;
+      }
+
+      .react-datepicker__navigation {
+        background: #F7F7F7;
+        border: 0.458333px solid #E0E0E0;
+        border-radius: 1.83333px;
+        padding: 15px;
+        margin-top: 15px;
+        // margin-right: 10px;
+        
+      }
+      .react-datepicker__navigation--next {
+        margin-right: 22px;
+        font-size: 10px;
+      }
+
+      .react-datepicker__day--keyboard-selected{
+        background: #00C2C2;
+      }
+
+      .react-datepicker__navigation--previous {
+        margin-left: 275px;
+        font-size: 10px;
+      }
+
+      .react-datepicker__navigation-icon--next {
+        width: 10px;
+        height: 20px;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+
+      .react-datepicker__navigation-icon--previous{
+        width: 10px;
+        height: 20px;
+        font-size: 20px;
+        margin-left: 10px;
+      }
+
+      .react-datepicker__navigation-icon--next{
+
+      }
+
+      .react-datepicker__day-names {
+        display: flex;
+        justify-content: space-around;
+        font-weight: 600;
+        font-size: 15px;
+        padding: 5px 5px;
+
+      }
+
+      .datepicker_style{
+        background: #FFFFFF;
+        border-radius: 12px;
+        .react-datepicker__day{
+          width: 46px;
+          height: 33px;
+          padding: 4px;
+          font-size: 14px;
+          &:focus {
+            border: 2px solid rgba(59, 59, 59, 0.282);
+          }
+          color: #444444;
+          &:hover {
+            color: #0094BA;
+            background: rgba(0, 148, 186, 0.04);
+          }
+        }
+
+        .react-datepicker__day--selected{
+          background: #00C2C2;
+          color: #EEEEEE;
+          border-radius: 10px;
+
+          &:hover {
+            color: #0094BA;
+            background: rgba(0, 148, 186, 0.04);
+          }
+        }
+      }
+
+      svg {
+        width: 45px;
+      }
+      .react-datepicker-wrapper {
+        width: auto !important;
+
+        .react-datepicker__input-container input {
+          border: none;
+          font-size: 12px;
+          width: 100%;
+          outline: none;
+        }
+      }
+
+      .react-datepicker__day--selected,
+      .react-datepicker__day--keyboard-selected,
+      .react-datepicker__day--in-selecting-range,
+      .react-datepicker__day--in-range {
+        border-radius: 1.3rem;
+        background-color: rgba(176, 220, 220, 0.42);
+        color: #313333;
+      }
+      .datepicker-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+        color: rgba(176, 220, 220, 0.42);
+        // width: 215px;
+        padding: 8px 16px;
+        border-radius: 12px;
+        font-size: 13px;
+        margin-left: auto;
+      }
+`;
+
+export const GraphCardBody = styled.div`
+  width: 100%;
+  display: flex;
+  margin-top: 20px;
+  margin-bottom: 10px;
+`;
+
+export const GraphCardFooter = styled.div`
+  width: 100%;
+  display: flex;
+
+  span {
+    background-color: #f3f3f3;
+    border: 0.5px solid #d9d9d9;
+    font-weight: 500;
+    font-size: 12px;
+    color: #000000;
+    border-radius: 10px;
+    margin-right: 10px;
+    padding: 12px 16px;
+    cursor: pointer;
+
+    &.active {
+      background-color: #00c2c2;
+      color: #ffffff;
+    }
+  }
+`;
+
+
+// Date picker Navigation button
+
+export const NavContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin-right: 20px;
+    padding: 3px;
+
+    .custom-datepicker-selected-month{
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 150%;
+      text-align: center;
+      color: #000000;
+      margin-left: 20px;
+    }
+
+    .buttons{
+      display: flex;
+    }
+
+    .left_icon{
+      margin-right: 7px;
+    }
+`;
+
+export const NavButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #F7F7F7;
+  width: 22px;
+  height: 22px;
+
+  
+  
+`;

package/src/components/datePicker/svg/calendar.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+export const CalendarIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "18"}
+    height={height || "18"}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6 1.5V3.75"
+      stroke="#616161"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 1.5V3.75"
+      stroke="#616161"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2.625 6.81641H15.375"
+      stroke="#616161"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15.75 6.375V12.75C15.75 15 14.625 16.5 12 16.5H6C3.375 16.5 2.25 15 2.25 12.75V6.375C2.25 4.125 3.375 2.625 6 2.625H12C14.625 2.625 15.75 4.125 15.75 6.375Z"
+      stroke="#616161"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.99588 10.2734H9.00262"
+      stroke="#616161"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.22244 10.2734H6.22918"
+      stroke="#616161"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.22244 12.5234H6.22918"
+      stroke="#616161"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/datePicker/svg/download.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+export const DownloadIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "18"}
+    height={height || "19"}
+    viewBox="0 0 18 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.6969 7.41797C15.6969 7.6763 16.9219 9.21797 16.9219 12.593L16.9219 12.7013C16.9219 16.4263 15.4302 17.918 11.7052 17.918L6.27187 17.918C2.54688 17.918 1.05521 16.4263 1.05521 12.7013L1.05521 12.593C1.05521 9.24297 2.26354 7.7013 5.21354 7.4263"
+      stroke="#52565F"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 1.66797L9 12.4013"
+      stroke="#52565F"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.7891 10.543L8.9974 13.3346L6.20573 10.543"
+      stroke="#52565F"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/graph/dateNavigation.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { NavContainer, NavButton  } from "./index.styled"
+import LeftImage from "./images/leftDateIcon.png";
+import Rightimage from "./images/rightDateIcon.png";
+
+
+const CustomDatePickerHeader = ({ selected, onMonthChange }) => {
+  const handlePrevClick = () => {
+    onMonthChange(-1);
+  };
+
+  const handleNextClick = () => {
+    onMonthChange(1);
+  };
+
+  return (
+    <NavContainer className="custom-datepicker-header">
+       <div className="custom-datepicker-selected-month">
+        {selected.toLocaleString('default', { month: 'long' })} {selected.getFullYear()}
+      </div>
+      <div className='buttons'>
+        <NavButton onClick={handlePrevClick} className='left_icon'>
+            {/* <FontAwesomeIcon icon={faChevronLeft} /> */}
+            <img src={LeftImage} alt='' className='icon' />
+        </NavButton>
+        <NavButton onClick={handleNextClick} className='right_icon'>
+            {/* <FontAwesomeIcon icon={faChevronRight} /> */}
+            <img src={Rightimage} alt='' />
+        </NavButton>
+      </div>
+
+     
+    </NavContainer>
+  );
+};
+
+export default CustomDatePickerHeader;

package/src/components/graph/index.jsx

@@ -11,6 +11,7 @@ import moment from "moment";
 import { CalendarIcon } from "../../assets/svg/calendar";
 import { DownloadIcon } from "../../assets/svg/download";
 import GraphChart from "./graphData";
+import CustomDatePickerHeader from "./dateNavigation"
 
 /**
  * @param {{
@@ -45,6 +46,15 @@ const GraphComponent = (props) => {
               selected={dateRange.startDate}
               startDate={dateRange.startDate}
               dateFormat="d MMM yyyy"
+              renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
+                <CustomDatePickerHeader selected={date} onMonthChange={(value) => {
+                  if (value === -1) {
+                    decreaseMonth();
+                  } else if (value === 1) {
+                    increaseMonth();
+                  }
+                }} />
+              )}
               onChange={(dates) =>
                 setDateRange({
                   ...dateRange,
@@ -61,6 +71,15 @@ const GraphComponent = (props) => {
               selected={dateRange.endDate}
               endDate={dateRange.endDate}
               dateFormat="d MMM yyyy"
+              renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
+                <CustomDatePickerHeader selected={date} onMonthChange={(value) => {
+                  if (value === -1) {
+                    decreaseMonth();
+                  } else if (value === 1) {
+                    increaseMonth();
+                  }
+                }} />
+              )}
               onChange={(dates) =>
                 setDateRange({
                   ...dateRange,

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

@@ -259,3 +259,42 @@ export const GraphCardFooter = styled.div`
     }
   }
 `;
+
+
+// Date picker Navigation button
+
+export const NavContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin-right: 20px;
+    padding: 3px;
+
+    .custom-datepicker-selected-month{
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 150%;
+      text-align: center;
+      color: #000000;
+      margin-left: 20px;
+    }
+
+    .buttons{
+      display: flex;
+    }
+
+    .left_icon{
+      margin-right: 7px;
+    }
+`;
+
+export const NavButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #F7F7F7;
+  width: 22px;
+  height: 22px;
+
+  
+  
+`;

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

@@ -22,7 +22,7 @@ const AccountDropdown = (props) => {
   const [developerAccountData, setDeveloperAccountData] = useState([]);
   const [instructorAccountData, setInstructorAccountData] = useState([]);
   const [enterpriseAccountData, setEnterpriseAccountData] = useState([]);
-  const [selectedAccount, setSelectedAccount] = useState();
+  // const [selectedAccount, setSelectedAccount] = useState();
   const navigate = useNavigate();
   const { pathname } = useLocation();
   useEffect(() => {}, [pathname]);
@@ -64,52 +64,52 @@ const AccountDropdown = (props) => {
       });
 
       if (pathname?.includes("personal")) {
-        setSelectedAccount(personalArray[0]);
+        props?.setSelectedAccount(personalArray[0]);
       }
       if (window.location.host?.includes("developer")) {
-        setSelectedAccount(developerArray[0]);
+        props?.setSelectedAccount(developerArray[0]);
       }
       if (pathname?.includes("instructor")) {
-        setSelectedAccount(instructorArray[0]);
+        props?.setSelectedAccount(instructorArray[0]);
       }
       if (pathname?.includes("enterprise")) {
-        setSelectedAccount(enterpriseArray[0]);
+        props?.setSelectedAccount(enterpriseArray[0]);
       }
     }
   }, [props?.data?.data]);
   useEffect(() => {
-    if (selectedAccount?.type === "DEVELOPER") {
+    if (props?.selectedAccount?.type === "DEVELOPER") {
       const date = new Date();
       date.setDate(date.getDate() + 28);
       document.cookie =
         "activeDeveloperAccount=" +
-        selectedAccount?.id +
+        props?.selectedAccount?.id +
         `; domain=${
           window.location.href.includes("localhost")
             ? ".localhost"
             : ".learngual.com"
         }; path=/; expires=${date.toUTCString()};`;
     }
-  }, [selectedAccount]);
+  }, [props?.selectedAccount]);
   return (
     <>
       <AccountDropdownLayout>
         <AccountDropdownHeader>
           <div className="img_div">
             <img
-              src={selectedAccount?.profile_photo || props?.avatar}
+              src={props?.selectedAccount?.profile_photo || props?.avatar}
               alt="account photo"
             />
           </div>
           <div>
             <h1>
               {" "}
-              {selectedAccount?.display_name ||
-                selectedAccount?.metadata?.organization_name ||
-                props.activeAccountName}
+              {props?.selectedAccount?.display_name ||
+                props?.selectedAccount?.metadata?.organization_name ||
+                props?.activeAccountName}
             </h1>
             <h2 style={{ textTransform: "capitalize" }}>
-              {selectedAccount?.type || props.activeAccountType}{" "}
+              {props?.selectedAccount?.type || props.activeAccountType}{" "}
             </h2>
           </div>
           <CloseIcon onClick={(e) => props.setIsOpen(!props.isOpen)} />
@@ -124,7 +124,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(personalItem);
+                    props?.setSelectedAccount(personalItem);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/personal`;
                     } else {
@@ -154,7 +154,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(developerItem);
+                    props?.setSelectedAccount(developerItem);
 
                     if (
                       window.location.port &&
@@ -191,7 +191,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(instructorItem);
+                    props?.setSelectedAccount(instructorItem);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/instructor`;
                     } else {
@@ -224,7 +224,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(enterpriseItem);
+                    props?.setSelectedAccount(enterpriseItem);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/enterprise`;
                     } else {

package/src/components/header/index.jsx

@@ -49,13 +49,14 @@ const HeaderComponent = (props) => {
   useEffect(() => {
     setIsOpen(false);
     handleGetUserAccountsDetail();
-    // handleGetUserDetails();
+    handleGetUserDetails();
   }, []);
   useEffect(() => {
     if (userAccountsDetail?.data) {
       setGeneralData((generalData) => ({
         ...generalData,
         accounts: userAccountsDetail?.data,
+        user: userDetails?.data,
       }));
 
       let personalArray = [];
@@ -124,7 +125,12 @@ const HeaderComponent = (props) => {
           </a>
         </li> */}
         <li>
-          <a href="#">
+          <a
+            onClick={() => {
+              window.location.href =
+                "https://developer-staging-01.learngual.com/settings/payment";
+            }}
+          >
             <SettingIcon /> Settings
           </a>
         </li>
@@ -196,6 +202,8 @@ const HeaderComponent = (props) => {
           isOpen={isOpen}
           setIsOpen={setIsOpen}
           data={userAccountsDetail}
+          selectedAccount={selectedAccount}
+          setSelectedAccount={setSelectedAccount}
         />
       )}
     </Navbar>

package/src/components/index.js

@@ -28,3 +28,4 @@ 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";
+export { default as DatePickerCalender } from "./datePicker"; 

package/src/components/searchBar/index.jsx

@@ -9,12 +9,17 @@ import {
   SuggestionItem,
   Container,
   OptionIcon,
+  OptionIconSearch,
 } from "./styles";
+import { SearchFilterIcon } from "./svg/searchFilter";
+import { SearchSvg } from "./svg/search-normal";
 
 const SearchBar = ({
   onSubmit,
   warning,
   asyncResult,
+  inFilter,
+  outFilter,
   ...restProps
 }) => {
   const [searchValue, setSearchValue] = useState("");
@@ -49,20 +54,23 @@ const SearchBar = ({
   return (
     <Container>
       <SearchBarContainer 
-      heightSize={restProps.heightSize}
-      widthSize={restProps.widthSize}
-      borderRadius={restProps.borderRadius}
-      border={restProps.border}
-      outlineColor={restProps.outlineColor}
+        heightSize={restProps.heightSize}
+        widthSize={restProps.widthSize}
+        borderRadius={restProps.borderRadius}
+        border={restProps.border}
+        outlineColor={restProps.outlineColor}
       >
         <SearchIcon  
-        onClick={(e) => {
-            e.preventDefault();
-            onSubmit(searchValue);
-          }}/>
+          onClick={(e) => {
+              e.preventDefault();
+              onSubmit(searchValue);
+          }}>
+          <SearchSvg/>
+        </SearchIcon>
+       
         <SearchInput
           type="search"
-          placeholder={restProps.placeholder || "Search"}
+          placeholder={restProps.placeholder || "Search by Name / Email / Username"}
           value={searchValue}
           onChange={handleInputChange}
           onKeyPress={handleEnterPress}
@@ -84,8 +92,13 @@ const SearchBar = ({
           </SuggestionList>
         )}
         {warning && <WarningText>{warning}</WarningText>}
+        {inFilter && 
+         <SearchFilterIcon />
+        }
       </SearchBarContainer>
-      <OptionIcon />
+       {outFilter && 
+         <SearchFilterIcon />
+        }
     </Container>
   );
 };
@@ -99,6 +112,7 @@ SearchBar.propTypes = {
   borderRadius: PropTypes.string,
   border: PropTypes.string,
   outlineColor: PropTypes.string,
+  inFilter: PropTypes.bool
 };
 
 // SearchBar.defaultProps = {

package/src/components/searchBar/styles/index.jsx

@@ -1,12 +1,16 @@
 import styled from "styled-components";
 import { FiSearch } from "react-icons/fi";
 import { RiEqualizerLine } from "react-icons/ri";
+import { SearchFilterIcon } from "../svg/searchFilter";
+import { SearchSvg } from "../svg/search-normal";
 
 export const Container = styled.div`
   display: flex;
   // justify-content: center;
   align-items: center;
   gap: 10px;
+  position: relative
+
 `;
 
 export const SearchBarContainer = styled.div`
@@ -24,9 +28,14 @@ export const SearchBarContainer = styled.div`
     box-shadow: 0 0 0 1px ${({ outlineColor }) => outlineColor || "#FEBF10"};
     transform: scale(1.01);
   }
+
+  svg{
+    margin-right: 20px;
+    // display: ${({display}) => display || "none"}
+  }
 `;
 
-export const SearchIcon = styled(FiSearch)`
+export const SearchIcon = styled.div`
   position: absolute;
   margin-left: 12px;
   color: #ADB3B3;
@@ -45,7 +54,10 @@ export const SearchInput = styled.input`
   color: #333333;
   outline: none;
   &::placeholder {
-    color:  #ADB3B3;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 22px;
+    color: #ADB3B3;
   }
 `;
 
@@ -83,7 +95,16 @@ export const SuggestionItem = styled.li`
   }
 `;
 
-export const OptionIcon = styled(RiEqualizerLine)`
+export const OptionIcon = styled(SearchFilterIcon)`
   color: ${({ outlineColor }) => outlineColor || "#ADB3B3"};
-  font-size: 16px;
+  font-size: 18px;
+  display: none;
+
+`;
+
+export const OptionIconSearch = styled(SearchFilterIcon)`
+  color: ${({ outlineColor }) => outlineColor || "#ADB3B3"};
+  font-size: 18px;
+  margin-right: 30px;
+  visibility: hidden;
 `;

package/src/components/searchBar/svg/search-normal.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const SearchSvg = ({ width, height, fill }) => (
+
+    <svg 
+        width="22" 
+        height="22" 
+        viewBox="0 0 25 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+    >
+    <path d="M12.2969 21C17.5436 21 21.7969 16.7467 21.7969 11.5C21.7969 6.25329 17.5436 2 12.2969 2C7.05017 2 2.79688 6.25329 2.79688 11.5C2.79688 16.7467 7.05017 21 12.2969 21Z" stroke="#ADB3B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M22.7969 22L20.7969 20" stroke="#ADB3B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+)
+
+

package/src/components/searchBar/svg/searchFilter.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export const SearchFilterIcon = () => (
+    <svg 
+        width="25" 
+        height="24" 
+        viewBox="0 0 25 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+        >
+        <path d="M22.7969 6.5H16.7969" stroke="#ADB3B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M6.79688 6.5H2.79688" stroke="#ADB3B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M10.7969 10C12.7299 10 14.2969 8.433 14.2969 6.5C14.2969 4.567 12.7299 3 10.7969 3C8.86388 3 7.29688 4.567 7.29688 6.5C7.29688 8.433 8.86388 10 10.7969 10Z" stroke="#ADB3B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M22.7969 17.5H18.7969" stroke="#ADB3B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M8.79688 17.5H2.79688" stroke="#ADB3B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M14.7969 21C16.7299 21 18.2969 19.433 18.2969 17.5C18.2969 15.567 16.7299 14 14.7969 14C12.8639 14 11.2969 15.567 11.2969 17.5C11.2969 19.433 12.8639 21 14.7969 21Z" stroke="#ADB3B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+)

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

@@ -19,7 +19,7 @@ const SideMenu = ({
   routes,
   userType,
   onLogout = () => {},
-  isOpen = false,
+  isOpen,
   setIsOpen,
 }) => {
   // const [isOpen, setIsOpen] = useState(false);
@@ -38,11 +38,24 @@ const SideMenu = ({
 
     return (
       <NavigationItemContainer
-        to={route.path}
+        onClick={() => {
+          if (
+            window.location.hostname.includes("staging") &&
+            window.location.hostname.includes("developer")
+          ) {
+            window.location.href = `developer-staging-01.learngual.com/${path}`;
+          } else if (window.location.hostname.includes("localhost")) {
+            window.location.href = `http://localhost:${window.location.port}${path}`;
+          } else if (
+            window.location.hostname.includes("developer") &&
+            !window.location.hostname.includes("staging")
+          ) {
+            window.location.href = `developer.learngual.com/${path}`;
+          }
+        }}
+        // to={route.path}
         key={index}
-        className={cx(`${route.text}`, ({ isActive, isPending }) => {
-          isActive ? "active" : "";
-        })}
+        className={cx(`${route.text} ${active ? "active" : ""}`)}
         minimal={isOpen}
       >
         <IconContainer active={active}>{icon}</IconContainer>

package/src/components/sideBar/sideMenu/styles/index.jsx

@@ -39,7 +39,7 @@ export const NavigationContainer = styled.div`
   justify-content: center;
   margin-top: 20px;
 `;
-export const NavigationItemContainer = styled(NavLink)`
+export const NavigationItemContainer = styled.p`
   text-decoration: none;
   display: flex;
   align-items: center;