Web:Client:Navigation: fix for trash folder

packages/common/components/Navigation/Navigation.js

@@ -221,6 +221,7 @@ const Navigation = ({
             isDesktopClient={isDesktopClient}
             isInfoPanelVisible={isInfoPanelVisible}
             withLogo={!!withLogo}
+            className="navigation-container"
           >
             {withLogo && (
               <NavigationLogo
@@ -253,10 +254,14 @@ const Navigation = ({
               onPlusClick={onPlusClick}
               isFrame={isFrame}
               isPublicRoom={isPublicRoom}
+              isTrashFolder={isTrashFolder}
             />
           </StyledContainer>
           {isTrashFolder && !isEmptyPage && (
-            <TrashWarning title={titles.trashWarning} />
+            <TrashWarning
+              title={titles.trashWarning}
+              isTabletView={isTabletView}
+            />
           )}
           {infoPanelIsVisible && !hideInfoPanel && (
             <ToggleInfoPanelButton

packages/common/components/Navigation/sub-components/context-btn.js

@@ -9,7 +9,7 @@ const ContextButton = (props) => {
   const ref = useRef(null);
   const menuRef = useRef(null);
 
-  const { className, getData, withMenu, ...rest } = props;
+  const { className, getData, withMenu, isTrashFolder, ...rest } = props;
 
   const toggle = (e, isOpen) => {
     isOpen ? menuRef.current.show(e) : menuRef.current.hide(e);
@@ -41,7 +41,7 @@ const ContextButton = (props) => {
         ref={menuRef}
         onHide={onHide}
         scaled={false}
-        leftOffset={150}
+        leftOffset={isTrashFolder ? 188 : 150}
       />
     </div>
   );

packages/common/components/Navigation/sub-components/control-btn.js

@@ -108,6 +108,7 @@ const ControlButtons = ({
   onPlusClick,
   isFrame,
   isPublicRoom,
+  isTrashFolder,
 }) => {
   const toggleInfoPanelAction = () => {
     toggleInfoPanel && toggleInfoPanel();
@@ -149,6 +150,7 @@ const ControlButtons = ({
             withMenu={withMenu}
             //onPlusClick={onPlusClick}
             title={titles?.actions}
+            isTrashFolder={isTrashFolder}
           />
 
           {!isDesktop && (

packages/common/components/Navigation/sub-components/trash-warning.js

@@ -21,19 +21,11 @@ const StyledTrashWarning = styled.div`
     theme.section.header.trashErasureLabelBackground};
 
   ${({ isTabletView }) =>
-    !isTabletView
-      ? css`
-          @media ${tablet} {
-            display: none;
-          }
-        `
-      : css`
-          margin-bottom: 16px;
-          display: none;
-          @media ${tablet} {
-            display: flex;
-          }
-        `}
+    isTabletView &&
+    css`
+      @media ${tablet} {
+      }
+    `}
 `;
 
 const TrashWarning = ({ title, isTabletView }) => {

packages/common/components/Section/sub-components/section-header.js

@@ -18,6 +18,30 @@ const StyledSectionHeader = styled.div`
     height: 61px;
     min-height: 61px;
 
+    ${({ isTrashFolder, isEmptyPage }) =>
+      isTrashFolder &&
+      !isEmptyPage &&
+      css`
+        height: 109px;
+        min-height: 109px;
+
+        .header-container {
+          flex-direction: column;
+          height: 109px !important;
+          min-height: 109px !important;
+
+          .navigation-container {
+            height: calc(100% - 32px);
+          }
+          .trash-warning {
+            min-height: 32px;
+            height: 32px;
+
+            margin-bottom: 15px;
+          }
+        }
+      `}
+
     .header-container {
       margin-bottom: 1px;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -28,28 +52,90 @@ const StyledSectionHeader = styled.div`
   css`
     height: 61px;
     min-height: 61px;
+
+    ${({ isTrashFolder, isEmptyPage }) =>
+      isTrashFolder &&
+      !isEmptyPage &&
+      css`
+        height: 109px;
+        min-height: 109px;
+
+        .header-container {
+          flex-direction: column;
+          height: 109px !important;
+          min-height: 109px !important;
+
+          .navigation-container {
+            height: calc(100% - 32px);
+          }
+          .trash-warning {
+            min-height: 32px;
+            height: 32px;
+
+            margin-bottom: 15px;
+          }
+        }
+      `}
   `}
 
   @media ${mobile} {
     height: 53px;
     min-height: 53px;
+
+    ${({ isTrashFolder, isEmptyPage }) =>
+      isTrashFolder &&
+      !isEmptyPage &&
+      css`
+        height: 101px;
+        min-height: 101px;
+
+        .header-container {
+          flex-direction: column;
+          height: 101px !important;
+          min-height: 101px !important;
+
+          .navigation-container {
+            height: calc(100% - 32px);
+          }
+          .trash-warning {
+            min-height: 32px;
+            height: 32px;
+
+            margin-bottom: 15px;
+          }
+        }
+      `}
   }
 
   ${isMobileOnly &&
   css`
     height: 53px;
     min-height: 53px;
-  `}
 
-  ${({ isTrashFolder, isEmptyPage }) =>
-    isTrashFolder &&
-    !isEmptyPage &&
-    css`
-      @media ${tablet} {
-        height: 109px;
-        min-height: 109px;
-      }
-    `}
+    ${({ isTrashFolder, isEmptyPage }) =>
+      isTrashFolder &&
+      !isEmptyPage &&
+      css`
+        height: 101px;
+        min-height: 101px;
+
+        .header-container {
+          flex-direction: column;
+          height: 101px !important;
+          min-height: 101px !important;
+
+          .navigation-container {
+            height: calc(100% - 32px);
+          }
+          .trash-warning {
+            min-height: 32px;
+            height: 32px;
+
+            margin-bottom: 15px;
+          }
+        }
+      `}
+  `}
 
   padding-right: 20px;