diff --git a/app/components/header.js b/app/components/header.js index 1eb55678..eca9ce2e 100644 --- a/app/components/header.js +++ b/app/components/header.js @@ -1,6 +1,6 @@ 'use strict' -import React from 'react' +import React, { Fragment } from 'react' import styled from 'styled-components' import { transparentize } from 'polished' import { neutral } from 'dat-colors' @@ -9,19 +9,27 @@ import * as Button from './button' import Icon from './icon' const Container = styled.header` + position: fixed; + z-index: 1; width: 100%; height: 2.5rem; padding: 0.25rem 0.75rem; + display: flex; + align-items: center; + justify-content: flex-end; -webkit-app-region: drag; background-color: var(--color-neutral); color: var(--color-white); + & ~ main { + margin-top: 2.5rem; + } ` const HideLayer = styled.div` - position: absolute; + position: fixed; background: ${transparentize(0.85, neutral)}; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; left: 0; top: 0; ` @@ -29,9 +37,9 @@ const HideLayer = styled.div` const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => { const toggleMenu = () => onMenu(!menuVisible) return ( - + {menuVisible && } -
+ } @@ -48,7 +56,7 @@ const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => { {menuVisible && (

Dat Desktop {version}

@@ -66,8 +74,8 @@ const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => {

)} -
-
+ + ) }