Migrating the Header Bar from Semantic UI

In this document we'll be using SUI for ng2-semantic-ui and Bootstrap for ng-bootstrap.

The structure of the header bar in Bootstrap is the same as in SUI, and a migration is relatively straightforward.

General structure

For general information on how the header bar is structured, see sec. Application header of the UI Guidelines documentation.

Migration

Once the main structure is in place, including the ALMA logo and application name and version, individual tab headers can be migrated by changing CSS classes.

SUI tab heads follow this structure:

<a routerLink="/xyz" class="item"
   [ngClass]="{'active': router.url.indexOf('/xyz') > -1}">
    <i class="edit icon"></i> 
    Xyz 
</a>

Bootstrap templates follow this structure instead:

<a routerLink="/hys" class="tab-head"
   [ngClass]="{'active': router.url.indexOf('/booking') > -1}">
    <i class="fas fa-edit has-text"></i>
    Xyz
</a>

Notes

• The class of the <a> element is item in SUI, should be tab-head in Bootstrap

• SUI icon names should be mapped to Font Awesome names; for instance, edit icon becomes fas fa-edit has-text. (Class has-text provides padding between the icon ant the following text.)
  See Migrating Icons from Semantic UI.