[#179] functionnal topbar when dialog expanded (#292)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Dialog/ResponsiveDialog.tsx

@@ -116,6 +116,7 @@ function ResponsiveDialog({
     "& .MuiBackdrop-root": {
       opacity: isExpanded ? "0 !important" : undefined,
       transition: isExpanded ? "none !important" : undefined,
+      pointerEvents: isExpanded ? "none" : undefined,
     },
     "& .MuiDialog-paper": {
       maxWidth: isExpanded ? "100%" : normalMaxWidth,
@@ -124,6 +125,7 @@ function ResponsiveDialog({
       margin: isExpanded ? `${headerHeight} 0 0 0` : "32px",
       boxShadow: isExpanded ? "none !important" : undefined,
       transition: isExpanded ? "none !important" : undefined,
+      zIndex: isExpanded ? 1200 : 1300,
     },
     "& .MuiDialogActions-root .MuiBox-root": {
       maxWidth: isExpanded ? expandedContentMaxWidth : undefined,
@@ -145,16 +147,35 @@ function ResponsiveDialog({
     width: "100%",
   };
 
+  React.useEffect(() => {
+    if (isExpanded) {
+      document.body.classList.add("dialog-expanded");
+    } else {
+      document.body.classList.remove("dialog-expanded");
+    }
+  }, [isExpanded]);
+
+  const handleClose = (
+    event: {},
+    reason: "backdropClick" | "escapeKeyDown"
+  ) => {
+    if (isExpanded && reason === "backdropClick") {
+      return;
+    }
+    onClose();
+  };
+
   const currentSpacing = isExpanded ? expandedSpacing : normalSpacing;
 
   return (
     <Dialog
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       maxWidth={false}
       fullWidth
       transitionDuration={isExpanded ? 0 : 300}
       sx={[baseSx, ...(Array.isArray(sx) ? sx : [sx])]}
+      style={isExpanded ? { zIndex: 1200 } : undefined}
       {...otherDialogProps}
     >
       <DialogTitle sx={titleSx} {...dialogTitleProps}>

src/components/Menubar/Menubar.styl

@@ -37,7 +37,7 @@
   align-items center
   padding 0.5rem
   width 100%
-  z-index 1000
+  z-index 1300
   height 80px
   background-color #fff
 
@@ -91,3 +91,9 @@
   display flex
   justify-content flex-end
   align-items center
+
+body.dialog-expanded .navigation-controls,
+body.dialog-expanded .current-date-time,
+body.dialog-expanded .refresh-button,
+body.dialog-expanded .select-display
+  display none

src/components/Menubar/Menubar.tsx

@@ -148,6 +148,7 @@ export function Menubar({
         <div className="right-menu">
           <div className="menu-items">
             <IconButton
+              className="refresh-button"
               onClick={onRefresh}
               aria-label={t("menubar.refresh")}
               title={t("menubar.refresh")}
@@ -159,6 +160,7 @@ export function Menubar({
             <FormControl
               size="small"
               style={{ minWidth: 120, marginRight: 16 }}
+              className="select-display"
             >
               <Select
                 value={currentView}