import * as m from 'mithril'

export function makeMenuItem(title: string, callback: () => void): m.Vnode<any, any> {
    const top = m('li', { onclick: callback }, title);
    return top
}

export function makeMenu(
    menuTitle: string,
    titles: string[],
    callbackFactory: (title: string) => () => void): m.Vnode<any, any> {
    const children = titles.map(title => makeMenuItem(title, callbackFactory(title)))
    const top = m('li', [menuTitle, m('ul', { class: "main-nav" }, children)]);
    return top
}

export function makeHeaderWithMenu(
    menuTitle: string,
    titles: string[],
    callbackFactory: (title: string) => () => void): m.Vnode<any, any> {
    const menu = makeMenu(
        menuTitle,
        titles,
        callbackFactory)
    const top = m('header', { class: "main-header" }, m('ul', [menu]));
    return top
}

function callbackFactoryAlert(title: string): () => void {
    return () => alert(title)
}

export function makeHeaderWithMenuTest(): m.Vnode<any, any> {
    console.log("makeHeaderWithMenuTest start")
    const res = makeHeaderWithMenu(
        "menuTitle",
        ["Item1", "Item2"],
        callbackFactoryAlert)
    console.log("makeHeaderWithMenuTest done")
    return res
}
import * as m from 'mithril'

export function makeMenuItem(title: string, callback: () => void): m.Vnode<any, any> {
    const top = m('li', { onclick: callback }, title);
    return top
}

export function makeMenu(
    menuTitle: string,
    titles: string[],
    callbackFactory: (title: string) => () => void): m.Vnode<any, any> {
    const children = titles.map(title => makeMenuItem(title, callbackFactory(title)))
    const top = m('ul', { class: "main-nav" }, children);
    return top
}

export function makeHeaderWithMenu(
    menuTitle: string,
    titles: string[],
    callbackFactory: (title: string) => () => void): m.Vnode<any, any> {
    const menu = makeMenu(
        menuTitle,
        titles,
        callbackFactory)
    const top = m('header', { class: "main-header" }, menu);
    return top
}

function callbackFactoryAlert(title: string): () => void {
    return () => alert(title)
}

export function makeHeaderWithMenuTest(): m.Vnode<any, any> {
    console.log("makeHeaderWithMenuTest start")
    const res = makeHeaderWithMenu(
        "menuTitle",
        ["Item1, Item2"],
        callbackFactoryAlert)
    console.log("makeHeaderWithMenuTest done")
    return res
}
--- 
+++ 
@@ -10,7 +10,7 @@
     titles: string[],
     callbackFactory: (title: string) => () => void): m.Vnode<any, any> {
     const children = titles.map(title => makeMenuItem(title, callbackFactory(title)))
-    const top = m('ul', { class: "main-nav" }, children);
+    const top = m('li', [menuTitle, m('ul', { class: "main-nav" }, children)]);
     return top
 }
 
@@ -22,7 +22,7 @@
         menuTitle,
         titles,
         callbackFactory)
-    const top = m('header', { class: "main-header" }, menu);
+    const top = m('header', { class: "main-header" }, m('ul', [menu]));
     return top
 }
 
@@ -34,7 +34,7 @@
     console.log("makeHeaderWithMenuTest start")
     const res = makeHeaderWithMenu(
         "menuTitle",
-        ["Item1, Item2"],
+        ["Item1", "Item2"],
         callbackFactoryAlert)
     console.log("makeHeaderWithMenuTest done")
     return res
Improve menu generation, html is somewhat working
