diff --git a/web/ASC.Web.Common/src/components/NavMenu/index.js b/web/ASC.Web.Common/src/components/NavMenu/index.js
index be1175fbf6..ec63b1c251 100644
--- a/web/ASC.Web.Common/src/components/NavMenu/index.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/index.js
@@ -11,6 +11,7 @@ import { connect } from "react-redux";
import { withRouter } from "react-router";
import { getLanguage, isDesktopClient } from "../../store/auth/selectors";
import Loaders from "../Loaders";
+import { LayoutContextConsumer } from "../Layout/context";
const backgroundColor = "#0F4071";
const { tablet } = utils.device;
@@ -29,8 +30,20 @@ const StyledContainer = styled.header`
so that there is no white bar in the header on loading. (padding-right: 16px)*/
`
: css`
- position: fixed;
- z-index: 160;
+ .navMenuHeader,
+ .profileMenuIcon,
+ .navMenuHeaderUnAuth {
+ position: fixed;
+ z-index: 160;
+ top: ${(props) => (props.isVisible ? "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);
+ }
+
width: 100%;
`}
}
@@ -128,39 +141,43 @@ class NavMenu extends React.Component {
//console.log("NavMenu render", this.state, this.props);
return (
-
-
+
+ {(value) => (
+
+
-
+
- {!isDesktop &&
- (isLoaded && isAuthenticated ? (
- <>
-
-
- >
- ) : !isLoaded && isAuthenticated ? (
-
- ) : (
-
- ))}
+ {!isDesktop &&
+ (isLoaded && isAuthenticated ? (
+ <>
+
+
+ >
+ ) : !isLoaded && isAuthenticated ? (
+
+ ) : (
+
+ ))}
- {isAsideAvailable && (
-
+ {isAsideAvailable && (
+
+ )}
+
)}
-
+
);
}
}
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 d0ba2dccb2..83599b8eb7 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
@@ -1,16 +1,13 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import styled from "styled-components";
import NavItem from "./nav-item";
import ProfileActions from "./profile-actions";
-
import { useTranslation } from "react-i18next";
import { utils } from "asc-web-components";
-import { LayoutContextConsumer } from "../../Layout/context";
-const { tablet } = utils.device;
-import { logout } from "../../../store/auth/actions";
+import { logout } from "../../../store/auth/actions";
import {
getCurrentUser,
getLanguage,
@@ -18,6 +15,8 @@ import {
getIsLoaded,
} from "../../../store/auth/selectors";
+const { tablet } = utils.device;
+
const StyledNav = styled.nav`
display: flex;
padding: 0 24px 0 16px;
@@ -25,7 +24,7 @@ const StyledNav = styled.nav`
position: absolute;
right: 0;
height: 56px;
- z-index: 190;
+ z-index: ${(props) => (props.isOpen ? "191" : "190")} !important;
.profile-menu {
right: 12px;
@@ -44,15 +43,6 @@ const StyledNav = styled.nav`
@media ${tablet} {
padding: 0 16px;
- position: fixed;
-
- 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(
@@ -94,37 +84,38 @@ const HeaderNav = React.memo(
return currentUserActions;
}, [onProfileClick, onAboutClick, onLogoutClick]);
+ const [isOpen, setIsOpen] = useState(false); //TODO: Need to refactoring
+ const isOpenProfileMenu = (value) => {
+ setIsOpen(value);
+ };
//console.log("HeaderNav render");
return (
-
- {(value) => (
-
- {modules.map((module) => (
-
- ))}
+
+ {modules.map((module) => (
+
+ ))}
- {isAuthenticated && user ? (
-
- ) : (
- <>>
- )}
-
+ {isAuthenticated && user ? (
+
+ ) : (
+ <>>
)}
-
+
);
}
);
diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js
index 79eca9ccc8..19724cbf6f 100644
--- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js
@@ -1,14 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
-import { Box, utils } from "asc-web-components";
-import styled, { css } from "styled-components";
+import { Box } from "asc-web-components";
+import styled from "styled-components";
import RecoverAccess from "./recover-access-container";
-import { isSafari } from "react-device-detect";
+
import { connect } from "react-redux";
import { useTranslation } from "react-i18next";
-import { LayoutContextConsumer } from "../../Layout/context";
-
-const { tablet } = utils.device;
const backgroundColor = "#0F4071";
@@ -21,17 +18,6 @@ const Header = styled.header`
justify-content: center;
padding: 0 32px;
- @media ${tablet} {
- 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);
-
- position: inherit;
- top: ${(props) => (props.valueTop ? "0" : "-56px")};
- }
-
.header-items-wrapper {
width: 960px;
@@ -72,39 +58,33 @@ const HeaderUnAuth = ({
const { t } = useTranslation();
return (
-
- {(value) => (
-
-
- {!isAuthenticated && isLoaded ? (
-
- ) : (
- <>>
- )}
+
- )}
-
+
{enableAdmMess && !wizardToken && }
+
+
);
};
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 38da4ddf68..1e0bfddb95 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
@@ -1,11 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
import NavItem from "./nav-item";
import Headline from "../../Headline";
import Nav from "./nav";
import NavLogoItem from "./nav-logo-item";
-import { LayoutContextConsumer } from "../../Layout/context";
+
import Loaders from "../../Loaders/index";
import { ReactSVG } from "react-svg";
@@ -20,7 +20,7 @@ import {
getIsLoaded,
} from "../../../store/auth/selectors";
-const { desktop, tablet } = utils.device;
+const { desktop } = utils.device;
const backgroundColor = "#0F4071";
@@ -31,18 +31,6 @@ const Header = styled.header`
width: 100vw;
height: 56px;
- @media ${tablet} {
- position: inherit;
-
- 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")};
- }
-
.header-logo-wrapper {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@@ -117,48 +105,40 @@ const HeaderComponent = ({
return (
<>
-
- {(value) => (
-
+ )}
+ src={props.logoUrl}
+ />
+
+
+ {currentProductName}
+
+
+
{isNavAvailable && (