feat(version-update): version 1.0.2 - sidebar revamp and update

src/components/Sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, createContext, useState } from 'react';
+import React, { forwardRef, createContext, useState, useEffect } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import {SidebarContainer, SidebarInner, SidebarLayout } from "./Sidebar.style";
@@ -9,64 +9,70 @@ import { theme } from "./../../theme";
 export const SidebarContext = createContext({
   toggled: false,
   handleToggleSidebar: () => {}
-});
+})
 
+const Sidebar = forwardRef(
+  (
+    {
+      children,
+      className,
+      textColor,
+      backgroundColor,
+      breakpoint,
+      toggled,
+      ...rest
+    },
+    ref
+  ) => {
+    const handleToggleSidebar = (toggled) => {
+      setSidebarState({ ...sidebarState, toggled: !toggled })
+    }
 
-const Sidebar = forwardRef((
-    { children, className, textColor, backgroundColor, ...rest },
-  ref,
-) => {
-
+    const [sidebarState, setSidebarState] = useState({
+      toggled,
+      handleToggleSidebar,
+      textColor,
+      backgroundColor,
+    })
 
-  const handleToggleSidebar = (toggled) => {
-    setSidebarState({ ...sidebarState, toggled: !toggled });
-  };
 
+    const sidebarRef = ref ? ref : React.createRef()
 
-  const [sidebarState, setSidebarState] = useState({
-    toggled: false,
-    handleToggleSidebar,
-    textColor,
-    backgroundColor
-  });
-
-  const sidebarRef = ref ? ref : React.createRef();
-
     return (
       <ThemeProvider theme={theme}>
         <SidebarContext.Provider value={sidebarState}>
           <SidebarContainer
             {...rest}
             ref={sidebarRef}
-            className={classNames("pro-sidebar", className, {
+            className={classNames('pro-sidebar', className, {
               toggled: sidebarState.toggled
             })}
             textColor={textColor}
             backgroundColor={backgroundColor}
           >
             <SidebarInner>
-              <SidebarLayout >{children}</SidebarLayout>
+              <SidebarLayout>{children}</SidebarLayout>
             </SidebarInner>
           </SidebarContainer>
         </SidebarContext.Provider>
       </ThemeProvider>
-    );
-});
+    )
+  }
+)
 
 Sidebar.defaultProps = {
-  textColor: "#fff",
-  backgroundColor: "#000",
-};
-
+  textColor: '#fff',
+  backgroundColor: '#000',
+}
 
 Sidebar.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   textColor: PropTypes.string,
-  backgroundColor: PropTypes.string
+  backgroundColor: PropTypes.string,
 }
 
 
-export default Sidebar;
+export default Sidebar
 
-export { Sidebar as CDBSidebar };
+export { Sidebar as CDBSidebar }

src/components/Sidebar/SidebarHeader/SidebarHeader.js

@@ -1,41 +1,46 @@
-import React, { forwardRef, useContext } from 'react';
-import classNames from 'classnames';
+import React, { forwardRef, useContext } from "react";
+import classNames from "classnames";
 import PropTypes from "prop-types";
-import { SidebarContext } from '../Sidebar';
+import { SidebarContext } from "../Sidebar";
 import { HeaderContainer } from "./SidebarHeader.style";
 import { ThemeProvider } from "styled-components";
 import { theme } from "./../../../theme";
 
+const SidebarHeader = forwardRef(
+  ({ children, prefix, onToggle, className, ...rest }, ref) => {
+    const sidebarHeaderRef = ref ? ref : React.createRef();
 
-const SidebarHeader = forwardRef(({ children, prefix, onToggle, className, ...rest }, ref) => {
-  const sidebarHeaderRef = ref ? ref : React.createRef();
+    const { toggled, handleToggleSidebar } = useContext(SidebarContext);
 
-  const { toggled, handleToggleSidebar } = useContext(SidebarContext);
-
-  return (
-    <ThemeProvider theme={theme}>
-      <HeaderContainer
-        {...rest}
-        ref={sidebarHeaderRef}
-        className={classNames(className)}
-      >
-        <div className={classNames("head-div", {toggled})}>
-          {prefix ? <span className="icon-suffix" onClick={() => handleToggleSidebar(toggled)}>{prefix}</span> : null}
-         <span className="head-text">
-            {children}
-          </span>
-
-        </div>
-      </HeaderContainer>
-    </ThemeProvider>
-  );
-});
+    return (
+      <ThemeProvider theme={theme}>
+        <HeaderContainer
+          {...rest}
+          ref={sidebarHeaderRef}
+          className={classNames(className)}
+        >
+          <div className={classNames("head-div", { toggled })}>
+            <span className="head-text">{children}</span>
+            {prefix ? (
+              <span
+                className="icon-suffix"
+                onClick={() => handleToggleSidebar(toggled)}
+              >
+                {prefix}
+              </span>
+            ) : null}
+          </div>
+        </HeaderContainer>
+      </ThemeProvider>
+    );
+  }
+);
 
 SidebarHeader.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-}
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
 
 export default SidebarHeader;
 
-export { SidebarHeader as CDBSidebarHeader };
+export { SidebarHeader as CDBSidebarHeader };

src/components/Sidebar/SidebarHeader/SidebarHeader.style.js

@@ -1,31 +1,29 @@
 import styled from "styled-components";
 
-
 export const HeaderContainer = styled.div`
-  border-bottom: 1px solid hsla(0,0%,67.8%,.2);
+  border-bottom: 1px solid hsla(0, 0%, 67.8%, 0.2);
 
-  .head-div{
-    padding: 24px 29px;
+  .head-div {
+    padding: 24px 30px;
     font-weight: bold;
     font-size: 17px;
     letter-spacing: 1px;
     overflow: hidden;
+    display: flex;
+    justify-content: space-between;
     white-space: nowrap;
-  
+
     .icon-suffix {
-        margin: 0px 23px;
-        cursor: pointer;
+      cursor: pointer;
     }
 
-     &.toggled {
+    &.toggled {
       .head-text {
         display: none;
       }
       .icon-suffix {
         margin: 0px;
       }
     }
-   
   }
-
-`;
+`;

src/components/Sidebar/SidebarMenuItem/SidebarMenuItem.js

@@ -1,20 +1,24 @@
-import React, { forwardRef, useContext } from 'react';
-import classNames from 'classnames';
+import React, { forwardRef, useContext } from "react";
+import classNames from "classnames";
 import PropTypes from "prop-types";
 import { InnerMenuItem, InnerMenuLi } from "./SidebarMenuItem.style";
-import { SidebarContext } from '../Sidebar';
+import { SidebarContext } from "../Sidebar";
+import CDBIcon from "../../Icon";
 import { ThemeProvider } from "styled-components";
 import { theme } from "./../../../theme";
 
-
 const SidebarMenuItem = forwardRef(
   (
     {
       children,
       className,
       icon,
+      iconSize,
+      iconType,
       iconClassName,
+      textFontSize,
       active,
+      suffix,
       firstchild,
       popperarrow,
       ...rest
@@ -31,11 +35,25 @@ const SidebarMenuItem = forwardRef(
           ref={menuItemRef}
           className={classNames(className, { active }, { toggled })}
         >
-          <InnerMenuItem className={classNames({ active }, { toggled })} tabIndex={0} role="button">
+          <InnerMenuItem
+            className={classNames({ active }, { toggled })}
+            tabIndex={0}
+            fontSize={textFontSize}
+            role="button"
+          >
             {icon && (
-              <i className={classNames(iconClassName, `fa-${icon}`, "fa", "side-icon")}></i>
+              <CDBIcon
+                icon={icon}
+                size={iconSize}
+                className={classNames(
+                  iconClassName,
+                  "side-icon",
+                  iconType && `fa-${iconType}`
+                )}
+              />
             )}
             <span className="item-content">{children}</span>
+            {suffix ? <span className="suffix-wrapper">{suffix}</span> : null}
           </InnerMenuItem>
         </InnerMenuLi>
       </ThemeProvider>
@@ -47,10 +65,18 @@ SidebarMenuItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   icon: PropTypes.string,
+  iconSize: PropTypes.string,
   iconClassName: PropTypes.string,
+  iconType: PropTypes.string,
   active: PropTypes.bool,
+  suffix: PropTypes.node,
   firstchild: PropTypes.number,
-  popperarrow: PropTypes.number
+  popperarrow: PropTypes.number,
+  textFontSize: PropTypes.string,
+};
+
+SidebarMenuItem.defaultProps = {
+  iconSize: "md",
 };
 
 export default SidebarMenuItem;