Feature/#2292 allow menu to be expanded by default (Redo) (#2510)

* Compressed changes

* Renamed 'unfolded' to 'expanded'

frontend/taipy-gui/src/components/Taipy/Menu.spec.tsx

@@ -17,7 +17,7 @@ const lov: LovItem[] = [
 
 const imageItem: LovItem = { id: "ii1", item: { path: "/img/fred.png", text: "Image" } };
 
-describe("Menu Component", () => {
+describe("Menu Component", () => {   
     it("renders", async () => {
         const { getByText } = render(<Menu lov={lov} />);
         const elt = getByText("Item 1");
@@ -85,4 +85,16 @@ describe("Menu Component", () => {
             type: "SEND_ACTION_ACTION",
         });
     });
-});
+
+    it("starts folded unless 'expanded' is true", () => {
+        const improbable_width = "277px";
+        const { rerender, container } = render(
+            <Menu label="Test Menu" lov={lov} width={improbable_width} />
+        );
+        const drawer = container.querySelector(".MuiDrawer-root");
+        expect(drawer).toHaveStyle(`width: calc(72px + 1px)`); 
+        rerender(<Menu label="Test Menu" expanded={true} lov={lov} width={improbable_width} />);
+        expect(drawer).toHaveStyle(`width: ${improbable_width}`);
+    });
+
+});

frontend/taipy-gui/src/components/Taipy/Menu.tsx

@@ -11,7 +11,7 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useCallback, useMemo, useState, MouseEvent, CSSProperties } from "react";
+import React, { useCallback, useMemo, useState, MouseEvent, CSSProperties,useEffect } from "react";
 import MenuIco from "@mui/icons-material/Menu";
 import ListItemButton from "@mui/material/ListItemButton";
 import Drawer from "@mui/material/Drawer";
@@ -36,9 +36,12 @@ const avatarSx = { bgcolor: (theme: Theme) => theme.palette.text.primary };
 const baseTitleProps = { noWrap: true, variant: "h6" } as const;
 
 const Menu = (props: MenuProps) => {
-    const { label, onAction = "", lov, width, inactiveIds = emptyArray, active = true } = props;
+    const { label, onAction = "", lov, width, inactiveIds = emptyArray, active = true, expanded = false } = props;
     const [selectedValue, setSelectedValue] = useState<string>("");
-    const [opened, setOpened] = useState(false);
+    const [opened, setOpened] = useState(expanded);
+    useEffect(() => { 
+        setOpened(expanded); 
+    }, [expanded]);
     const dispatch = useDispatch();
     const theme = useTheme();
     const module = useModule();

frontend/taipy-gui/src/components/Taipy/MenuCtl.tsx

@@ -34,10 +34,11 @@ interface MenuCtlProps extends LovProps<string> {
     defaultInactiveIds?: string;
     selected?: string[];
     defaultSelected?: string;
+    expanded?: boolean;
 }
 
 const MenuCtl = (props: MenuCtlProps) => {
-    const {id, label, onAction, defaultLov = "", width = "15vw", width_Mobile_ = "85vw"} = props;
+    const {id, label, onAction, defaultLov = "", width = "15vw", width_Mobile_ = "85vw",expanded} = props;
     const dispatch = useDispatch();
     const isMobile = useIsMobile();
     const module = useModule();
@@ -86,10 +87,11 @@ const MenuCtl = (props: MenuCtlProps) => {
                 width: isMobile ? width_Mobile_ : width,
                 className: className,
                 selected: selected,
+                expanded: expanded,
             } as MenuProps)
         );
         return () => dispatch(createSetMenuAction({}));
-    }, [label, onAction, active, lovList, inactiveIds, width, width_Mobile_, isMobile, className, dispatch, selected]);
+    }, [label, onAction, active, lovList, inactiveIds, width, width_Mobile_, isMobile, className, dispatch, selected,expanded]);
 
     return <></>;
 };

frontend/taipy-gui/src/utils/lov.ts

@@ -34,4 +34,5 @@ export interface MenuProps extends TaipyBaseProps {
     lov?: LovItem[];
     active?: boolean;
     selected?: string[];
+    expanded?: boolean;
 }

taipy/gui/_renderers/factory.py

@@ -371,6 +371,7 @@ class _Factory:
                 ("hover_text", PropertyType.dynamic_string),
                 ("width",),
                 ("width[mobile]",),
+                ("expanded",PropertyType.boolean, False),
             ]
         )
         ._set_propagate(),

taipy/gui/viselements.json

@@ -1646,6 +1646,12 @@
                         "type": "str",
                         "default_value": "\"85vw\"",
                         "doc": "The width of the menu when unfolded, in CSS units, when running on a mobile device."
+                    },
+                    {
+                        "name": "expanded",
+                        "type":"bool",
+                        "default_value":"False",
+                        "doc": "Defines whether the menu starts expanded or folded"
                     }
                 ]
             }