Web:Common: Made the header of NavMenu and header of section fixed on top for tablet and mobile

web/ASC.Web.Common/src/components/NavMenu/index.js

@@ -4,7 +4,7 @@ import { Backdrop, Toast, Aside } from "asc-web-components";
 import Header from "./sub-components/header";
 import HeaderNav from "./sub-components/header-nav";
 import HeaderUnAuth from "./sub-components/header-unauth";
-
+import styled from "styled-components"
 import { I18nextProvider, withTranslation } from "react-i18next";
 import i18n from "./i18n";
 import { connect } from "react-redux";
@@ -13,6 +13,12 @@ import { withRouter } from "react-router";
 
 import { getLanguage } from "../../store/auth/selectors";
 
+const StyledHideAndShow = styled.div`
+  position: fixed; 
+  top: 0px; 
+  transition: top 0.3s;
+  z-index:100;
+`
 class NavMenu extends React.Component {
   constructor(props) {
     super(props);
@@ -102,7 +108,7 @@ class NavMenu extends React.Component {
         <Toast />
 
         <Backdrop visible={isBackdropVisible} onClick={this.backdropClick} />
-
+         <StyledHideAndShow id="scroll">
             <HeaderNav />
 
             {!isAuthenticated && isLoaded ? (
@@ -116,7 +122,7 @@ class NavMenu extends React.Component {
                 toggleAside={this.toggleAside}
               />
           )}
-
+        </StyledHideAndShow>
         {isAsideAvailable && (
           <Aside visible={isAsideVisible} onClick={this.backdropClick}>
             {asideContent}

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js

@@ -19,12 +19,14 @@ const commonStyles = css`
 
     @media ${tablet} {
       padding: 16px 0 16px 24px;
+      margin-top: 99px;
     }
 
     .section-wrapper {
       display: flex;
       flex-direction: column;
       min-height: 100%;
+
     }
   }
 `;
@@ -82,6 +84,7 @@ class SectionBody extends React.Component {
   }
 
   render() {
+
     //console.log("PageLayout SectionBody render");
     const {
       autoFocus,
@@ -92,6 +95,7 @@ class SectionBody extends React.Component {
       uploadFiles,
       viewAs,
       withScroll,
+
     } = this.props;
     
     const focusProps = autoFocus
@@ -115,6 +119,7 @@ class SectionBody extends React.Component {
 
           !isMobile ? (
             <Scrollbar {...scrollProp} stype="mediumBlack">
+              {console.log("Scroll ref in section", this.scrollRef)}
               <SelectedFrame
                 viewAs={viewAs}
                 scrollRef={this.scrollRef}
@@ -135,7 +140,7 @@ class SectionBody extends React.Component {
                 setSelections={setSelections}
               >
                 <div className="section-wrapper">
-                  <div className="section-wrapper-content" {...focusProps}>
+                  <div className="section-wrapper-content" >
                     {children}
                     <StyledSpacer pinned={pinned} />
                   </div>

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js

@@ -6,6 +6,8 @@ import isEqual from "lodash/isEqual";
 const { tablet } = utils.device;
 
 const StyledSectionHeader = styled.div`
+
+ 
   border-bottom: 1px solid #eceef1;
   height: 56px;
   margin-right: 24px;
@@ -14,6 +16,13 @@ const StyledSectionHeader = styled.div`
     margin-right: 16px;
     border-bottom: none;
     height: 44px;
+
+    background-color: #fff; 
+    position: fixed; 
+    top: 56px; 
+    width: 100%; 
+    transition: top 0.3s;
+    z-index:100;
   }
 
   .section-header {
@@ -40,17 +49,26 @@ const StyledSectionHeader = styled.div`
 `;
 
 class SectionHeader extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.focusRef = React.createRef();
+  }
+
   shouldComponentUpdate(nextProps) {
     return !isEqual(this.props, nextProps);
   }
+  componentDidMount() {
    
+  }
   render() {
+
     //console.log("PageLayout SectionHeader render");
     // eslint-disable-next-line react/prop-types
     const { isArticlePinned, ...rest } = this.props;
     return (
       <StyledSectionHeader isArticlePinned={isArticlePinned}>
-        <div className="section-header" {...rest} />
+        <div id="scroll" className="section-header" {...rest} />
       </StyledSectionHeader>
     );
   }