MediaWiki:Mobile.js

/* Any JavaScript here will be loaded for users using the mobile site */

var timer = setInterval(function() {
     if ($('.menu ul:first').length) {
         console.log("mobile menu exists");
         clearInterval(timer);
         $('.menu ul:first').after(
             <ul class="level1">
                    <li>
                    <a href="#"
                    class="mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-expand mw-ui-icon-small">
                    <span>Categories</span>
                    </a>
                    </li>
                    <ul class="level2">
                         <li>
                         <a href="https://wiki.recessim.com/view/Amateur_Radio"
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-download">
                         <span>Amateur Radio</span>
                         </a>
                         </li>
                         <li>
                         <a href="https://wiki.recessim.com/view/Automotive"
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-mapPin">
                         <span>Automotive</span>
                         </a>
                         </li>
                         <li>
                         <a href="https://wiki.recessim.com/view/Entertainment"
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                         <span>Entertainment</span>
                         </a>
                         </li>
                         <li>
                         <a href="https://wiki.recessim.com/view/Home"
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                         <span>Home</span>
                         </a>
                         </li>
                         <li>
                         <a href="https://wiki.recessim.com/view/Industrial"
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                         <span>Industrial</span>
                         </a>
                         </li>
                         <li>
                         <a href="https://wiki.recessim.com/view/Wearable"
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                         <span>Wearable</span>
                         </a>
                         </li>
                    </ul>
               </ul>
               <ul class="level1">
                      <li>
                      <a href="#"
                      class="mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-expand mw-ui-icon-small">
                      <span>Reversing Tools</span>
                      </a>
                      </li>
                      <ul class="level2">
                           <li>
                           <a href="https://wiki.recessim.com/view/Basic_Tools"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-download">
                           <span>Basic</span>
                           </a>
                           </li>
                           <li>
                           <a href="https://wiki.recessim.com/view/Electronic_Tools"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-mapPin">
                           <span>Electronic</span>
                           </a>
                           </li>
                           <li>
                           <a href="https://wiki.recessim.com/view/Mechanical_Tools"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                           <span>Mechanical</span>
                           </a>
                           </li>
                           <li>
                           <a href="https://wiki.recessim.com/view/Software_Tools"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                           <span>Software</span>
                           </a>
                           </li>
                      </ul>
                 </ul>
               <ul>
               <ul class="level1">
                      <li>
                      <a href="#"
                      class="mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-expand mw-ui-icon-small">
                      <span>Resources</span>
                      </a>
                      </li>
                      <ul class="level2">
                           <li>
                           <a href="https://wiki.recessim.com/view/Literature"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-download">
                           <span>Literature</span>
                           </a>
                           </li>
                           <li>
                           <a href="https://wiki.recessim.com/view/Video"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-mapPin">
                           <span>Video</span>
                           </a>
                           </li>
                           <li>
                           <a href="https://wiki.recessim.com/view/Conferences"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                           <span>Conferences</span>
                           </a>
                           </li>
                           <li>
                           <a href="https://wiki.recessim.com/view/People"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                           <span>People</span>
                           </a>
                           </li>
                           <li>
                           <a href="https://wiki.recessim.com/view/Other_Sites"
                           class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20">
                           <span>Other Sites</span>
                           </a>
                           </li>
                      </ul>
                 </ul>
               <ul>
                    <li>
                    <a href="/wiki/Second_Link"
                    class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-star-base20">
                    <span>Second Link</span>
                    </a>
                    </li>
               </ul>'
          );
          $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
          $(".level1").click(function(event){
               $(this).find(".level2").slideToggle(500);
          }); // if level1 is clicked, dropdown level2
     }
}, 100); // check every 100ms