From 96cf7279e347dd9e64cfc1ce418af892ccf7a71e Mon Sep 17 00:00:00 2001
From: AtuyL <atuyl.jp@gmail.com>
Date: Thu, 22 Nov 2018 11:16:40 +0900
Subject: [PATCH] fix: overlay on menu open.

---
 app/components/header.js | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/components/header.js b/app/components/header.js
index 1eb55678..8f45656a 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,29 +9,38 @@ 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;
   background: ${transparentize(0.85, neutral)};
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   left: 0;
   top: 0;
+  z-index: 2;
 `
 
 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' }} />}
@@ -66,8 +75,8 @@ const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => {
             </p>
           </div>
         )}
-      </div>
-    </Container>
+      </Container>
+    </Fragment>
   )
 }