goNav

HTML

I have chosen to split all pages into a main part and a content part. This means that the main part is almost identical at every page. This allows me to "reuse" components for each page (header, http header, navigation etc).

1. The main part for the "home" page

<!DOCTYPE html>
<html lang="en">

<head>
  {{template "httphead"}}
</head>

<body data-theme="default" data-main="home"> // The data-main value tells which main menu to use
  {{template "icn"}}
  {{template "nav" "home"}} //<-- calling the navigation menu with a parameter
  <main>
    {{template "header" "Home"}}
    <section>
      {{template "cnt_home" .}}{{template "desk" .}}
    </section>
  </main>
  {{template "httpend"}}
</body>

</html>

2. The navigation sub template for the "home" page

Note that the sub menus are "embedded" as "sub sub menus" WITHIN this nav sub template

{{define "nav"}}
<nav>
 <div class="nav_header" onclick="menu()">goLang</div>
  <div id="menu">
    {{template "main"}}
    <!--Select the submenu based on parameter-->
    {{if eq . "home"}}
    {{template "sub_home"}}
    {{else if eq . "howto"}}
    {{template "sub_howto"}}
    {{else if eq . "prefs"}}
    {{template "sub_prefs"}}
    {{end}}
  </div>
</nav>
{{end}}

{{define "main"}}
<div id="main">
  <ul id="mainlist">

    <li id="home" onclick="submenus('home')"><a href="/home">
      <svg class="icn56">
        <use xlink:href="#icn_home"></use>
      </svg><span>{{trans "Home"}}</span></a>
    </li>

    <li id="howto" onclick="submenus('howto')"><a href="/po">
      <svg class="icn56">
        <use xlink:href="#icn_howto"></use>
      </svg><span>{{trans "Guide"}}</span></li></a>
    </li>

    <li id="prefs" onclick="submenus('prefs')"><a href="/prefs">
      <svg class="icn56">
        <use xlink:href="#icn_prefs"></use>
      </svg><span>{{trans "Settings"}}</span></a>
    </li>

  </ul>
</div>
{{end}}

{{define "sub_home"}}
<div id="sub">
    <ul id="sublist">     
        <li id="sub_home"><a href="/home">{{trans "Home"}}</a></li>      
        <li id="sub_gwd"><a href="https://go4webdev.org">Hub go4webdev</a></li>     
    </ul></div>
{{end}}

{{define "sub_howto"}}
<div id="sub">
    <ul id="sublist">
        <li id="sub_html"><a href="/html">{{trans "HTML"}}</a></li>
    </ul>
</div>
{{end}}

{{define "sub_prefs"}}
<div id="sub">
    <ul id="sublist">
        <li id="sub_prefs"><a href="/prefs">{{trans "Personal"}}</a></li>
    </ul>
</div>
{{end}}