burger menu reappears on resize

DemocracyEarth · Oct 23, 2020 · 6220ff8 · 6220ff8
1 parent ffa5973
commit 6220ff8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/components/Dapp/Dapp.jsx b/src/components/Dapp/Dapp.jsx
@@ -108,12 +108,18 @@ export default class Dapp extends Component {
 
     this.onConnect = this.onConnect.bind(this);
     this.reset = this.reset.bind(this);
+    this.resize = this.resize.bind(this);
   }
 
   async componentDidMount() {
     if (this.web3Modal.cachedProvider) {
       this.onConnect();
     }
+    window.addEventListener('resize', this.resize)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize)
   }
 
   async onConnect() {
@@ -131,6 +137,7 @@ export default class Dapp extends Component {
       connected: true,
       address,
       networkId,
+      mobile: (window.innerWidth < 768)
     });
   }
 
@@ -158,6 +165,14 @@ export default class Dapp extends Component {
     });
   }
 
+  resize() {
+    if (window.innerWidth < 768 && !this.state.mobile) {
+      this.setState({ mobile: true });
+    } else if (window.innerWidth >= 768 && this.state.mobile) {
+      this.setState({ mobile: false });
+    }
+  }
+
   async reset() {
     const { web3 } = this.state;
     if (web3 && web3.currentProvider && web3.currentProvider.close) {
@@ -183,7 +198,11 @@ export default class Dapp extends Component {
                     <Browser address={this.state.address} walletConnect={this.onConnect} walletReset={this.reset} />
                     <Layout address={this.state.address} />
                   </div>
-                  <Layout address={this.state.address} mobileMenu={true} />
+                  {(this.state.mobile) ?
+                    <Layout address={this.state.address} mobileMenu={true} />
+                    :
+                    null
+                  }                  
                 </>
               }
             />

diff --git a/src/styles/Dapp.css b/src/styles/Dapp.css
@@ -5963,6 +5963,7 @@ blockquote {
 .burger-menu.burger-menu-close {
   transition: width 0.15s ease 0.15s;
   width:0px;
+  border: 0px;
 }
 
 .hero-button {