feat(sidebar):add new props and props and design revision sidebar

Devwares-Team · Feb 22, 2022 · 9ede7aa · 9ede7aa
1 parent cb8f712
commit 9ede7aa
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 61 deletions.
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
@@ -1,15 +1,14 @@
-import React, { forwardRef, createContext, useState, useEffect } 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";
+import classNames from "classnames";
+import { SidebarContainer, SidebarInner, SidebarLayout } from "./Sidebar.style";
 import { ThemeProvider } from "styled-components";
 import { theme } from "./../../theme";
 
-
 export const SidebarContext = createContext({
   toggled: false,
-  handleToggleSidebar: () => {}
-})
+  handleToggleSidebar: () => {},
+});
 
 const Sidebar = forwardRef(
   (
@@ -20,59 +19,74 @@ const Sidebar = forwardRef(
       backgroundColor,
       breakpoint,
       toggled,
+      minWidth,
+      maxWidth,
       ...rest
     },
     ref
   ) => {
     const handleToggleSidebar = (toggled) => {
-      setSidebarState({ ...sidebarState, toggled: !toggled })
-    }
+      setSidebarState({ ...sidebarState, toggled: !toggled });
+    };
 
     const [sidebarState, setSidebarState] = useState({
       toggled,
       handleToggleSidebar,
       textColor,
       backgroundColor,
-    })
+      breakpoint,
+    });
 
+    useEffect(() => {
+      if (toggled) {
+        handleToggleSidebar(!toggled);
+      }
+    }, [toggled]);
 
-    const sidebarRef = ref ? ref : React.createRef()
+    const sidebarRef = ref ? ref : React.createRef();
 
     return (
       <ThemeProvider theme={theme}>
         <SidebarContext.Provider value={sidebarState}>
           <SidebarContainer
             {...rest}
             ref={sidebarRef}
-            className={classNames('pro-sidebar', className, {
-              toggled: sidebarState.toggled
+            className={classNames("pro-sidebar", className, {
+              toggled: sidebarState.toggled,
             })}
             textColor={textColor}
             backgroundColor={backgroundColor}
+            minWidth={minWidth}
+            maxWidth={maxWidth}
           >
             <SidebarInner>
               <SidebarLayout>{children}</SidebarLayout>
             </SidebarInner>
           </SidebarContainer>
         </SidebarContext.Provider>
       </ThemeProvider>
-    )
+    );
   }
-)
+);
 
 Sidebar.defaultProps = {
-  textColor: '#fff',
-  backgroundColor: '#000',
-}
+  textColor: "#ffffff",
+  backgroundColor: theme.colors.dark900,
+  breakpoint: 720,
+  toggled: false,
+  minWidth: "80px",
+  maxWidth: "270px",
+};
 
 Sidebar.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   textColor: PropTypes.string,
   backgroundColor: PropTypes.string,
-}
-
+  breakpoint: PropTypes.number,
+  toggled: PropTypes.boolean,
+};
 
-export default Sidebar
+export default Sidebar;
 
-export { Sidebar as CDBSidebar }
+export { Sidebar as CDBSidebar };
diff --git a/src/components/Sidebar/Sidebar.style.js b/src/components/Sidebar/Sidebar.style.js
@@ -1,40 +1,34 @@
 import styled from "styled-components";
 
-
 export const SidebarContainer = styled.div`
-
-    background: ${(props) => props.backgroundColor};
-    color: ${(props) => props.textColor};
-    height: 100%;
-    width: 270px;
-    min-width: 270px;
-    text-align: left;
-    transition: width, left, right, 0.3s;
-    position: relative;
-    z-index: 1009;
-
-   &.toggled{
-    min-width: 80px;
-    width: 80px;
+  background: ${(props) => props.backgroundColor};
+  color: ${(props) => props.textColor};
+  height: 100%;
+  width: ${({ maxWidth }) => maxWidth};
+  min-width: ${({ maxWidth }) => maxWidth};
+  text-align: left;
+  transition: width, left, right, 0.3s;
+  position: relative;
+  z-index: 1009;
+
+  &.toggled {
+    width: ${({ minWidth }) => minWidth};
+    min-width: ${({ minWidth }) => minWidth};
   }
-
-  
 `;
 
 export const SidebarInner = styled.div`
-    height: 100%;
-    position: relative;
-    z-index: 101;
+  height: 100%;
+  position: relative;
+  z-index: 101;
 `;
 
 export const SidebarLayout = styled.div`
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    z-index: 101;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 101;
 `;
-
-
diff --git a/src/components/Sidebar/SidebarContent/SidebarContent.js b/src/components/Sidebar/SidebarContent/SidebarContent.js
@@ -7,25 +7,24 @@ import { ThemeProvider } from "styled-components";
 import { theme } from "./../../../theme";
 
 
-
 const SidebarContent = forwardRef(({ children, className, ...rest }, ref) => {
 
-  const { handleToggleSidebar } = useContext(SidebarContext);
+  const { handleToggleSidebar, breakpoint } = useContext(SidebarContext);
 
 
   const [width, setWidth] = useState(window.innerWidth);
-  const breakpoint = 720;
+  const finalbreakpoint = breakpoint || 720;
 
 
 
   useEffect(() => {
     const handleWindowResize = () => setWidth(window.innerWidth);
     window.addEventListener("resize", handleWindowResize);
-    if (width < breakpoint) {
+    if (width < finalbreakpoint) {
       handleToggleSidebar(false)
     }
 
-    if (width > breakpoint) {
+    if (width > finalbreakpoint) {
       handleToggleSidebar(true)
     }
 
@@ -35,7 +34,7 @@ const SidebarContent = forwardRef(({ children, className, ...rest }, ref) => {
 
     }
 
-  }, [handleToggleSidebar, width])
+  }, [handleToggleSidebar, width, finalbreakpoint])
 
   const sidebarContentRef = ref ? ref : React.createRef();
 

diff --git a/src/components/Sidebar/SidebarFooter/SidebarFooter.js b/src/components/Sidebar/SidebarFooter/SidebarFooter.js
@@ -5,7 +5,6 @@ import { ThemeProvider } from "styled-components";
 import { theme } from "./../../../theme";
 
 
-
 const SidebarFooter = forwardRef(({ children, className, ...rest }, ref) => {
   const sidebarFooterRef = ref ? ref : React.createRef();
   return (

diff --git a/src/components/Sidebar/SidebarHeader/SidebarHeader.style.js b/src/components/Sidebar/SidebarHeader/SidebarHeader.style.js
@@ -18,6 +18,7 @@ export const HeaderContainer = styled.div`
     }
 
     &.toggled {
+      justify-content: center;
       .head-text {
         display: none;
       }

diff --git a/src/components/Sidebar/SidebarMenu/SidebarMenu.js b/src/components/Sidebar/SidebarMenu/SidebarMenu.js
@@ -11,10 +11,9 @@ import { theme } from "./../../../theme";
 const SidebarMenu = forwardRef(
   ({ children, className, popperArrow, ...rest }, ref) => {
     const menuRef = ref ? ref : React.createRef();
-
+    
     const { textColor, backgroundColor } = useContext(SidebarContext);
 
-
     return (
       <ThemeProvider theme={theme}>
         <MenuNav

diff --git a/src/components/Sidebar/SidebarMenuItem/SidebarMenuItem.js b/src/components/Sidebar/SidebarMenuItem/SidebarMenuItem.js
@@ -40,6 +40,7 @@ const SidebarMenuItem = forwardRef(
             tabIndex={0}
             fontSize={textFontSize}
             role="button"
+            toggled={toggled}
           >
             {icon && (
               <CDBIcon

diff --git a/src/components/Sidebar/SidebarMenuItem/SidebarMenuItem.style.js b/src/components/Sidebar/SidebarMenuItem/SidebarMenuItem.style.js
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 export const InnerMenuItem = styled.div`
   position: relative;
@@ -30,9 +30,14 @@ export const InnerMenuItem = styled.div`
     margin-right: 23px;
   }
   &.toggled {
-    padding-left: 9px;
+    justify-content: center;
+    .item-content {
+      width: 0px;
+      display: none;
+    }
     .suffix-wrapper {
       opacity: 0;
+      display: none;
     }
   }
 `;