Web: Common: Fixed display menu and header
This commit is contained in:
parent
d5bc77b554
commit
ae5520a56b
@ -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;
|
||||
top: 0px;
|
||||
transition: top 0.3s;
|
||||
z-index:100;
|
||||
@media ${tablet} {
|
||||
top: 0px;
|
||||
transition: top 0.3s;
|
||||
z-index:100;
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
class NavMenu extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -24,6 +24,10 @@ const StyledNav = styled.nav`
|
||||
height: 56px;
|
||||
z-index: 190;
|
||||
|
||||
@media ${tablet} {
|
||||
position:fixed;
|
||||
}
|
||||
|
||||
.profile-menu {
|
||||
right: 12px;
|
||||
top: 66px;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user