Question: Can we share the same <header> element across pages?

[hanvari]

Is there anyway not to repeat the above <header> code in every single page template and define it only once? all the pages in my app share the same header row with the buttons to side-panel and settings, and I may only want to change the <h1> title.

[qathom]

Hello @hanvari,

It is not possible. You need to register your navbar as a component with React, Angular, Vue etc.
If you want to stay standalone, you can add a simple configuration where you store your navbar such as:

utils.js

function buildInnerNavbar(title) {
  return '' +
          '<a class="btn pull-left">Button</a>' +
            '<div class="center">' +
              '<h1 class="title">' + title + '</h1>' +
            '</div>' +
            '<a class="btn pull-right">Button</a>';
}

const navbar = document.createElement('header');
navbar.classList.add('header-bar');
navbar.innerHTML = buildInnerNavbar('Hello World');

document.querySelector('#myPage').firstChild = navbar;

I coded this example directly here on Github, maybe something is not working.