[major] Header and sidenav refactored to use the popover component

packages/lib/src/base-menu/GroupItem.tsx

@@ -1,93 +1,61 @@
-import { useContext, useEffect, useId, useState } from "react";
+import { useContext, useId, useState } from "react";
 import DxcIcon from "../icon/Icon";
 import SubMenu from "./SubMenu";
 import ItemAction from "./ItemAction";
 import MenuItem from "./MenuItem";
 import { GroupItemProps } from "./types";
-import * as Popover from "@radix-ui/react-popover";
 import { useGroupItem } from "./useGroupItem";
 import BaseMenuContext from "./BaseMenuContext";
+import DxcPopover from "../popover/Popover";
 
 const GroupItem = ({ items, ...props }: GroupItemProps) => {
   const groupMenuId = `group-menu-${useId()}`;
-  const navigationTreeId = `sidenav-${useId()}`;
   const contextValue = useContext(BaseMenuContext) ?? {};
   const { groupSelected, isOpen, toggleOpen, hasPopOver, isHorizontal } = useGroupItem(
     items,
     contextValue,
     props.defaultOpen
   );
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-  useEffect(() => {
-    setPortalContainer(document?.getElementById(`${navigationTreeId}-portal`));
-  }, []);
+  const [isSubMenuOpen, setIsSubMenuOpen] = useState(true);
+
+  const toggleSubMenu = () => {
+    setIsSubMenuOpen((prev) => !prev);
+  };
 
   return hasPopOver ? (
     <>
-      <Popover.Root open={isOpen}>
-        <Popover.Trigger
-          aria-controls={undefined}
-          aria-expanded={undefined}
-          aria-haspopup={undefined}
-          asChild
-          type={undefined}
-        >
-          <ItemAction
-            aria-controls={isOpen ? groupMenuId : undefined}
-            aria-expanded={isOpen ? true : undefined}
-            collapseIcon={isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />}
-            onClick={() => {
-              toggleOpen();
-            }}
-            selected={groupSelected && !isOpen}
-            {...props}
-          />
-        </Popover.Trigger>
-        {portalContainer && (
-          <Popover.Portal container={portalContainer}>
+      <DxcPopover
+        offset={isHorizontal ? 16 : 0}
+        align={isHorizontal ? "start" : "end"}
+        side={isHorizontal ? "bottom" : "right"}
+        onClose={() => {
+          if (isOpen) {
+            toggleOpen();
+          }
+        }}
+        asChild
+        popoverContent={
+          <>
             <BaseMenuContext.Provider
               value={{ ...contextValue, displayGroupLines: false, hasPopOver: false, closePopOver: toggleOpen }}
             >
-              <Popover.Content
-                aria-label="Group details"
-                onKeyDown={(event) => {
-                  if (event.key === "Escape") {
-                    toggleOpen();
+              {!isHorizontal && props.depthLevel === 0 && (
+                <ItemAction
+                  aria-controls={isSubMenuOpen ? groupMenuId : undefined}
+                  aria-expanded={isSubMenuOpen ? true : undefined}
+                  aria-pressed={groupSelected && !isSubMenuOpen}
+                  collapseIcon={
+                    isSubMenuOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />
                   }
-                }}
-                align="start"
-                side={isHorizontal ? "bottom" : "right"}
-                style={{
-                  zIndex: "var(--z-contextualmenu)",
-                  padding: "var(--spacing-padding-xs)",
-                  boxShadow: "var(--shadow-100)",
-                  backgroundColor: "var(--color-bg-neutral-lightest)",
-                  borderRadius: "var(--border-radius-m)",
-                  ...(isHorizontal
-                    ? {}
-                    : {
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: "var(--spacing-gap-xxs)",
-                      }),
-                }}
-                sideOffset={isHorizontal ? 16 : 0}
-                onInteractOutside={() => toggleOpen()}
-              >
-                {!isHorizontal && props.depthLevel === 0 && (
-                  <ItemAction
-                    aria-controls={isOpen ? groupMenuId : undefined}
-                    aria-expanded={isOpen ? true : undefined}
-                    aria-pressed={groupSelected && !isOpen}
-                    collapseIcon={
-                      isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />
-                    }
-                    onClick={() => toggleOpen()}
-                    selected={groupSelected && !isOpen}
-                    {...props}
-                    icon={undefined}
-                  />
-                )}
+                  onClick={() => {
+                    toggleSubMenu();
+                  }}
+                  selected={groupSelected && !isSubMenuOpen}
+                  {...props}
+                  icon={undefined}
+                />
+              )}
+              {isSubMenuOpen && (
                 <SubMenu id={groupMenuId} depthLevel={props.depthLevel} isPopOver={true}>
                   {items.map((item, index) => (
                     <MenuItem
@@ -97,12 +65,23 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
                     />
                   ))}
                 </SubMenu>
-              </Popover.Content>
+              )}
             </BaseMenuContext.Provider>
-          </Popover.Portal>
-        )}
-      </Popover.Root>
-      <div id={`${navigationTreeId}-portal`} style={{ position: "absolute" }} />
+          </>
+        }
+        isOpen={isOpen}
+      >
+        <ItemAction
+          aria-controls={isOpen ? groupMenuId : undefined}
+          aria-expanded={isOpen ? true : undefined}
+          collapseIcon={isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />}
+          onClick={() => {
+            toggleOpen();
+          }}
+          selected={groupSelected && !isOpen}
+          {...props}
+        />
+      </DxcPopover>
     </>
   ) : (
     <>

packages/lib/src/base-menu/ItemAction.tsx

@@ -28,7 +28,7 @@ const Action = styled.a<{
   cursor: pointer;
   overflow: hidden;
   text-decoration: none;
-
+  width: stretch;
   &:hover {
     background-color: ${({ selected }) =>
       selected ? "var(--color-bg-primary-medium)" : "var(--color-bg-neutral-light)"};

packages/lib/src/sidenav/Sidenav.test.tsx

@@ -60,6 +60,31 @@ describe("DxcSidenav component", () => {
     expect(getByText("Dashboard")).toBeTruthy();
     expect(getByText("Settings")).toBeTruthy();
   });
+  test("Sidenav opens and closes a group submenu in a collapsed navigation menu", () => {
+    const navItems = [
+      {
+        label: "Parent group",
+        items: [
+          {
+            label: "Nested group",
+            items: [{ label: "Nested item" }],
+          },
+        ],
+      },
+    ];
+    const { getByLabelText, getByText, queryByText } = render(
+      <DxcSidenav navItems={navItems} defaultExpanded={false} />
+    );
+
+    fireEvent.click(getByLabelText("Parent group").closest("button")!);
+    expect(getByText("Nested group")).toBeInTheDocument();
+
+    fireEvent.click(getByText("Parent group"));
+    expect(queryByText("Nested group")).not.toBeInTheDocument();
+
+    fireEvent.click(getByText("Parent group"));
+    expect(getByText("Nested group")).toBeInTheDocument();
+  });
 
   test("Sidenav renders link items correctly", () => {
     const navItems = [{ label: "Dashboard", href: "/dashboard" }];