fix: overlay on menu open.

AtuyL · AtuyL · commit 96cf7279e347 · 2018-11-30T14:19:50.000+09:00
diff --git 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>
   )
 }
 
