add defaultOpen prop to submenu

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add prop to submenu component to set the default open value
+
 ### Changed
 
 - Update readme

README.md

@@ -154,7 +154,7 @@ import { Link } from 'react-router-dom';
             <td>-</td>
         </tr>  
         <tr>
-            <td rowspan=2>SubMenu</td>
+            <td rowspan=3>SubMenu</td>
             <td>title</td>
             <td>string | ReactNode</td>
             <td>Title for the submenu </td>
@@ -166,6 +166,12 @@ import { Link } from 'react-router-dom';
             <td>Icon for submenu</td>
             <td>-</td>
         </tr>  
+         <tr>
+            <td>defaultOpen</td>
+            <td>boolean</td>
+            <td>Set if the submenu is open by default</td>
+            <td><code>false</code></td>
+        </tr>  
     </tbody>
 </table>
 

demo/package.json

@@ -11,7 +11,6 @@
     "react-dom": "^16.13.1",
     "react-icons": "^3.10.0",
     "react-intl": "^4.5.2",
-    "react-pro-sidebar": "^0.1.0-beta.1",
     "react-scripts": "3.4.1",
     "react-switch": "^5.0.1"
   },

demo/yarn.lock

@@ -2898,11 +2898,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -8887,11 +8882,6 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
-react-button-test@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/react-button-test/-/react-button-test-0.1.1.tgz#b41b8ec5e59feacddc26b5b13c26af2b62b423d2"
-  integrity sha512-KyXTU1c7fpBuqyhq1hJ162FCMgblSnNYWAT23ADpDD+s0RgzxzBdCmZPBjGLNLRdae9/yrRYAvdIvp4GDEV4lg==
-
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -8967,14 +8957,6 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-pro-sidebar@^0.1.0-beta.1:
-  version "0.1.0-beta.1"
-  resolved "https://registry.yarnpkg.com/react-pro-sidebar/-/react-pro-sidebar-0.1.0-beta.1.tgz#66b1938764aff7045b2cdf5b20f57c270ddca560"
-  integrity sha512-5YgcTlme6RrckA1qcYtv/2SsqjIE1pYzPCAz2UA/OGGOtN+Vlsq/hF4qaJuHSSVYgRWyqERFLqm7GNxY/X+IBw==
-  dependencies:
-    classnames "^2.2.6"
-    react-slidedown "^2.4.5"
-
 [email protected]:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
@@ -9035,13 +9017,6 @@ [email protected]:
   optionalDependencies:
     fsevents "2.1.2"
 
-react-slidedown@^2.4.5:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/react-slidedown/-/react-slidedown-2.4.5.tgz#d575404256fa0ba81e60161547a8fa9ff62b935d"
-  integrity sha512-zFDhgqQ1ZLfRr+rQA7p+13OTT/+zUR/+3v3JnwrnXPM8R+1KHhuTNseYHU8jYN3QfxjJXtqve0rgbWCBiFkpiw==
-  dependencies:
-    tslib "^1.9.0"
-
 react-switch@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-5.0.1.tgz#449277f4c3aed5286fffd0f50d5cbc2a23330406"

src/ProSidebar/SubMenu.tsx

@@ -6,17 +6,16 @@ export interface Props {
   className?: string;
   icon?: React.ReactNode;
   title?: React.ReactNode;
+  defaultOpen?: boolean;
 }
 
 const SubMenu: React.ForwardRefRenderFunction<unknown, Props> = (
-  { children, icon, className, title, ...rest },
+  { children, icon, className, title, defaultOpen = false, ...rest },
   ref,
 ) => {
-  const [height, setHeight] = useState<number | string>(0);
-  const [closed, setClosed] = useState(true);
+  const [closed, setClosed] = useState(!defaultOpen);
 
   const handleToggleSubMenu = () => {
-    setHeight(height === 0 ? 'auto' : 0);
     setClosed(!closed);
   };
 
@@ -25,7 +24,7 @@ const SubMenu: React.ForwardRefRenderFunction<unknown, Props> = (
   return (
     <li
       ref={subMenuRef}
-      className={classNames('pro-menu-item pro-sub-menu', className, { open: height !== 0 })}
+      className={classNames('pro-menu-item pro-sub-menu', className, { open: !closed })}
     >
       <div
         {...rest}