diff --git a/web/ASC.Web.Common/src/components/Layout/context.js b/web/ASC.Web.Common/src/components/Layout/context.js
index b8caceedc2..ba4d91ef9d 100644
--- a/web/ASC.Web.Common/src/components/Layout/context.js
+++ b/web/ASC.Web.Common/src/components/Layout/context.js
@@ -1,8 +1,7 @@
import { createContext } from 'react'
-const RefContext = createContext({})
-const IsVisibleContext = createContext();
-export const RefContextProvider = RefContext.Provider
-export const IsVisibleContextProvider = IsVisibleContext.Provider
-export const RefContextConsumer = RefContext.Consumer
-export const IsVisibleContextConsumer = IsVisibleContext.Consumer
\ No newline at end of file
+const LayoutContext = createContext({})
+
+
+export const LayoutContextProvider = LayoutContext.Provider
+export const LayoutContextConsumer = LayoutContext.Consumer
diff --git a/web/ASC.Web.Common/src/components/Layout/index.js b/web/ASC.Web.Common/src/components/Layout/index.js
index c9ac295e28..bd18b458c6 100644
--- a/web/ASC.Web.Common/src/components/Layout/index.js
+++ b/web/ASC.Web.Common/src/components/Layout/index.js
@@ -1,43 +1,49 @@
-import React, { Component, createRef} from "react"
+import React, { Component, createRef, useRef, useEffect} from "react"
import styled from "styled-components";
-import { Scrollbar, utils} from "asc-web-components";
-import { isMobile } from "react-device-detect";
-import {RefContextProvider, IsVisibleContextProvider} from "./context"
+import { Scrollbar} from "asc-web-components";
+
+import {LayoutContextProvider} from "./context"
+
const StyledContainer = styled.div`
width:100%;
height:100vh;
`
-class Layout extends Component{
+class ExpandLayout extends Component{
constructor(props) {
super(props);
- this.state = {
- prevScrollPosition: window.pageYOffset ,
- visibleContent: true
- };
- this.scrollRefPage = createRef();
this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
+
+ this.state = {
+ isTablet: window.innerWidth < 1024,
+ prevScrollPosition: window.pageYOffset,
+ visibleContent: true,
+ };
+
+ this.scrollRefPage = createRef();
}
- componentDidMount() {
- (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
+ componentDidMount() {
+ this.getElementById = document.getElementById("scroll");
+
+ this.getElementById.addEventListener("scroll", this.scrolledTheVerticalAxis);
}
componentWillUnmount() {
- (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
- }
+ this.getElementById.removeEventListener("scroll", this.scrolledTheVerticalAxis);
+ }
scrolledTheVerticalAxis = () => {
const { prevScrollPosition } = this.state;
- const currentScrollPosition = document.getElementById("scroll").scrollTop || window.pageYOffset ;
+ const currentScrollPosition = this.getElementById.scrollTop || window.pageYOffset ;
let visibleContent = prevScrollPosition >= currentScrollPosition;
- if (!visibleContent && (document.getElementById("scroll").scrollHeight - document.getElementById("scroll").clientHeight < 57)) {
+ if (!visibleContent && (this.getElementById.scrollHeight - this.getElementById.clientHeight < 57)) {
visibleContent = true
}
@@ -49,27 +55,42 @@ class Layout extends Component{
render() {
const scrollProp = { ref: this.scrollRefPage } ;
- const { children } = this.props
-
+ const { children, windowWidth } = this.props
return(
-
-
-
- {(isMobile || (!isMobile && this.windowWidth.matches) )
+
+ {windowWidth && windowWidth.matches
?
-
-
- { children }
-
-
+
+ { children }
+
: children
}
-
+
+
+
)
}
}
+const Layout = (props) => {
+ // const scrollRefPage = useRef(null)
+ // const scrollProp = { ref: scrollRefPage } ;
+ const isTablet = window.innerWidth < 1024;
+
+ const [windowWidth, setWindowWidth] = React.useState({
+ matches: isTablet,
+ });
+
+ useEffect(() => {
+ let mediaQuery = window.matchMedia("(max-width: 1024px)");
+ mediaQuery.addListener(setWindowWidth);
+
+ return () => mediaQuery.removeListener(setWindowWidth);
+ }, []);
+
+ return ;
+}
export default Layout;
\ No newline at end of file
diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js
index 46ebd494ea..2882322fcc 100644
--- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js
@@ -6,7 +6,7 @@ import NavItem from "./nav-item";
import ProfileActions from "./profile-actions";
import { useTranslation } from "react-i18next";
import { utils } from "asc-web-components";
-import {IsVisibleContextConsumer} from "asc-web-common"
+import {LayoutContextConsumer} from "asc-web-common"
const { tablet } = utils.device;
import { logout } from "../../../store/auth/actions";
@@ -100,9 +100,9 @@ const HeaderNav = React.memo(
//console.log("HeaderNav render");
return (
-
+
{value =>
-
+
{modules.map((module) => (
}
-
+
);
}
);
diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js
index 1e9e6977b2..1faf680e00 100644
--- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js
@@ -5,7 +5,7 @@ import NavItem from "./nav-item";
import Headline from "../../Headline";
import Nav from "./nav";
import NavLogoItem from "./nav-logo-item";
-import {IsVisibleContextConsumer} from "asc-web-common"
+import {LayoutContextConsumer} from "asc-web-common"
import { utils } from "asc-web-components";
import { connect } from "react-redux";
import {
@@ -116,9 +116,9 @@ const HeaderComponent = ({
return (
<>
-
+
{value =>
-
+
{isNavAvailable && (