update popper behavior on collapse

azouaoui-med · Oct 13, 2022 · 5ce8b33 · 5ce8b33
1 parent 2c449e1
commit 5ce8b33
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-pro-sidebar",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "description": "high level and customizable side navigation",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

diff --git a/src/components/SubMenu.tsx b/src/components/SubMenu.tsx
@@ -125,7 +125,7 @@ export const SubMenuFR: React.ForwardRefRenderFunction<HTMLLIElement, SubMenuPro
 
   const handleSlideToggle = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
     onClick?.(event);
-    if (level === 0 && collapsed) setOpenWhenCollapsed(!openWhenCollapsed);
+    if (level === 0 && collapsed) setOpenWhenCollapsed((prevState) => !prevState);
     else if (typeof openSubmenu === 'undefined') {
       onOpenChange?.(!open);
       setOpen(!open);
@@ -139,6 +139,14 @@ export const SubMenuFR: React.ForwardRefRenderFunction<HTMLLIElement, SubMenuPro
       const instance = createPopper(anchorRef.current, SubMenuContentRef.current, {
         placement: 'right',
         strategy: 'fixed',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 5],
+            },
+          },
+        ],
       });
 
       setPopperInstance(instance);

diff --git a/src/components/SubMenuContent.tsx b/src/components/SubMenuContent.tsx
@@ -35,8 +35,7 @@ const StyledSubMenuContent = styled.div<SubMenuContentProps>`
   ${({ collapsed, firstLevel, openWhenCollapsed }) =>
     collapsed && firstLevel
       ? `
-      margin-left: 5px!important;
-      margin-right: 5px!important;
+    
       padding-left: 0px;
       width: 200px;
       border-radius: 4px;