Hide site nav under a button

packages/core/src/plugins/hiddenSiteNav.css

@@ -0,0 +1,13 @@
+/* hiddenSiteNav.css */
+#site-nav-show-button,
+#site-nav-hide-button {
+  margin-right: 10px;
+}
+
+/* Media query settings were copied from core/template/default/stylesheets/main.css */
+@media screen and (max-width: 991.98px) {
+  #site-nav-show-button,
+  #site-nav-hide-button {
+    display: none;
+  }
+}

packages/core/src/plugins/hiddenSiteNav.js

@@ -0,0 +1,42 @@
+// hiddenSiteNav.js
+const cheerio = module.parent.require('cheerio');
+
+module.exports = {
+  processNode: (pluginContext, node) => {
+    if (node.name === 'navbar') {
+      pluginContext.navbarTheme = node.attribs.type;
+    }
+
+    if (node.attribs.hasOwnProperty('#brand')) {
+      cheerio(node)
+        .children('.navbar-brand')
+        .removeAttr('slot')
+        .wrap('<div slot="brand"></div>')
+        .before(
+          '<button href="#" id="site-nav-show-button" '
+          + `class="fa fa-bars btn btn-${pluginContext.navbarTheme}"></button>`
+        )
+        .before(
+          '<button href="#" id="site-nav-hide-button" '
+          + `class="fa fa-chevron-left btn btn-${pluginContext.navbarTheme}" hidden></button>`
+        );
+    }
+
+    if (node.attribs.id === 'site-nav') {
+      cheerio(node).attr('hidden', 'hidden');
+    }
+  },
+  getLinks: (pluginContext, frontMatter, content) => [
+    '<link rel="stylesheet" href="hiddenSiteNav.css">'
+  ],
+  getScripts: (pluginContext, frontMatter, content) => [
+    '<script> $("#site-nav-show-button").click(() => {'
+    + '$("#site-nav").removeAttr("hidden");'
+    + '$("#site-nav-hide-button").removeAttr("hidden");'
+    + '$("#site-nav-show-button").attr("hidden", "hidden");});'
+    + '$("#site-nav-hide-button").click(() => {'
+    + '$("#site-nav").attr("hidden", "hidden");'
+    + '$("#site-nav-hide-button").attr("hidden", "hidden");'
+    + '$("#site-nav-show-button").removeAttr("hidden")}); </script>'
+  ]
+}

packages/core/template/default/site.json

@@ -23,5 +23,13 @@
   ],
   "deploy": {
     "message": "Site Update."
+  },
+  "plugins": [
+    "hiddenSiteNav"
+  ],
+  "pluginsContext": {
+    "hiddenSiteNav": {
+      "navbarTheme": "dark"
+    }
   }
 }