muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed header position

Browse source
This commit is contained in:
Fedor Katurov 2021-11-19 17:23:06 +07:00
parent 153a2bb0fd
commit d5128cb987
2 changed files with 5 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/main/Header/index.tsx
View file

@ -6,13 +6,11 @@ import { Logo } from '~/components/main/Logo';
import { Filler } from '~/components/containers/Filler'; import { Filler } from '~/components/containers/Filler';
import { selectAuthUpdates, selectUser } from '~/redux/auth/selectors'; import { selectAuthUpdates, selectUser } from '~/redux/auth/selectors';
import { Group } from '~/components/containers/Group';
import { DIALOGS } from '~/redux/modal/constants'; import { DIALOGS } from '~/redux/modal/constants';
import { path, pick } from 'ramda'; import { path, pick } from 'ramda';
import { UserButton } from '../UserButton'; import { UserButton } from '../UserButton';
import { Notifications } from '../Notifications'; import { Notifications } from '../Notifications';
import { URLS } from '~/constants/urls'; import { URLS } from '~/constants/urls';
import { createPortal } from 'react-dom';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
@ -22,8 +20,8 @@ import { IState } from '~/redux/store';
import isBefore from 'date-fns/isBefore'; import isBefore from 'date-fns/isBefore';
import { Authorized } from '~/components/containers/Authorized'; import { Authorized } from '~/components/containers/Authorized';
import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import { selectLabUpdates, selectLabUpdatesNodes } from '~/redux/lab/selectors'; import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
import { selectFlow, selectFlowUpdated } from '~/redux/flow/selectors'; import { selectFlowUpdated } from '~/redux/flow/selectors';
import { Button } from '~/components/input/Button'; import { Button } from '~/components/input/Button';
const mapStateToProps = (state: IState) => ({ const mapStateToProps = (state: IState) => ({
@ -82,7 +80,7 @@ const HeaderUnconnected: FC<IProps> = memo(
const hasLabUpdates = useMemo(() => labUpdates.length > 0, [labUpdates]); const hasLabUpdates = useMemo(() => labUpdates.length > 0, [labUpdates]);
const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]); const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
return createPortal( return (
<div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}> <div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}>
<div className={styles.container}> <div className={styles.container}>
<div className={classNames(styles.logo_wrapper, { [styles.logged_in]: is_user })}> <div className={classNames(styles.logo_wrapper, { [styles.logged_in]: is_user })}>
@ -141,8 +139,7 @@ const HeaderUnconnected: FC<IProps> = memo(
</Button> </Button>
)} )}
</div> </div>
</div>, </div>
document.body
); );
} }
); );

3
src/components/main/Header/styles.module.scss
View file

@ -3,9 +3,8 @@
.wrap { .wrap {
height: $header_height; height: $header_height;
z-index: 25; z-index: 25;
position: fixed; position: sticky;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: stretch; align-items: stretch;