commonNav.js

var gDark=false;  // used globally
(function(){var navHTML=
'<ul>'+
'  <li><a href="index.html">main</a></li>'+
'  <li><a href="appendix.html">appendix</a></li>'+
'</ul>'+
'  <svg onclick="toggleDark(\'light\')" class="sun" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">'+
'    <circle cx="12" cy="12" r="5"></circle>'+
'    <line x1="1" y1="12" x2="3" y2="12"></line>'+
'    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>'+
'    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>'+
'    <line x1="12" y1="1" x2="12" y2="3"></line>'+
'    <line x1="12" y1="21" x2="12" y2="23"></line>'+
'    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>'+
'    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>'+
'    <line x1="21" y1="12" x2="23" y2="12"></line>'+
'  </svg>'+
'  <svg onclick="toggleDark(\'dark\')" class="moon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">'+
'    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>'+
'  </svg>';
var navStruct = document.createElement("nav");navStruct.innerHTML = navHTML;
document.addEventListener("readystatechange", function(event) {
  if(event.target.readyState === "complete") {
    var targ=document.getElementsByTagName("body")[0]
    //targ.prepend(navStruct);
    targ.insertBefore(navStruct, targ.firstChild);
  }
});
})();