IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Common: Added hiding title when scrolling down and showing when scrolling up to login page

Browse Source
This commit is contained in:
TatianaLopaeva 2020-11-20 15:36:40 +03:00
parent 75162a20c2
commit 0a3529c3f4
1 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js
View File

@ -1,10 +1,13 @@
import React from "react";
import PropTypes from "prop-types";
import { Box } from "asc-web-components";
import { Box, utils } from "asc-web-components";
import styled from "styled-components";
import RecoverAccess from "./recover-access-container";
import { connect } from "react-redux";
import { useTranslation } from "react-i18next";
import { LayoutContextConsumer } from "../../Layout/context";
const { tablet } = utils.device;
const backgroundColor = "#0F4071";
@ -17,6 +20,17 @@ const Header = styled.header`
justify-content: center;
padding: 0 32px;
@media ${tablet} {
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")};
}
.header-items-wrapper {
width: 960px;
@ -59,33 +73,39 @@ const HeaderUnAuth = ({
const { t } = useTranslation();
return (
<Header>
<Box
displayProp="flex"
justifyContent="space-between"
alignItems="center"
className="header-items-wrapper"
>
{!isAuthenticated && isLoaded ? (
<div>
<a className="header-logo-wrapper" href="/">
<img
className="header-logo-min_icon"
src="images/nav.logo.react.svg"
/>
<img
className="header-logo-icon"
src="images/nav.logo.opened.react.svg"
/>
</a>
</div>
) : (
<></>
)}
<LayoutContextConsumer>
{(value) => (
<Header valueTop={value.isVisible}>
<Box
displayProp="flex"
justifyContent="space-between"
alignItems="center"
className="header-items-wrapper"
>
{!isAuthenticated && isLoaded ? (
<div>
<a className="header-logo-wrapper" href="/">
<img
className="header-logo-min_icon"
src="images/nav.logo.react.svg"
/>
<img
className="header-logo-icon"
src="images/nav.logo.opened.react.svg"
/>
</a>
</div>
) : (
<></>
)}
<div>{enableAdmMess && !wizardToken && <RecoverAccess t={t} />}</div>
</Box>
</Header>
<div>
{enableAdmMess && !wizardToken && <RecoverAccess t={t} />}
</div>
</Box>
</Header>
)}
</LayoutContextConsumer>
);
};