Web: Common: NavMenu/Layout: refactoring
This commit is contained in:
parent
e946eb42e0
commit
fec2e6d685
@ -1,7 +1,7 @@
|
||||
import React, { Component, createRef } from "react";
|
||||
import { Scrollbar, utils } from "asc-web-components";
|
||||
import { LayoutContextProvider } from "./context";
|
||||
import { isMobile, isSafari, isIOS } from "react-device-detect";
|
||||
import { isMobile, isSafari, isIOS, isChrome } from "react-device-detect";
|
||||
|
||||
const { isTouchDevice } = utils.device;
|
||||
class MobileLayout extends Component {
|
||||
@ -39,6 +39,13 @@ class MobileLayout extends Component {
|
||||
scrolledTheVerticalAxis = () => {
|
||||
const { prevScrollPosition, visibleContent } = this.state;
|
||||
|
||||
const currentScrollPosition =
|
||||
this.documentElement.scrollTop > 0
|
||||
? this.documentElement.scrollTop
|
||||
: window.pageYOffset;
|
||||
|
||||
let isVisible;
|
||||
|
||||
if (visibleContent && isMobile && !isTouchDevice) {
|
||||
return;
|
||||
}
|
||||
@ -46,10 +53,6 @@ class MobileLayout extends Component {
|
||||
window.scroll(0, 0);
|
||||
return;
|
||||
}
|
||||
const currentScrollPosition =
|
||||
this.documentElement.scrollTop > 0
|
||||
? this.documentElement.scrollTop
|
||||
: window.pageYOffset;
|
||||
|
||||
if (Math.abs(currentScrollPosition - prevScrollPosition) <= 54) {
|
||||
return;
|
||||
@ -62,7 +65,7 @@ class MobileLayout extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
let isVisible = prevScrollPosition >= currentScrollPosition;
|
||||
isVisible = prevScrollPosition >= currentScrollPosition;
|
||||
|
||||
if (
|
||||
(isSafari || isIOS) &&
|
||||
|
@ -27,7 +27,6 @@ const StyledNav = styled.nav`
|
||||
height: 56px;
|
||||
z-index: 190;
|
||||
|
||||
|
||||
.profile-menu {
|
||||
right: 12px;
|
||||
top: 66px;
|
||||
@ -41,24 +40,20 @@ const StyledNav = styled.nav`
|
||||
margin: 0 0 0 16px;
|
||||
padding: 0;
|
||||
min-width: 24px;
|
||||
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 0 16px;
|
||||
position:fixed;
|
||||
position: fixed;
|
||||
|
||||
transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
|
||||
-moz-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
|
||||
-ms-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
|
||||
-webkit-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
|
||||
-o-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
|
||||
|
||||
top: ${(props) => (props.valueTop ? "0" : "-56px")}
|
||||
transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
||||
-moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
||||
-ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
||||
-webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
||||
-o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
||||
|
||||
top: ${(props) => (props.valueTop ? "0" : "-56px")};
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
`;
|
||||
const HeaderNav = React.memo(
|
||||
({ history, homepage, modules, user, logout, isAuthenticated }) => {
|
||||
|
Loading…
Reference in New Issue
Block a user