From 4052bef988cde3023847ce56339db9f8321f02f7 Mon Sep 17 00:00:00 2001
From: Thefeli73 <thefeli73@hotmail.com>
Date: Mon, 17 Feb 2020 23:16:53 +0100
Subject: [PATCH] add blocker to make site opaque when in menu

---
 src/css/layout/_nav.scss | 25 ++++++++++++++++++++++---
 src/index.html           |  1 +
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/css/layout/_nav.scss b/src/css/layout/_nav.scss
index 46703ff..9edec51 100644
--- a/src/css/layout/_nav.scss
+++ b/src/css/layout/_nav.scss
@@ -87,12 +87,25 @@
         top: 40px;
         left: 40px;
       }
+
+      > #blocker {
+        top: 80px;
+        width: 100vw;
+        height: 100vh;
+        position: absolute;
+        display: none;
+      }
+
       &.show {
         > ul {
           display: block;
           opacity: 1;
         }
 
+        > #blocker {
+          display: block;
+        }
+
         > span {
           box-shadow: 0 0 0 142vw _palette(menu), 0 0 0 142vh _palette(menu);
         }
@@ -191,9 +204,15 @@
     @include breakpoint('<=medium') {
       height: 60px;
 
-      > #menu > span {
-        top: 30px;
-        left: 30px;
+      > #menu {
+        > span {
+          top: 30px;
+          left: 30px;
+        }
+
+        > #blocker {
+          top: 60px;
+        }
       }
 
       > #wrapper {
diff --git a/src/index.html b/src/index.html
index 8a1d71a..15841a8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -49,6 +49,7 @@
 <nav id="nav">
   <div id="menu">
     <span></span>
+    <div id="blocker"></div>
     <ul>
       <li data-text="Home"><a href="/">Home</a></li>
       <li data-text="Websites"><a href="#">Websites</a></li>