Web: Common: Fixed display menu and header

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { Backdrop, Toast, Aside } from "asc-web-components";
+import { Backdrop, Toast, Aside, utils } from "asc-web-components";
 import Header from "./sub-components/header";
 import HeaderNav from "./sub-components/header-nav";
 import HeaderUnAuth from "./sub-components/header-unauth";
@@ -12,12 +12,16 @@ import { connect } from "react-redux";
 import { withRouter } from "react-router";
 
 import { getLanguage } from "../../store/auth/selectors";
+const { tablet } = utils.device;
 
 const StyledHideAndShow = styled.div`
-  position: fixed; 
+  @media ${tablet} {
     top: 0px; 
     transition: top 0.3s;
     z-index:100;
+  }
+  
+
 `
 class NavMenu extends React.Component {
   constructor(props) {

web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js

@@ -24,6 +24,10 @@ const StyledNav = styled.nav`
   height: 56px;
   z-index: 190;
 
+  @media ${tablet} {
+      position:fixed;
+  }
+    
   .profile-menu {
     right: 12px;
     top: 66px;

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

@@ -17,7 +17,7 @@ import {
   getTotalNotificationsCount,
 } from "../../../store/auth/selectors";
 
-const { desktop } = utils.device;
+const { desktop, tablet } = utils.device;
 
 const backgroundColor = "#0F4071";
 
@@ -28,6 +28,10 @@ const Header = styled.header`
   width: 100vw;
   height: 56px;
 
+  @media ${tablet} {
+      position:fixed;
+      z-index:100;
+    }
   .header-logo-wrapper {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
@@ -40,6 +44,8 @@ const Header = styled.header`
     @media ${desktop} {
       display: none;
     }
+
+  
   }
 
   .header-logo-min_icon {

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

@@ -17,6 +17,7 @@ const StyledArticle = styled.article`
 
   @media ${tablet} {
     padding: 0 16px;
+
     ${(props) =>
       props.visible
         ? props.pinned
@@ -24,6 +25,7 @@ const StyledArticle = styled.article`
             display: flex;
             width: 240px;
             min-width: 240px;
+            margin-top: 50px;
           `
           : `
             width: 240px;

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

@@ -22,7 +22,7 @@ const StyledSectionHeader = styled.div`
     top: 56px; 
     padding-right:100%;
     transition: top 0.3s;
-    z-index:100;
+    z-index:1;
   }
 
   .section-header {