MediaWiki:Menu.rythm

Links

• MediaWiki:Bootstrap.rythm
• MediaWiki:Form.rythm
• https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
• https://getbootstrap.com/docs/3.3/components/#navbar
• https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click

Rythm template source

@// Rythm template for Bootstrap menu
@// static code
@def static {
 // a menu
 class Menu {
    String homeUrl_en;
    String homeUrl_de;
    String iconUrl;
    Map<String,MenuItem> menuItemMap=new LinkedHashMap<String,MenuItem>();

    public Menu(String homeUrl_en,String homeUrl_de,String iconUrl) {
       this.homeUrl_en=homeUrl_en;
       this.homeUrl_de=homeUrl_de;
       this.iconUrl=iconUrl;
    }

    public void addMenuItems(MenuItem[] menuItems) {
      for (MenuItem menuItem:menuItems) {
        addMenuItem(menuItem);
      }
    }

    public void addMenuItem(MenuItem menuItem) {
      menuItemMap.put(menuItem.id,menuItem);
    }
   
    public MenuItem getMenuItem(String menuItemId) {
      MenuItem menuItem=menuItemMap.get(menuItemId);
      return menuItem;
    }

    public Collection<MenuItem> getMenuItems() {
       return menuItemMap.values();
    }
 }

  class MenuItem {
     String id;
     String text_de;
     String text_en;
     String url_en;
     String url_de;
     public MenuItem(String id,String text_en,String url_en, String text_de,String url_de) {
       this.id=id;
       this.text_en=text_en;
       this.text_de=text_de;
       this.url_en=url_en;
       this.url_de=url_de;
     }
  }
}
@// show the given menu - potentially in german
@def showMenu(boolean de,Menu menu) {
<nav class="navbar">
  <div class="container">  
    <div class="navbar-header">
      <button type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     <a class="navbar-brand"  href='@(de?menu.homeUrl_de:menu.homeUrl_en)'>
       <img src='@(menu.iconUrl)' style="max-height:7vh; margin-top: -2vh;" >
     </a>
    </div>
    <div>
      <ul class="nav navbar-nav">
@for (MenuItem menuItem:menu.getMenuItems()) {
      <li><a href="@(de?menuItem.url_de:menuItem.url_en)">@(de?menuItem.text_de:menuItem.text_en)</a></li>
}
      </ul>
    </div>
  </div>
</nav> 
}