From 933f3d1b03ef44ca769b00d875297dfb1770c271 Mon Sep 17 00:00:00 2001
From: Austin Blanchard <austinpdx@gmail.com>
Date: Mon, 27 Jul 2020 12:52:50 -0700
Subject: [PATCH 1/5] initial panel-menu, site-hamburger

---
 package-lock.json                             | 142 +++++++++++++-----
 src/components/PanelMenu/PanelMenu.stories.js |  44 ++++++
 src/components/PanelMenu/PanelMenu.vue        |  77 ++++++++++
 .../SiteHamburger/SiteHamburger.stories.js    |  12 ++
 .../SiteHamburger/SiteHamburger.vue           |  79 ++++++++++
 src/components/global/WpMenu.vue              |  61 ++++++++
 src/components/global/WpMenuItem.vue          |  95 ++++++++++++
 7 files changed, 470 insertions(+), 40 deletions(-)
 create mode 100644 src/components/PanelMenu/PanelMenu.stories.js
 create mode 100644 src/components/PanelMenu/PanelMenu.vue
 create mode 100644 src/components/SiteHamburger/SiteHamburger.stories.js
 create mode 100644 src/components/SiteHamburger/SiteHamburger.vue
 create mode 100644 src/components/global/WpMenu.vue
 create mode 100644 src/components/global/WpMenuItem.vue

diff --git a/package-lock.json b/package-lock.json
index 4454dc0..47ff557 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2227,8 +2227,7 @@
     "@types/node": {
       "version": "14.0.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
-      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA==",
-      "dev": true
+      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -3538,7 +3537,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -4735,8 +4733,7 @@
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "boxen": {
       "version": "4.2.0",
@@ -5291,7 +5288,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -5328,6 +5324,38 @@
       "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
       "dev": true
     },
+    "cheerio": {
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
+      "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.1",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "entities": "^1.1.1"
+          }
+        },
+        "parse5": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+          "requires": {
+            "@types/node": "*"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
@@ -5865,7 +5893,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -5873,8 +5900,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.3",
@@ -6450,7 +6476,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
       "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
-      "dev": true,
       "requires": {
         "boolbase": "~1.0.0",
         "css-what": "2.1",
@@ -6485,8 +6510,7 @@
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
-      "dev": true
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
     },
     "cssesc": {
       "version": "3.0.0",
@@ -7166,7 +7190,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
       "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-      "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
         "entities": "^2.0.0"
@@ -7175,14 +7198,12 @@
         "domelementtype": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
-          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
-          "dev": true
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
         },
         "entities": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
-          "dev": true
+          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
         }
       }
     },
@@ -7201,8 +7222,7 @@
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
     },
     "domexception": {
       "version": "1.0.1",
@@ -7217,7 +7237,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
       "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
-      "dev": true,
       "requires": {
         "domelementtype": "1"
       }
@@ -7226,7 +7245,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
       "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
-      "dev": true,
       "requires": {
         "dom-serializer": "0",
         "domelementtype": "1"
@@ -7574,8 +7592,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.14.2",
@@ -9192,8 +9209,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -9591,7 +9607,6 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
       "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
-      "dev": true,
       "requires": {
         "domelementtype": "^1.3.1",
         "domhandler": "^2.3.0",
@@ -9605,7 +9620,6 @@
           "version": "3.6.0",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
           "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
           "requires": {
             "inherits": "^2.0.3",
             "string_decoder": "^1.1.1",
@@ -9855,8 +9869,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.5",
@@ -12911,7 +12924,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
       "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dev": true,
       "requires": {
         "boolbase": "~1.0.0"
       }
@@ -13728,7 +13740,6 @@
       "version": "7.0.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
       "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-      "dev": true,
       "requires": {
         "chalk": "^2.4.2",
         "source-map": "^0.6.1",
@@ -13738,14 +13749,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
           "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -15701,8 +15710,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -15778,6 +15786,58 @@
         }
       }
     },
+    "sanitize-html": {
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.1.tgz",
+      "integrity": "sha512-C+N7E+7ikYaLHdb9lEkQaFOgmj+9ddZ311Ixs/QsBsoLD411/vdLweiFyGqrswUVgLqagOS5NCDxcEPH7trObQ==",
+      "requires": {
+        "htmlparser2": "^4.1.0",
+        "lodash": "^4.17.15",
+        "postcss": "^7.0.27",
+        "srcset": "^2.0.1"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+        },
+        "domhandler": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
+          "integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.1.0.tgz",
+          "integrity": "sha512-CD9M0Dm1iaHfQ1R/TI+z3/JWp/pgub0j4jIQKH89ARR4ATAV2nbaOQS5XxU9maJP5jHaPdDDQSEHuE2UmpUTKg==",
+          "requires": {
+            "dom-serializer": "^0.2.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0"
+          }
+        },
+        "entities": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+        },
+        "htmlparser2": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
+          "integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "domutils": "^2.0.0",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
     "sass-graph": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
@@ -16618,6 +16678,11 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "srcset": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/srcset/-/srcset-2.0.1.tgz",
+      "integrity": "sha512-00kZI87TdRKwt+P8jj8UZxbfp7mK2ufxcIMWvhAOZNJTRROimpHeruWrGvCZneiuVDLqdyHefVp748ECTnyUBQ=="
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -16851,7 +16916,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -16957,7 +17021,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -17903,8 +17966,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.0",
diff --git a/src/components/PanelMenu/PanelMenu.stories.js b/src/components/PanelMenu/PanelMenu.stories.js
new file mode 100644
index 0000000..cdcdd84
--- /dev/null
+++ b/src/components/PanelMenu/PanelMenu.stories.js
@@ -0,0 +1,44 @@
+import PanelMenu from "./PanelMenu"
+import API from "@/static/db.json"
+
+let menuItem = {
+    ...API.menuItems.nodes[0]
+}
+
+const mainMenu = [
+    {
+        ...menuItem,
+        label: "Directors"
+    },
+    {
+        ...menuItem,
+        label: "Work"
+    },
+    {
+        ...menuItem,
+        label: "About"
+    },
+    {
+        ...menuItem,
+        label: "News"
+    },
+    {
+        ...menuItem,
+        label: "Contact"
+    }
+]
+
+export default {
+    title: "@austinblanchard / PanelMenu"
+}
+
+export const PanelMenuDefault = () => ({
+    components: { PanelMenu },
+    data() {
+        return {
+            api: API,
+            mainMenu: mainMenu
+        }
+    },
+    template: `<panel-menu :mainMenu="mainMenu" />`
+})
diff --git a/src/components/PanelMenu/PanelMenu.vue b/src/components/PanelMenu/PanelMenu.vue
new file mode 100644
index 0000000..faae462
--- /dev/null
+++ b/src/components/PanelMenu/PanelMenu.vue
@@ -0,0 +1,77 @@
+<template>
+    <div :class="{ open: menuOpen }" class="panel-menu" @click="toggleMenu">
+        <!-- Site Hamburger -->
+        <site-hamburger />
+
+        <!-- Main Menu -->
+        <wp-menu :items="mainMenu" class="menu main-menu" />
+    </div>
+</template>
+
+<script>
+// Components
+import SiteHamburger from "@/components/SiteHamburger/SiteHamburger"
+import WpMenu from "@/components/global/WpMenu"
+
+export default {
+    components: {
+        SiteHamburger,
+        WpMenu
+    },
+    props: {
+        mainMenu: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            menuOpen: false
+        }
+    },
+    methods: {
+        toggleMenu() {
+            this.menuOpen = !this.menuOpen
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.panel-menu {
+    .menu {
+        position: relative;
+        z-index: 20;
+
+        display: inline-block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        transform: translateY(-100%);
+        transition: transform 0.4s $authenticMotion;
+    }
+    .mock-nuxt-link {
+        font-family: var(--font-secondary);
+        font-size: 100px;
+        color: var(--color-black);
+        text-transform: uppercase;
+    }
+
+    // Opened state
+    &.open .menu {
+        transform: none;
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        .mock-nuxt-link:hover {
+            color: transparent;
+            -webkit-text-stroke: 1px var(--color-black);
+        }
+    }
+    // Breakpoints
+    // @media #{$lt-phone} {
+    // }
+}
+</style>
diff --git a/src/components/SiteHamburger/SiteHamburger.stories.js b/src/components/SiteHamburger/SiteHamburger.stories.js
new file mode 100644
index 0000000..6d289d8
--- /dev/null
+++ b/src/components/SiteHamburger/SiteHamburger.stories.js
@@ -0,0 +1,12 @@
+import SiteHamburger from "./SiteHamburger"
+import API from "@/static/db.json"
+
+export const SiteHamburgerDefault = () => ({
+    components: { SiteHamburger },
+    data() {
+        return {
+            api: API
+        }
+    },
+    template: `<site-hamburger />`
+})
diff --git a/src/components/SiteHamburger/SiteHamburger.vue b/src/components/SiteHamburger/SiteHamburger.vue
new file mode 100644
index 0000000..dd9a90b
--- /dev/null
+++ b/src/components/SiteHamburger/SiteHamburger.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="site-hamburger">
+        <div class="outer-circle"></div>
+        <div class="inner-circle"></div>
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+:root {
+    --color-rpsg: #fdc760;
+}
+.site-hamburger {
+    position: fixed;
+    right: 50px;
+    top: 50px;
+    // cursor: pointer;
+
+    height: 26px;
+    width: 26px;
+
+    .outer-circle {
+        height: 100%;
+        width: 100%;
+        // height: 26px;
+        // width: 26px;
+        border-radius: 50%;
+        background-color: var(--color-rpsg);
+        // cursor: pointer;
+
+        transition: transform 0.4s $authenticMotion;
+    }
+
+    .inner-circle {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 20000;
+        transform: translate(-50%, -50%);
+
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        cursor: pointer;
+
+        transition: height 0.4s $authenticMotion, width 0.4s $authenticMotion;
+    }
+
+    // Opened state
+    .open & .outer-circle {
+        transform: scale(200);
+        // cursor: auto;
+    }
+    .open & .inner-circle {
+        height: 15px;
+        width: 15px;
+        background-color: var(--color-black);
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        &:hover .inner-circle {
+            height: 15px;
+            width: 15px;
+            background-color: var(--color-black);
+        }
+        .open & .inner-circle:hover {
+            height: 17px;
+            width: 17px;
+        }
+    }
+    // Breakpoints
+    // @media #{$lt-phone} {
+    // }
+}
+</style>
diff --git a/src/components/global/WpMenu.vue b/src/components/global/WpMenu.vue
new file mode 100644
index 0000000..f79d9de
--- /dev/null
+++ b/src/components/global/WpMenu.vue
@@ -0,0 +1,61 @@
+<template>
+    <ul :class="classes">
+        <slot name="before" />
+
+        <wp-menu-item
+            v-for="(item, i) in menuItems"
+            :key="i"
+            class="menu-item"
+            :item="item"
+        />
+
+        <slot name="after" />
+    </ul>
+</template>
+
+<script>
+// Components
+import WpMenuItem from "@/components/global/WpMenuItem"
+// Helpers
+import _kebabCase from "lodash/kebabCase"
+import _get from "lodash/get"
+
+export default {
+    components: {
+        WpMenuItem
+    },
+    props: {
+        location: {
+            type: String,
+            default: ""
+        },
+        items: {
+            type: Array,
+            default: () => []
+        }
+    },
+    computed: {
+        classes() {
+            return ["wp-menu", `location-${_kebabCase(this.location)}`]
+        },
+        menuItems() {
+            let items = this.items
+            // Use menu from store if name provided
+            if (this.location) {
+                items = _get(
+                    this,
+                    `$store.state.menus.locations.${this.location}`,
+                    []
+                )
+            }
+            return items
+        }
+    },
+    methods: {
+        menuInteracted(event) {
+            this.$emit("menu-interacted", event)
+            this.$store.commit("SET_MENU", false)
+        }
+    }
+}
+</script>
diff --git a/src/components/global/WpMenuItem.vue b/src/components/global/WpMenuItem.vue
new file mode 100644
index 0000000..5fc122e
--- /dev/null
+++ b/src/components/global/WpMenuItem.vue
@@ -0,0 +1,95 @@
+<template>
+    <li :class="classes">
+        <a
+            v-if="!isRelative || isMailTo"
+            target="_blank"
+            :href="item.url"
+            @click="menuInteracted"
+            v-html="item.label"
+        />
+
+        <nuxt-link
+            v-if="isRelative && !isHash"
+            :to="relativeUrl"
+            @click.native="menuInteracted"
+            v-html="item.label"
+        />
+
+        <span v-if="isHash" v-html="item.label" />
+
+        <!-- TODO Make prop for sub-menus to be drop downs -->
+        <ul v-if="hasSubMenu" class="sub-menu">
+            <wp-menu-item
+                v-for="(subItem, i) in getChildren"
+                :key="`sub-${i}`"
+                class="menu-item sub-menu-item"
+                :item="subItem"
+                @menu-interacted="menuInteracted()"
+            />
+        </ul>
+    </li>
+</template>
+
+<script>
+// Components
+import NuxtLink from "@/components/global/NuxtLink"
+// Helpers
+import _get from "lodash/get"
+
+export default {
+    components: {
+        NuxtLink
+    },
+    props: {
+        item: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    computed: {
+        classes() {
+            return [
+                "wp-menu-item menu-item",
+                {
+                    "is-realtive": this.isRelative
+                },
+                { "has-sub-menu": this.hasSubMenu },
+                { "is-disabled": this.isHash }
+            ]
+        },
+        getChildren() {
+            return _get(this, "item.childItems.nodes", [])
+        },
+        hasSubMenu() {
+            return this.getChildren.length
+        },
+        isRelative() {
+            return this.item.target !== "_blank" && !this.isMailTo
+        },
+        isHash() {
+            return this.item.label == "#"
+        },
+        isMailTo() {
+            return this.item.url.includes("mailto:")
+        },
+        relativeUrl() {
+            let url = this.item.url
+            // Replace all these things
+            const replaceThese = [
+                _get(this, "$store.state.siteMeta.frontendUrl", ""),
+                _get(this, "$store.state.siteMeta.backendUrl", ""),
+                _get(this, "$store.state.siteMeta.host", "")
+            ]
+            replaceThese.forEach(element => {
+                url = url.replace(element, "")
+            });
+            return url
+        }
+    },
+    methods: {
+        menuInteracted(event) {
+            this.$emit("menu-interacted", event)
+        }
+    }
+}
+</script>

From 9421562bf0d259cd5daf4322d9dcc18ec264efc9 Mon Sep 17 00:00:00 2001
From: Austin Blanchard <austinpdx@gmail.com>
Date: Tue, 28 Jul 2020 00:31:35 -0700
Subject: [PATCH 2/5] add open state

---
 src/components/PanelMenu/PanelMenu.vue        | 38 +++++++++++++------
 .../SiteHamburger/SiteHamburger.vue           | 29 ++++----------
 src/styles/variables.scss                     |  2 +
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/PanelMenu/PanelMenu.vue b/src/components/PanelMenu/PanelMenu.vue
index faae462..ab46e06 100644
--- a/src/components/PanelMenu/PanelMenu.vue
+++ b/src/components/PanelMenu/PanelMenu.vue
@@ -1,7 +1,7 @@
 <template>
-    <div :class="{ open: menuOpen }" class="panel-menu" @click="toggleMenu">
+    <div :class="{ open: menuOpen }" class="panel-menu">
         <!-- Site Hamburger -->
-        <site-hamburger />
+        <site-hamburger @click.native="toggleMenu" />
 
         <!-- Main Menu -->
         <wp-menu :items="mainMenu" class="menu main-menu" />
@@ -40,20 +40,20 @@ export default {
 <style lang="scss">
 .panel-menu {
     .menu {
-        position: relative;
-        z-index: 20;
-
         display: inline-block;
-        list-style: none;
         margin: 0;
-        padding: 0;
-
+        padding: 10px 0 0 50px;
+        list-style: none;
         transform: translateY(-100%);
         transition: transform 0.4s $authenticMotion;
     }
     .mock-nuxt-link {
+        position: relative;
+        z-index: 20;
+
         font-family: var(--font-secondary);
-        font-size: 100px;
+        font-size: 125px;
+        font-weight: 700;
         color: var(--color-black);
         text-transform: uppercase;
     }
@@ -71,7 +71,23 @@ export default {
         }
     }
     // Breakpoints
-    // @media #{$lt-phone} {
-    // }
+    @media #{$gt-wide} {
+        .mock-nuxt-link {
+            font-size: 180px;
+        }
+    }
+    @media #{$lt-desktop} {
+        .mock-nuxt-link {
+            font-size: 84px;
+        }
+    }
+    @media #{$lt-sm-tablet} {
+        .menu {
+            padding: 10px 0 0 20px;
+        }
+        .mock-nuxt-link {
+            font-size: 34px;
+        }
+    }
 }
 </style>
diff --git a/src/components/SiteHamburger/SiteHamburger.vue b/src/components/SiteHamburger/SiteHamburger.vue
index dd9a90b..7ed62b4 100644
--- a/src/components/SiteHamburger/SiteHamburger.vue
+++ b/src/components/SiteHamburger/SiteHamburger.vue
@@ -5,32 +5,25 @@
     </div>
 </template>
 
-<script>
-export default {}
-</script>
-
 <style lang="scss">
 :root {
     --color-rpsg: #fdc760;
 }
 .site-hamburger {
     position: fixed;
-    right: 50px;
-    top: 50px;
-    // cursor: pointer;
+    right: 30px;
+    top: 30px;
 
     height: 26px;
     width: 26px;
+    padding: 20px;
+    cursor: pointer;
 
     .outer-circle {
         height: 100%;
         width: 100%;
-        // height: 26px;
-        // width: 26px;
         border-radius: 50%;
         background-color: var(--color-rpsg);
-        // cursor: pointer;
-
         transition: transform 0.4s $authenticMotion;
     }
 
@@ -38,21 +31,17 @@ export default {}
         position: absolute;
         top: 50%;
         left: 50%;
-        z-index: 20000;
         transform: translate(-50%, -50%);
 
         height: 20px;
         width: 20px;
         border-radius: 50%;
-        cursor: pointer;
-
         transition: height 0.4s $authenticMotion, width 0.4s $authenticMotion;
     }
 
     // Opened state
     .open & .outer-circle {
         transform: scale(200);
-        // cursor: auto;
     }
     .open & .inner-circle {
         height: 15px;
@@ -67,13 +56,11 @@ export default {}
             width: 15px;
             background-color: var(--color-black);
         }
-        .open & .inner-circle:hover {
-            height: 17px;
-            width: 17px;
-        }
     }
     // Breakpoints
-    // @media #{$lt-phone} {
-    // }
+    @media #{$lt-phone} {
+        right: 0;
+        top: 0;
+    }
 }
 </style>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 6f7fd98..34e7f06 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -8,7 +8,9 @@ $authenticMotion: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Breakpoints
 $gt-wide: "only screen and (min-width: 1800px)";
+$lt-desktop: "only screen and (max-width: 1250px)";
 $lt-tablet: "only screen and (max-width: 1024px)";
+$lt-sm-tablet: "only screen and (max-width: 900px)";
 $lt-phone: "only screen and (max-width: 750px)";
 $lt-phone-landscape: "only screen and (max-width: 750px) and (orientation: landscape)";
 $has-hover: "(hover: hover)";

From fb6d58e50de3539e2c8880477d288462768db62d Mon Sep 17 00:00:00 2001
From: Austin Blanchard <austinpdx@gmail.com>
Date: Tue, 28 Jul 2020 01:04:54 -0700
Subject: [PATCH 3/5] responsive text

---
 src/components/PanelMenu/PanelMenu.vue        | 49 +++++---------
 .../SiteHamburger/SiteHamburger.stories.js    | 12 ----
 .../SiteHamburger/SiteHamburger.vue           | 66 -------------------
 3 files changed, 17 insertions(+), 110 deletions(-)
 delete mode 100644 src/components/SiteHamburger/SiteHamburger.stories.js
 delete mode 100644 src/components/SiteHamburger/SiteHamburger.vue

diff --git a/src/components/PanelMenu/PanelMenu.vue b/src/components/PanelMenu/PanelMenu.vue
index ab46e06..bec676a 100644
--- a/src/components/PanelMenu/PanelMenu.vue
+++ b/src/components/PanelMenu/PanelMenu.vue
@@ -1,8 +1,5 @@
 <template>
-    <div :class="{ open: menuOpen }" class="panel-menu">
-        <!-- Site Hamburger -->
-        <site-hamburger @click.native="toggleMenu" />
-
+    <div class="panel-menu open">
         <!-- Main Menu -->
         <wp-menu :items="mainMenu" class="menu main-menu" />
     </div>
@@ -10,12 +7,10 @@
 
 <script>
 // Components
-import SiteHamburger from "@/components/SiteHamburger/SiteHamburger"
 import WpMenu from "@/components/global/WpMenu"
 
 export default {
     components: {
-        SiteHamburger,
         WpMenu
     },
     props: {
@@ -23,43 +18,41 @@ export default {
             type: Array,
             default: () => []
         }
-    },
-    data() {
-        return {
-            menuOpen: false
-        }
-    },
-    methods: {
-        toggleMenu() {
-            this.menuOpen = !this.menuOpen
-        }
     }
 }
 </script>
 
 <style lang="scss">
+:root {
+    --color-rpsg: #fdc760;
+}
 .panel-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transform: translateY(-100%);
+    transition: transform 0.4s $authenticMotion;
+    // TODO remove, temporary style for visibility
+    background-color: var(--color-rpsg);
+
     .menu {
         display: inline-block;
         margin: 0;
         padding: 10px 0 0 50px;
         list-style: none;
-        transform: translateY(-100%);
-        transition: transform 0.4s $authenticMotion;
     }
     .mock-nuxt-link {
-        position: relative;
-        z-index: 20;
-
         font-family: var(--font-secondary);
-        font-size: 125px;
+        font-size: 7.7vw;
         font-weight: 700;
         color: var(--color-black);
         text-transform: uppercase;
     }
 
     // Opened state
-    &.open .menu {
+    &.open {
         transform: none;
     }
 
@@ -76,18 +69,10 @@ export default {
             font-size: 180px;
         }
     }
-    @media #{$lt-desktop} {
-        .mock-nuxt-link {
-            font-size: 84px;
-        }
-    }
-    @media #{$lt-sm-tablet} {
+    @media #{$lt-phone} {
         .menu {
             padding: 10px 0 0 20px;
         }
-        .mock-nuxt-link {
-            font-size: 34px;
-        }
     }
 }
 </style>
diff --git a/src/components/SiteHamburger/SiteHamburger.stories.js b/src/components/SiteHamburger/SiteHamburger.stories.js
deleted file mode 100644
index 6d289d8..0000000
--- a/src/components/SiteHamburger/SiteHamburger.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import SiteHamburger from "./SiteHamburger"
-import API from "@/static/db.json"
-
-export const SiteHamburgerDefault = () => ({
-    components: { SiteHamburger },
-    data() {
-        return {
-            api: API
-        }
-    },
-    template: `<site-hamburger />`
-})
diff --git a/src/components/SiteHamburger/SiteHamburger.vue b/src/components/SiteHamburger/SiteHamburger.vue
deleted file mode 100644
index 7ed62b4..0000000
--- a/src/components/SiteHamburger/SiteHamburger.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <div class="site-hamburger">
-        <div class="outer-circle"></div>
-        <div class="inner-circle"></div>
-    </div>
-</template>
-
-<style lang="scss">
-:root {
-    --color-rpsg: #fdc760;
-}
-.site-hamburger {
-    position: fixed;
-    right: 30px;
-    top: 30px;
-
-    height: 26px;
-    width: 26px;
-    padding: 20px;
-    cursor: pointer;
-
-    .outer-circle {
-        height: 100%;
-        width: 100%;
-        border-radius: 50%;
-        background-color: var(--color-rpsg);
-        transition: transform 0.4s $authenticMotion;
-    }
-
-    .inner-circle {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        height: 20px;
-        width: 20px;
-        border-radius: 50%;
-        transition: height 0.4s $authenticMotion, width 0.4s $authenticMotion;
-    }
-
-    // Opened state
-    .open & .outer-circle {
-        transform: scale(200);
-    }
-    .open & .inner-circle {
-        height: 15px;
-        width: 15px;
-        background-color: var(--color-black);
-    }
-
-    // Hovers
-    @media #{$has-hover} {
-        &:hover .inner-circle {
-            height: 15px;
-            width: 15px;
-            background-color: var(--color-black);
-        }
-    }
-    // Breakpoints
-    @media #{$lt-phone} {
-        right: 0;
-        top: 0;
-    }
-}
-</style>

From 680d70fd2dbdadda32c571012732b40b82d0bd2b Mon Sep 17 00:00:00 2001
From: Austin Blanchard <austinpdx@gmail.com>
Date: Tue, 28 Jul 2020 01:07:00 -0700
Subject: [PATCH 4/5] remove unused breakpoints

---
 src/styles/variables.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 34e7f06..6f7fd98 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -8,9 +8,7 @@ $authenticMotion: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Breakpoints
 $gt-wide: "only screen and (min-width: 1800px)";
-$lt-desktop: "only screen and (max-width: 1250px)";
 $lt-tablet: "only screen and (max-width: 1024px)";
-$lt-sm-tablet: "only screen and (max-width: 900px)";
 $lt-phone: "only screen and (max-width: 750px)";
 $lt-phone-landscape: "only screen and (max-width: 750px) and (orientation: landscape)";
 $has-hover: "(hover: hover)";

From b86a4520687ddc523afbd8e75410fce83a154ae1 Mon Sep 17 00:00:00 2001
From: Austin Blanchard <austinpdx@gmail.com>
Date: Tue, 28 Jul 2020 10:26:33 -0700
Subject: [PATCH 5/5] added scrolling

---
 src/components/PanelMenu/PanelMenu.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/PanelMenu/PanelMenu.vue b/src/components/PanelMenu/PanelMenu.vue
index bec676a..282efb0 100644
--- a/src/components/PanelMenu/PanelMenu.vue
+++ b/src/components/PanelMenu/PanelMenu.vue
@@ -32,6 +32,7 @@ export default {
     left: 0;
     height: 100%;
     width: 100%;
+    overflow-y: auto;
     transform: translateY(-100%);
     transition: transform 0.4s $authenticMotion;
     // TODO remove, temporary style for visibility
@@ -39,8 +40,8 @@ export default {
 
     .menu {
         display: inline-block;
-        margin: 0;
-        padding: 10px 0 0 50px;
+        margin: 30px 0 50px;
+        padding: 0 0 0 50px;
         list-style: none;
     }
     .mock-nuxt-link {