cc_nav.min.js

!function(){"use strict";function o(){this.req=new XMLHttpRequest,this.url="nav.html",window.console.info("[cc-nav] a drop in off-canvas menu");var o=window.document.createElement("style");o.innerText=":root{--color-background:#212121;--color-font:#ffffff;--sidebar-width:250px;--icon-padding:15px}body{margin:0;padding:0}.slideout-sidebar{font-family:Arial,Helvetica,sans-serif;z-index:0;position:fixed;top:0;left:calc(-1 * var(--sidebar-width));width:var(--sidebar-width);height:100%;background-color:var(--color-background);transition:.3s ease-in-out;overflow:auto;padding:0;margin:0}.slideout-sidebar a{color:var(--color-font);outline:0;text-decoration:none;font-size:.8rem}.slideout-sidebar ul{list-style:none;margin:0;padding:20px}.slideout-sidebar ul li{cursor:pointer;padding:18px 0;border-bottom:1px solid rgba(244,244,244,.4)}.slideout-sidebar ul li:last-child{border-bottom:0}#menu-toggle{display:none}.menu-icon{position:absolute;top:0;left:0;font-size:30px;z-index:20000;transition:.3s ease-in-out;padding:var(--icon-padding);cursor:pointer;color:var(--color-background);background-color:rgba(33,33,33,0);display:block;user-select:none}.menu-icon:hover{background-color:rgba(33,33,33,1);color:var(--color-font)}#menu-toggle:checked~.slideout-sidebar{left:0}#menu-toggle:checked+.menu-icon{left:var(--sidebar-width);background-color:rgba(33,33,33,1);color:var(--color-font)}",window.document.head.appendChild(o);var e=this.htmlToElement('<input type="checkbox" id="menu-toggle" />'),n=this.htmlToElement('<label for="menu-toggle" class="menu-icon">&#9776;</label>');window.document.body.prepend(n),window.document.body.prepend(e);var r=window.document.createElement("nav");r.id="storage",r.className="slideout-sidebar",window.document.body.append(r),this.loadHTML(this.url,r)}o.main=function(){new o},o.prototype={htmlToElement:function(o){var e=window.document.createElement("div");return o=o.trim(),e.innerHTML=o,e.firstChild},loadHTML:function(o,e){var n=this;this.req.open("GET",o),this.req.onload=function(){var o=n.getBody(n.req.response);""==o&&(o=n.req.response),n.processHTML(o,e)},this.req.onerror=function(o){window.console.error("[JS] error: "+o)},this.req.send()},getBody:function(o){var e=o.toLowerCase(),n=e.indexOf("<body");if(-1==n)return"";if(-1==(n=e.indexOf(">",n)))return"";var r=e.lastIndexOf("</body>");return-1==r&&(r=e.lastIndexOf("</html>")),-1==r&&(r=o.length),o.slice(n+1,r)},processHTML:function(o,e){e.innerHTML=o}},o.main()}();