l-min-components 1.0.503 → 1.0.511

package/src/components/AdminSidebar/index.jsx

@@ -0,0 +1,150 @@
+import React, { useState, useRef } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  NavigationContainer,
+  SideMenuContainer,
+  SideMenuDropdownBody,
+  SideMenuDropdownHeader,
+  NavWrapper,
+} from "./index.styled";
+import { adminSideMenuOptions } from "../../hooks/adminSideMenuItems";
+import logo from "./assets/images/logo.png";
+import { ChevronIconActive } from "./assets/svg/chevronIcon";
+import cx from "classnames";
+import { LogoutIcon } from "./assets/svg/logoutIcon";
+
+const AdminSideMenu = () => {
+  const [activeDropdown, setActiveDropdown] = useState(null);
+  const ref = useRef(null);
+
+  const handleToggle = (index) => {
+    if (activeDropdown === index) {
+      setActiveDropdown(null);
+    } else {
+      setActiveDropdown(index);
+    }
+  };
+
+
+  return (
+    <SideMenuContainer>
+      <div className="logo_section">
+        <img src={logo} alt="" />
+      </div>
+
+      <NavWrapper>
+        {adminSideMenuOptions?.map((item, idx) => (
+          <div key={idx}>
+            <NavigationContainer>
+              {item?.optionType && (
+                <p className="menu_title"> {item?.optionType}</p>
+              )}
+
+              {item?.routes.map((item, idx) => (
+                <div key={idx}>
+                  {!item?.hasDropdown && (
+                    <NavLink to={item?.path}>
+                      {({ isActive }) => {
+                        return isActive ? (
+                          <span
+                            id="navlink__title"
+                            className={isActive ? "active-link" : ""}
+                          >
+                            {item?.iconActive} {item?.text}
+                            {item?.hasNotification && (
+                              <span className="dropdown_notification">
+                                {item?.notifications}
+                              </span>
+                            )}
+                          </span>
+                        ) : (
+                          <span id="navlink__title" className="">
+                            {item?.icon} {item?.text}
+                            {item?.hasNotification && (
+                              <span className="dropdown_notification">
+                                {item?.notifications}
+                              </span>
+                            )}
+                          </span>
+                        );
+                      }}
+                    </NavLink>
+                  )}
+
+                  {item?.hasDropdown && (
+                    <>
+                      <SideMenuDropdownHeader
+                        className={`${
+                          activeDropdown === idx ? "active-dropdown" : ""
+                        }`}
+                        onClick={() => handleToggle(idx)}
+                      >
+                        <span className="dropdown_header_txt">
+                          {activeDropdown === idx ? (
+                            <> {item?.iconActive}</>
+                          ) : (
+                            <>{item?.icon} </>
+                          )}
+
+                          {item?.text}
+                        </span>
+
+                        <span className="dropdown_header_chevron">
+                          <ChevronIconActive
+                            style={{
+                              transform:
+                                activeDropdown === idx ? "rotate(180deg)" : " ",
+                            }}
+                            fill={activeDropdown === idx ? "#fff" : "#636666"}
+                          />
+                        </span>
+                      </SideMenuDropdownHeader>
+
+                      <SideMenuDropdownBody
+                        ref={ref}
+                        className={`rc-collapse ${
+                          activeDropdown === idx ? "show" : ""
+                        }`}
+                        style={
+                          activeDropdown === idx
+                            ? { height: "auto" }
+                            : { height: "0px" }
+                        }
+                      >
+                        {item?.dropdownItems?.map((item, idx) => (
+                          <div className="dropdown_row" key={idx}>
+                            <NavLink
+                              to={item?.path}
+                              id="dropdown__links"
+                              className={({ isActive }) =>
+                                isActive ? "active" : ""
+                              }
+                            >
+                              {item?.text}
+                            </NavLink>
+
+                            {item?.hasNotification && (
+                              <span className="dropdown_notification">
+                                {item?.notifications}
+                              </span>
+                            )}
+                          </div>
+                        ))}
+                      </SideMenuDropdownBody>
+                    </>
+                  )}
+                </div>
+              ))}
+            </NavigationContainer>
+          </div>
+        ))}
+
+        <NavLink to={"/"} className="logout__link">
+          <LogoutIcon /> Logout
+        </NavLink>
+      </NavWrapper>
+    </SideMenuContainer>
+  );
+};
+
+export default AdminSideMenu;

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

@@ -0,0 +1,296 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+
+export const SideMenuContainer = styled.div`
+  position: fixed;
+  width: 280px;
+  // max-height: 609px;
+  display: flex;
+  flex-direction: column;
+  background: #e6f9f9;
+  padding: 30px 25px;
+  transition: width 0.2s ease-in-out;
+  height: 100vh;
+  padding-right: 5px;
+
+  .logo_section {
+    width: 72px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .toggle {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    border-radius: 4px;
+    background: #fff;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 115px;
+    right: -13px;
+    color: #fdcf04;
+  }
+
+  .active-dropdown {
+    background-color: #3ac2c2;
+    color: #fff;
+  }
+
+  .rc-collapse {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+    & .show {
+      height: auto;
+    }
+  }
+
+  .logout__link {
+    color: #f95454;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    margin: 16px 0;
+    padding: 8px 15px;
+    display: flex;
+    column-gap: 10px;
+  }
+`;
+
+export const NavWrapper = styled.div`
+  overflow-y: scroll;
+  padding-right: 20px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const NavigationContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 0 5px;
+  border-bottom: 1px solid #949999;
+  margin-bottom: 8px;
+
+  .menu_title {
+    color: #099;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    margin: 18px 0 16px;
+  }
+
+  #navlink__title {
+    color: #636666;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    margin-bottom: 16px;
+    padding: 8px 15px;
+    display: flex;
+    column-gap: 10px;
+
+     .dropdown_notification {
+      width: 22px;
+      height: 22px;
+      border-radius: 4px;
+      background-color: #f95454;
+      color: #fff;
+      font-family: "Satoshi", "Nunito";
+      font-size: 12px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: auto;
+    }
+  }
+
+  .active-link {
+    background-color: #3ac2c2;
+    color: #fff !important;
+  }
+`;
+export const NavigationItemContainer = styled.p`
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  cursor: pointer;
+  position: relative;
+  padding: ${({ minimal }) => (minimal ? "12px 16px" : "12px 12px")};
+  color: ${({ active }) =>
+    active
+      ? "rgb(255, 255, 255) !important"
+      : "rgba(255, 255, 255, 0.625) !important"};
+  &:hover {
+    color: #ffffff !important;
+    background-color: #31cdcd;
+
+    > div {
+      opacity: 1;
+    }
+  }
+  &.active {
+    background-color: rgba(0, 153, 153, 0.5);
+    // border-left: 5px solid #febf10;
+    border-radius: 10px 0 0px 10px;
+    color: #ffffff;
+    &::before {
+      content: "";
+      height: 110%;
+      width: 5px;
+      border-radius: 0 10px 10px 0;
+      position: absolute;
+      top: -5%;
+      left: 0;
+      display: block;
+      background: #febf10;
+    }
+  }
+`;
+
+export const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 25px;
+  opacity: ${({ active }) => (active ? "1" : "0.625")};
+`;
+
+export const TextContainer = styled.div`
+  display: ${({ minimal }) => (minimal ? "flex" : "none")};
+  align-items: center;
+  font-size: 16px;
+  letter-spacing: 0.32px;
+  font-weight: 600;
+  color: inherit;
+`;
+
+export const NotificationCount = styled.div`
+  background-color: #009999;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  margin-left: 2px;
+
+  ${({ minimal }) =>
+    minimal
+      ? null
+      : `
+    position: absolute;
+    bottom: 11px;
+    right: 14px;
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+    .text {
+        display: none;
+    }
+  `};
+`;
+
+export const LogoutButtonContainer = styled.div`
+  margin-top: auto;
+  display: flex;
+  gap: 10px;
+  cursor: pointer;
+  color: rgba(253, 253, 253, 0.595);
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+export const LogoutIcon = styled.img`
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+`;
+
+export const LogoutText = styled.div`
+  font-weight: bold;
+`;
+
+export const SideMenuDropdownHeader = styled.div`
+  background-color: transparent;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  color: #4a4d4d;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: normal;
+  justify-content: space-between;
+  border-radius: 3px;
+  margin-bottom: 8px;
+  cursor: pointer;
+
+  .dropdown_header_txt {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+  }
+
+  .dropdown_header_chevron {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+export const SideMenuDropdownBody = styled.div`
+  padding: 0 12px 0 48px;
+
+  .dropdown_row {
+    display: flex;
+    justify-content: space-between;
+
+    #dropdown__links {
+      &:last-child {
+        margin-bottom: 12px;
+      }
+    }
+
+    .dropdown_notification {
+      width: 22px;
+      height: 22px;
+      border-radius: 4px;
+      background-color: #f95454;
+      color: #fff;
+      font-family: "Satoshi", "Nunito";
+      font-size: 12px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  #dropdown__links {
+    color: #4a4d4d;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    margin: 2px 0 8px;
+
+    &.active {
+      color: #00c2c2;
+    }
+
+    &:hover {
+      color: #00c2c2;
+    }
+  }
+`;

package/src/components/fullPageLoader/index.jsx

@@ -10,11 +10,15 @@ import Loader from './loader';
 * loaderAsset: object,
 * isSectionLoader: boolean,
 * hasBackground: boolean,
+* fixed: boolean,
+* loaderHeight: number,
+* loaderWidth: number,
+* zIndex: number,
 * }} props - properties of the dropdown component
 */
 
 const Backdrop = styled.div`
-  ${({ isSectionLoader, hasBackground }) =>
+  ${({ isSectionLoader, hasBackground, fixed, zIndex }) =>
     isSectionLoader
       ? css`
           position: relative;
@@ -23,19 +27,18 @@ const Backdrop = styled.div`
           background: transparent;
         `
       : css`
-          position: fixed;
+          position: ${fixed ? 'fixed' : 'absolute'};
           top: 0;
           left: 0;
           width: 100vw;
           height: 100vh;
           background: ${hasBackground ? 'rgba(110, 62, 62, 0.4)' : 'transparent'};
-          z-index: 999;
+          z-index: ${zIndex};
         `}
 `;
 
-
 const LoaderWrapper = styled.div`
-  ${({ isSectionLoader }) =>
+  ${({ isSectionLoader, fixed, zIndex }) =>
     isSectionLoader
       ? css`
           position: absolute;
@@ -45,11 +48,11 @@ const LoaderWrapper = styled.div`
           z-index: 10;
         `
       : css`
-          position: fixed;
+          position: ${fixed ? 'fixed' : 'absolute'};
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          z-index: 9000;
+          z-index: ${zIndex};
         `}
   img {
     width: 300px;
@@ -57,12 +60,20 @@ const LoaderWrapper = styled.div`
   }
 `;
 
-const FullPageLoader = ({ isSectionLoader = false, hasBackground = false,  loaderAsset,  }) => {
+const FullPageLoader = ({ 
+  isSectionLoader = false, 
+  hasBackground = false,  
+  loaderAsset, 
+  fixed,  
+  loaderWidth = 400,
+  loaderHeight = 400,
+  zIndex = 999  
+}) => {
 
   return (
-    <Backdrop isSectionLoader={isSectionLoader} hasBackground={hasBackground}>
-      <LoaderWrapper isSectionLoader={isSectionLoader}>
-        <Loader loaderAsset={loaderAsset} />
+    <Backdrop isSectionLoader={isSectionLoader} hasBackground={hasBackground} fixed={fixed} zIndex={zIndex}>
+      <LoaderWrapper isSectionLoader={isSectionLoader} fixed={fixed} zIndex={zIndex}>
+        <Loader loaderAsset={loaderAsset} width={loaderWidth} height={loaderHeight}/>
       </LoaderWrapper>
     </Backdrop>
   );

package/src/components/fullPageLoader/loader.jsx

@@ -8,11 +8,11 @@ const LoaderWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 400px;
-  height: 400px;
+  width: ${({ width }) => width}px;
+  height: ${({ height }) => height}px;
 `;
 
-const PageLoader = ({ loaderAsset = defaultLoaderAnimation }) => {
+const PageLoader = ({ loaderAsset = defaultLoaderAnimation, width = 400, height = 400 }) => {
   const animationContainer = useRef(null);
 
   useEffect(() => {
@@ -28,7 +28,7 @@ const PageLoader = ({ loaderAsset = defaultLoaderAnimation }) => {
   }, [loaderAsset]);
 
   return (
-    <LoaderWrapper ref={animationContainer} />
+    <LoaderWrapper ref={animationContainer} width={width} height={height} />
   );
 };
 

package/src/components/index.js

@@ -36,3 +36,4 @@ export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar
 
 export { default as EnterpriseRightBar } from "./fileRightBar/enterpriseRightBar";
 export { default as FullPageLoader } from "./fullPageLoader"
+export { default as AdminAppMainLayout } from "./AdminAppMainLayout"