fix: overlay on menu open.

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,29 +9,37 @@ 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;
 `
 
 const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => {
   const toggleMenu = () => onMenu(!menuVisible)
   return (
-    <Container>
+    <Fragment>
       {menuVisible && <HideLayer onClick={toggleMenu} />}
-      <div className='fr relative'>
+      <Container>
         <DatImport />
         <Button.Header
           icon={<Icon name='create-new-dat' style={{ width: '1.2em' }} />}
@@ -48,7 +56,7 @@ const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => {
         {menuVisible && (
           <div
             className='absolute right-0 br1 w5 pa3 bg-neutral'
-            style={{ top: '3rem', zIndex: 6 }}
+            style={{ top: '3rem', right: '0.5rem', zIndex: 6 }}
           >
             <h3 className='f6 f5-l mb2'>Dat Desktop {version}</h3>
             <p className='f6 f5-l mb3'>
@@ -66,8 +74,8 @@ const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => {
             </p>
           </div>
         )}
-      </div>
-    </Container>
+      </Container>
+    </Fragment>
   )
 }