Web:Common:Navigation: fix displaying for desktop devices, add max-width for header container and moved out from drop-box toggle info-panel button

packages/asc-web-common/components/Navigation/Navigation.js

@@ -1,28 +1,31 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import Loaders from "@appserver/common/components/Loaders";
-
 import StyledContainer from "./StyledNavigation";
 import ArrowButton from "./sub-components/arrow-btn";
 import Text from "./sub-components/text";
 import ControlButtons from "./sub-components/control-btn";
 import DropBox from "./sub-components/drop-box";
 
-import { isMobileOnly } from "react-device-detect";
-
 import { Consumer } from "@appserver/components/utils/context";
 
 import DomHelpers from "@appserver/components/utils/domHelpers";
 import Backdrop from "@appserver/components/backdrop";
 
+import { isMobile, isMobileOnly } from "react-device-detect";
+import {
+  isMobile as isMobileUtils,
+  isTablet as isTabletUtils,
+  isDesktop as isDesktopUtils,
+} from "@appserver/components/utils/device";
+import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn";
+
 const Navigation = ({
   tReady,
   showText,
   isRootFolder,
   title,
   canCreate,
-  isDesktop,
   isTabletView,
   personal,
   onClickFolder,
@@ -47,6 +50,12 @@ const Navigation = ({
   const dropBoxRef = React.useRef(null);
   const containerRef = React.useRef(null);
 
+  const isDesktop =
+    (!isMobile && !isTabletUtils() && !isMobileUtils()) ||
+    (isDesktopUtils() && !isMobile);
+
+  console.log(isDesktop);
+
   const onMissClick = (e) => {
     e.preventDefault;
     const path = e.path || (e.composedPath && e.composedPath());
@@ -120,6 +129,7 @@ const Navigation = ({
               )}
               <DropBox
                 {...rest}
+                isDesktop={isDesktop}
                 ref={dropBoxRef}
                 maxHeight={maxHeight}
                 dropBoxWidth={dropBoxWidth}
@@ -146,9 +156,9 @@ const Navigation = ({
             isRootFolder={isRootFolder}
             canCreate={canCreate}
             title={title}
-            isDesktop={isDesktop}
             isTabletView={isTabletView}
             isRecycleBinFolder={isRecycleBinFolder}
+            isDesktop={isDesktop}
           >
             <ArrowButton
               isRootFolder={isRootFolder}
@@ -171,8 +181,16 @@ const Navigation = ({
               clearTrash={clearTrash}
               toggleInfoPanel={toggleInfoPanel}
               isInfoPanelVisible={isInfoPanelVisible}
+              isDesktop={isDesktop}
             />
           </StyledContainer>
+          {isDesktop && (
+            <ToggleInfoPanelButton
+              isRootFolder={isRootFolder}
+              toggleInfoPanel={toggleInfoPanel}
+              isInfoPanelVisible={isInfoPanelVisible}
+            />
+          )}
         </>
       )}
     </Consumer>

packages/asc-web-common/components/Navigation/StyledNavigation.js

@@ -1,9 +1,16 @@
 import styled, { css } from "styled-components";
 import { isMobileOnly } from "react-device-detect";
-import { tablet, mobile } from "@appserver/components/utils/device";
+import { tablet, mobile, isMobile } from "@appserver/components/utils/device";
 
 const StyledContainer = styled.div`
-  width: 100% !important;
+  ${(props) =>
+    !props.isDropBox &&
+    props.isDesktop &&
+    css`
+      width: fit-content;
+      max-width: calc(100% - 72px);
+    `}
+
   display: grid;
   align-items: center;
   grid-template-columns: ${(props) =>
@@ -29,6 +36,14 @@ const StyledContainer = styled.div`
     padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")};
   }
 
+  ${isMobile &&
+  css`
+    width: 100%;
+    grid-template-columns: ${(props) =>
+      props.isRootFolder ? "auto 1fr" : "29px 1fr auto"};
+    padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")};
+  `}
+
   @media ${mobile} {
     padding: ${(props) =>
       props.isDropBox ? "10px 0 5px" : "10px 0 11px"} !important;

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

@@ -151,7 +151,7 @@ const ControlButtons = ({
             <ToggleInfoPanelButton
               isRootFolder={isRootFolder}
               isInfoPanelVisible={isInfoPanelVisible}
-              toggleInfoPanelAction={toggleInfoPanelAction}
+              toggleInfoPanel={toggleInfoPanelAction}
             />
           )}
         </>

packages/asc-web-common/components/Navigation/sub-components/drop-box.js

@@ -14,10 +14,8 @@ import StyledContainer from "../StyledNavigation";
 import { isMobile, isMobileOnly } from "react-device-detect";
 import {
   tablet,
-  mobile,
   isMobile as isMobileUtils,
   isTablet as isTabletUtils,
-  isDesktop as isDesktopUtils,
 } from "@appserver/components/utils/device";
 
 import { Base } from "@appserver/components/themes";
@@ -29,7 +27,7 @@ const StyledBox = styled.div`
 
   padding: ${isMobile ? "0 16px " : "0 20px"};
 
-  ${(props) => !props.isDesktop && `width: ${props.dropBoxWidth}px;`};
+  ${(props) => `width: ${props.dropBoxWidth}px;`};
 
   height: ${(props) => (props.height ? `${props.height}px` : "fit-content")};
   max-height: calc(100vh - 48px);
@@ -92,15 +90,13 @@ const DropBox = React.forwardRef(
       isInfoPanelVisible,
       maxHeight,
       isOpen,
+      isDesktop,
     },
     ref
   ) => {
     const [dropBoxHeight, setDropBoxHeight] = React.useState(0);
     const countItems = navigationItems.length;
 
-    const isDesktop =
-      (!isMobile && !isTabletUtils() && !isMobileUtils()) || isDesktopUtils();
-
     const getItemSize = (index) => {
       if (index === countItems - 1) return 51;
       return isMobile || isMobileUtils() || isTabletUtils() ? 36 : 30;

packages/asc-web-common/components/Navigation/sub-components/text.js

@@ -59,7 +59,7 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
   min-width: 8px !important;
   width: 8px !important;
   min-height: 18px !important;
-  padding: 0 4px 0 1px;
+  padding: 0 4px 0 2px;
   transform: rotate(-180deg);
 
   path {

packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js

@@ -79,7 +79,7 @@ StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
 const ToggleInfoPanelButton = ({
   isRootFolder,
   isInfoPanelVisible,
-  toggleInfoPanelAction,
+  toggleInfoPanel,
 }) => {
   return (
     <StyledInfoPanelToggleWrapper
@@ -92,7 +92,7 @@ const ToggleInfoPanelButton = ({
           iconName="images/panel.react.svg"
           size="16"
           isFill={true}
-          onClick={toggleInfoPanelAction}
+          onClick={toggleInfoPanel}
         />
       </div>
     </StyledInfoPanelToggleWrapper>