@gridsuite/commons-ui 0.55.0 → 0.57.0

package/dist/components/TopBar/TopBar.js

@@ -1,11 +1,10 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { Menu, MenuItem, ListItemIcon, AppBar, Toolbar, Box, IconButton, ListItemText, Button, Popper, Paper, ClickAwayListener, MenuList, Typography, ToggleButtonGroup, ToggleButton, darken } from "@mui/material";
-import { Apps, ArrowDropUp, ArrowDropDown, Person, WbSunny, Brightness3, Computer, Settings, HelpOutline, FullscreenExit, Fullscreen, ExitToApp } from "@mui/icons-material";
+import { Apps, ArrowDropUp, ArrowDropDown, Person, WbSunny, Brightness3, Computer, Settings, HelpOutline, ExitToApp } from "@mui/icons-material";
 import { styled } from "@mui/system";
 import PropTypes from "prop-types";
-import FullScreen, { fullScreenSupported } from "react-request-fullscreen";
 import GridLogo from "./GridLogo.js";
 import AboutDialog from "./AboutDialog.js";
 const styles = {
@@ -132,8 +131,6 @@ const TopBar = ({
 }) => {
   const [anchorElSettingsMenu, setAnchorElSettingsMenu] = useState(null);
   const [anchorElAppsMenu, setAnchorElAppsMenu] = useState(null);
-  const fullScreenRef = useRef(null);
-  const [isFullScreen, setIsFullScreen] = useState(false);
   const handleToggleSettingsMenu = (event) => {
     setAnchorElSettingsMenu(event.currentTarget);
   };
@@ -152,14 +149,6 @@ const TopBar = ({
       onParametersClick();
     }
   };
-  function onFullScreenChange(isFullScreenValue) {
-    setAnchorElSettingsMenu(null);
-    setIsFullScreen(isFullScreen);
-  }
-  function requestOrExitFullScreen() {
-    setAnchorElSettingsMenu(null);
-    fullScreenRef.current.fullScreen();
-  }
   const abbreviationFromUserName = (name) => {
     const tab = name.split(" ").map((x) => x.charAt(0));
     if (tab.length === 1) {
@@ -204,448 +193,401 @@ const TopBar = ({
     ),
     [onLogoClick, appLogo, appName, appColor]
   );
-  return /* @__PURE__ */ jsxs(AppBar, { position: "static", color: "default", sx: styles.appBar, children: [
-    /* @__PURE__ */ jsx(
-      FullScreen,
-      {
-        ref: fullScreenRef,
-        onFullScreenChange,
-        onFullScreenError: (e) => console.debug("full screen error : " + e.message)
-      }
-    ),
-    /* @__PURE__ */ jsxs(Toolbar, { children: [
-      logo_clickable,
-      /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
-      user && /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            "aria-label": "apps",
-            "aria-controls": "apps-menu",
-            "aria-haspopup": "true",
-            onClick: handleClickAppsMenu,
-            color: "inherit",
-            children: /* @__PURE__ */ jsx(Apps, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          StyledMenu,
-          {
-            id: "apps-menu",
-            anchorEl: anchorElAppsMenu,
-            keepMounted: true,
-            open: Boolean(anchorElAppsMenu),
-            onClose: handleCloseAppsMenu,
-            children: appsAndUrls && appsAndUrls.filter((item) => !item.hiddenInAppsMenu).map((item) => /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "a",
-                href: item.url,
-                sx: styles.link,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AppBar, { position: "static", color: "default", sx: styles.appBar, children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+    logo_clickable,
+    /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
+    user && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "apps",
+          "aria-controls": "apps-menu",
+          "aria-haspopup": "true",
+          onClick: handleClickAppsMenu,
+          color: "inherit",
+          children: /* @__PURE__ */ jsx(Apps, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StyledMenu,
+        {
+          id: "apps-menu",
+          anchorEl: anchorElAppsMenu,
+          keepMounted: true,
+          open: Boolean(anchorElAppsMenu),
+          onClose: handleCloseAppsMenu,
+          children: appsAndUrls && appsAndUrls.filter((item) => !item.hiddenInAppsMenu).map((item) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "a",
+              href: item.url,
+              sx: styles.link,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: /* @__PURE__ */ jsx(
+                StyledMenuItem,
+                {
+                  onClick: handleCloseAppsMenu,
+                  children: /* @__PURE__ */ jsxs(ListItemText, { children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: "bold"
+                        },
+                        children: "Grid"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          color: item.appColor === void 0 ? "grey" : item.appColor,
+                          fontWeight: "bold"
+                        },
+                        children: item.name
+                      }
+                    )
+                  ] })
+                }
+              )
+            },
+            item.name
+          ))
+        }
+      )
+    ] }),
+    user && /* @__PURE__ */ jsxs(Box, { sx: styles.menuContainerg, children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          "aria-controls": "settings-menu",
+          "aria-haspopup": "true",
+          sx: styles.showHideMenu,
+          onClick: handleToggleSettingsMenu,
+          color: "inherit",
+          style: Boolean(anchorElSettingsMenu) ? { cursor: "initial" } : { cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: user !== null ? abbreviationFromUserName(
+              user.profile.name
+            ) : "" }),
+            anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popper,
+        {
+          sx: styles.settingsMenu,
+          open: Boolean(anchorElSettingsMenu),
+          anchorEl: anchorElSettingsMenu,
+          children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(
+            ClickAwayListener,
+            {
+              onClickAway: handleCloseSettingsMenu,
+              children: /* @__PURE__ */ jsxs(MenuList, { id: "settings-menu", children: [
+                /* @__PURE__ */ jsxs(
                   StyledMenuItem,
                   {
-                    onClick: handleCloseAppsMenu,
-                    children: /* @__PURE__ */ jsxs(ListItemText, { children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
+                    sx: styles.borderBottom,
+                    disabled: true,
+                    style: { opacity: "1" },
+                    children: [
+                      /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Person, { fontSize: "small" }) }),
+                      /* @__PURE__ */ jsx(ListItemText, { disabled: false, children: user !== null && /* @__PURE__ */ jsxs(
+                        Box,
                         {
-                          style: {
-                            fontWeight: "bold"
-                          },
-                          children: "Grid"
+                          component: "span",
+                          sx: styles.sizeLabel,
+                          children: [
+                            user.profile.name,
+                            " ",
+                            /* @__PURE__ */ jsx("br", {}),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                component: "span",
+                                sx: styles.userMail,
+                                children: user.profile.email
+                              }
+                            )
+                          ]
                         }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "span",
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  StyledMenuItem,
+                  {
+                    disabled: true,
+                    style: {
+                      opacity: "1",
+                      paddingTop: "10px",
+                      paddingBottom: "10px",
+                      backgroundColor: "transparent"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                        Typography,
                         {
-                          style: {
-                            color: item.appColor === void 0 ? "grey" : item.appColor,
-                            fontWeight: "bold"
-                          },
-                          children: item.name
+                          sx: styles.sizeLabel,
+                          children: /* @__PURE__ */ jsx(
+                            FormattedMessage,
+                            {
+                              id: "top-bar/displayMode",
+                              defaultMessage: "Display mode"
+                            }
+                          )
                         }
-                      )
-                    ] })
-                  }
-                )
-              },
-              item.name
-            ))
-          }
-        )
-      ] }),
-      user && /* @__PURE__ */ jsxs(Box, { sx: styles.menuContainerg, children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            "aria-controls": "settings-menu",
-            "aria-haspopup": "true",
-            sx: styles.showHideMenu,
-            onClick: handleToggleSettingsMenu,
-            color: "inherit",
-            style: Boolean(anchorElSettingsMenu) ? { cursor: "initial" } : { cursor: "pointer" },
-            children: [
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: user !== null ? abbreviationFromUserName(
-                user.profile.name
-              ) : "" }),
-              anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Popper,
-          {
-            sx: styles.settingsMenu,
-            open: Boolean(anchorElSettingsMenu),
-            anchorEl: anchorElSettingsMenu,
-            children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(
-              ClickAwayListener,
-              {
-                onClickAway: handleCloseSettingsMenu,
-                children: /* @__PURE__ */ jsxs(MenuList, { id: "settings-menu", children: [
-                  /* @__PURE__ */ jsxs(
-                    StyledMenuItem,
-                    {
-                      sx: styles.borderBottom,
-                      disabled: true,
-                      style: { opacity: "1" },
-                      children: [
-                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Person, { fontSize: "small" }) }),
-                        /* @__PURE__ */ jsx(ListItemText, { disabled: false, children: user !== null && /* @__PURE__ */ jsxs(
-                          Box,
-                          {
-                            component: "span",
-                            sx: styles.sizeLabel,
-                            children: [
-                              user.profile.name,
-                              " ",
-                              /* @__PURE__ */ jsx("br", {}),
-                              /* @__PURE__ */ jsx(
-                                Box,
-                                {
-                                  component: "span",
-                                  sx: styles.userMail,
-                                  children: user.profile.email
-                                }
-                              )
-                            ]
-                          }
-                        ) })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    StyledMenuItem,
-                    {
-                      disabled: true,
-                      style: {
-                        opacity: "1",
-                        paddingTop: "10px",
-                        paddingBottom: "10px",
-                        backgroundColor: "transparent"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            sx: styles.sizeLabel,
-                            children: /* @__PURE__ */ jsx(
-                              FormattedMessage,
+                      ) }),
+                      /* @__PURE__ */ jsxs(
+                        ToggleButtonGroup,
+                        {
+                          exclusive: true,
+                          value: theme,
+                          size: "large",
+                          sx: styles.toggleButtonGroup,
+                          onChange: changeTheme,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              ToggleButton,
                               {
-                                id: "top-bar/displayMode",
-                                defaultMessage: "Display mode"
+                                value: LIGHT_THEME,
+                                "aria-label": LIGHT_THEME,
+                                sx: styles.toggleButton,
+                                children: /* @__PURE__ */ jsx(WbSunny, { fontSize: "small" })
                               }
-                            )
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxs(
-                          ToggleButtonGroup,
-                          {
-                            exclusive: true,
-                            value: theme,
-                            size: "large",
-                            sx: styles.toggleButtonGroup,
-                            onChange: changeTheme,
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                ToggleButton,
-                                {
-                                  value: LIGHT_THEME,
-                                  "aria-label": LIGHT_THEME,
-                                  sx: styles.toggleButton,
-                                  children: /* @__PURE__ */ jsx(WbSunny, { fontSize: "small" })
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                ToggleButton,
-                                {
-                                  value: DARK_THEME,
-                                  "aria-label": DARK_THEME,
-                                  sx: styles.toggleButton,
-                                  children: /* @__PURE__ */ jsx(Brightness3, { fontSize: "small" })
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  onEquipmentLabellingClick && /* @__PURE__ */ jsxs(
-                    StyledMenuItem,
-                    {
-                      disabled: true,
-                      style: {
-                        opacity: "1",
-                        // padding: '0',
-                        paddingTop: "10px",
-                        paddingBottom: "10px",
-                        backgroundColor: "transparent"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            sx: styles.sizeLabel,
-                            children: /* @__PURE__ */ jsx(
-                              FormattedMessage,
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ToggleButton,
                               {
-                                id: "top-bar/equipmentLabel",
-                                defaultMessage: "Equipment label"
+                                value: DARK_THEME,
+                                "aria-label": DARK_THEME,
+                                sx: styles.toggleButton,
+                                children: /* @__PURE__ */ jsx(Brightness3, { fontSize: "small" })
                               }
                             )
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxs(
-                          ToggleButtonGroup,
-                          {
-                            exclusive: true,
-                            value: equipmentLabelling,
-                            sx: styles.toggleButtonGroup,
-                            onChange: changeEquipmentLabelling,
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                ToggleButton,
-                                {
-                                  value: false,
-                                  sx: styles.toggleButton,
-                                  children: /* @__PURE__ */ jsx(
-                                    FormattedMessage,
-                                    {
-                                      id: "top-bar/id",
-                                      defaultMessage: "Id"
-                                    }
-                                  )
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                ToggleButton,
-                                {
-                                  value: true,
-                                  sx: styles.toggleButton,
-                                  children: /* @__PURE__ */ jsx(
-                                    FormattedMessage,
-                                    {
-                                      id: "top-bar/name",
-                                      defaultMessage: "Name"
-                                    }
-                                  )
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    StyledMenuItem,
-                    {
-                      disabled: true,
-                      style: {
-                        opacity: "1",
-                        paddingTop: "10px",
-                        paddingBottom: "10px",
-                        backgroundColor: "transparent"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            sx: styles.sizeLabel,
-                            children: /* @__PURE__ */ jsx(
-                              FormattedMessage,
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                onEquipmentLabellingClick && /* @__PURE__ */ jsxs(
+                  StyledMenuItem,
+                  {
+                    disabled: true,
+                    style: {
+                      opacity: "1",
+                      // padding: '0',
+                      paddingTop: "10px",
+                      paddingBottom: "10px",
+                      backgroundColor: "transparent"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          sx: styles.sizeLabel,
+                          children: /* @__PURE__ */ jsx(
+                            FormattedMessage,
+                            {
+                              id: "top-bar/equipmentLabel",
+                              defaultMessage: "Equipment label"
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs(
+                        ToggleButtonGroup,
+                        {
+                          exclusive: true,
+                          value: equipmentLabelling,
+                          sx: styles.toggleButtonGroup,
+                          onChange: changeEquipmentLabelling,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              ToggleButton,
                               {
-                                id: "top-bar/language",
-                                defaultMessage: "Language"
+                                value: false,
+                                sx: styles.toggleButton,
+                                children: /* @__PURE__ */ jsx(
+                                  FormattedMessage,
+                                  {
+                                    id: "top-bar/id",
+                                    defaultMessage: "Id"
+                                  }
+                                )
                               }
-                            )
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxs(
-                          ToggleButtonGroup,
-                          {
-                            exclusive: true,
-                            value: language,
-                            sx: styles.toggleButtonGroup,
-                            onChange: changeLanguage,
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                ToggleButton,
-                                {
-                                  value: LANG_SYSTEM,
-                                  "aria-label": LANG_SYSTEM,
-                                  sx: styles.languageToggleButton,
-                                  children: /* @__PURE__ */ jsx(Computer, {})
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                ToggleButton,
-                                {
-                                  value: LANG_ENGLISH,
-                                  "aria-label": LANG_ENGLISH,
-                                  sx: styles.languageToggleButton,
-                                  children: EN
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                ToggleButton,
-                                {
-                                  value: LANG_FRENCH,
-                                  "aria-label": LANG_FRENCH,
-                                  sx: styles.toggleButton,
-                                  children: FR
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  onParametersClick && /* @__PURE__ */ jsxs(
-                    StyledMenuItem,
-                    {
-                      onClick: onParametersClicked,
-                      sx: styles.borderTop,
-                      children: [
-                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Settings, { fontSize: "small" }) }),
-                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            sx: styles.sizeLabel,
-                            children: /* @__PURE__ */ jsx(
-                              FormattedMessage,
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ToggleButton,
                               {
-                                id: "top-bar/settings",
-                                defaultMessage: "Settings"
+                                value: true,
+                                sx: styles.toggleButton,
+                                children: /* @__PURE__ */ jsx(
+                                  FormattedMessage,
+                                  {
+                                    id: "top-bar/name",
+                                    defaultMessage: "Name"
+                                  }
+                                )
                               }
                             )
-                          }
-                        ) })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    StyledMenuItem,
-                    {
-                      sx: styles.borderBottom,
-                      style: { opacity: "1" },
-                      onClick: onAboutClicked,
-                      children: [
-                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) }),
-                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            sx: styles.sizeLabel,
-                            children: /* @__PURE__ */ jsx(
-                              FormattedMessage,
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  StyledMenuItem,
+                  {
+                    disabled: true,
+                    style: {
+                      opacity: "1",
+                      paddingTop: "10px",
+                      paddingBottom: "10px",
+                      backgroundColor: "transparent"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          sx: styles.sizeLabel,
+                          children: /* @__PURE__ */ jsx(
+                            FormattedMessage,
+                            {
+                              id: "top-bar/language",
+                              defaultMessage: "Language"
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs(
+                        ToggleButtonGroup,
+                        {
+                          exclusive: true,
+                          value: language,
+                          sx: styles.toggleButtonGroup,
+                          onChange: changeLanguage,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              ToggleButton,
                               {
-                                id: "top-bar/about",
-                                defaultMessage: "About"
+                                value: LANG_SYSTEM,
+                                "aria-label": LANG_SYSTEM,
+                                sx: styles.languageToggleButton,
+                                children: /* @__PURE__ */ jsx(Computer, {})
                               }
-                            )
-                          }
-                        ) })
-                      ]
-                    }
-                  ),
-                  fullScreenSupported() && /* @__PURE__ */ jsx(
-                    StyledMenuItem,
-                    {
-                      onClick: requestOrExitFullScreen,
-                      children: isFullScreen ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(FullscreenExit, { fontSize: "small" }) }),
-                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            sx: styles.sizeLabel,
-                            children: /* @__PURE__ */ jsx(
-                              FormattedMessage,
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ToggleButton,
                               {
-                                id: "top-bar/exitFullScreen",
-                                defaultMessage: "Exit full screen mode"
+                                value: LANG_ENGLISH,
+                                "aria-label": LANG_ENGLISH,
+                                sx: styles.languageToggleButton,
+                                children: EN
                               }
-                            )
-                          }
-                        ) })
-                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Fullscreen, { fontSize: "small" }) }),
-                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            sx: styles.sizeLabel,
-                            children: /* @__PURE__ */ jsx(
-                              FormattedMessage,
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ToggleButton,
                               {
-                                id: "top-bar/goFullScreen",
-                                defaultMessage: "Full screen"
+                                value: LANG_FRENCH,
+                                "aria-label": LANG_FRENCH,
+                                sx: styles.toggleButton,
+                                children: FR
                               }
                             )
-                          }
-                        ) })
-                      ] })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                onParametersClick && /* @__PURE__ */ jsxs(
+                  StyledMenuItem,
+                  {
+                    onClick: onParametersClicked,
+                    sx: styles.borderTop,
+                    children: [
+                      /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Settings, { fontSize: "small" }) }),
+                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          sx: styles.sizeLabel,
+                          children: /* @__PURE__ */ jsx(
+                            FormattedMessage,
+                            {
+                              id: "top-bar/settings",
+                              defaultMessage: "Settings"
+                            }
+                          )
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  StyledMenuItem,
+                  {
+                    sx: styles.borderBottom,
+                    style: { opacity: "1" },
+                    onClick: onAboutClicked,
+                    children: [
+                      /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) }),
+                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          sx: styles.sizeLabel,
+                          children: /* @__PURE__ */ jsx(
+                            FormattedMessage,
+                            {
+                              id: "top-bar/about",
+                              defaultMessage: "About"
+                            }
+                          )
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onLogoutClick, children: [
+                  /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ExitToApp, { fontSize: "small" }) }),
+                  /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      sx: styles.sizeLabel,
+                      children: /* @__PURE__ */ jsx(
+                        FormattedMessage,
+                        {
+                          id: "top-bar/logout",
+                          defaultMessage: "Logout"
+                        }
+                      )
                     }
-                  ),
-                  /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onLogoutClick, children: [
-                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ExitToApp, { fontSize: "small" }) }),
-                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        sx: styles.sizeLabel,
-                        children: /* @__PURE__ */ jsx(
-                          FormattedMessage,
-                          {
-                            id: "top-bar/logout",
-                            defaultMessage: "Logout"
-                          }
-                        )
-                      }
-                    ) })
-                  ] })
+                  ) })
                 ] })
-              }
-            ) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        AboutDialog,
-        {
-          open: isAboutDialogOpen,
-          onClose: () => setAboutDialogOpen(false),
-          appName,
-          appVersion,
-          appLicense,
-          globalVersionPromise,
-          additionalModulesPromise
+              ] })
+            }
+          ) })
         }
       )
-    ] })
-  ] });
+    ] }),
+    /* @__PURE__ */ jsx(
+      AboutDialog,
+      {
+        open: isAboutDialogOpen,
+        onClose: () => setAboutDialogOpen(false),
+        appName,
+        appVersion,
+        appLicense,
+        globalVersionPromise,
+        additionalModulesPromise
+      }
+    )
+  ] }) });
 };
 TopBar.propTypes = {
   onParametersClick: PropTypes.func,