WIP

APP/src/app/layout/header/header.component.html

@@ -0,0 +1,42 @@
+<!-- Start of TPNAV-1 -->
+<header>
+    <kendo-appbar positionMode='sticky' themeColor="inherit" class='k-bg-surface-alt' [style.z-index]="10000">
+        <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-gap-2">
+            <button kendoButton [svgIcon]="menuIcon" fillMode="clear" title="Menu" (click)="onMenuClick()"></button>
+            <a href="#" class="k-d-none k-d-sm-flex logo-link">
+                <img src="assets/rbj-logo.svg" class="k-h-8" alt="RBJ RBJ Identity logo" />
+                <span class="logo-text">RBJ Identity Portal</span>
+            </a>
+            <a href="#" class="k-d-flex k-d-sm-none">
+                <img src="assets/rbj-logo.svg" class="k-h-8" alt="RBJ RBJ Identity compact logo" />
+            </a>
+        </kendo-appbar-section>
+        <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-justify-content-center">
+            <div class="k-d-flex k-d-md-none">
+                <button kendoButton [svgIcon]="searchIcon" fillMode="clear" title="Search"></button>
+            </div>
+            <div class="k-d-none k-d-md-flex search-box-wrapper">
+                <kendo-textbox class="search-box" placeholder="Input value" fillMode="flat">
+                    <ng-template kendoTextBoxPrefixTemplate>
+                        <kendo-svgicon [icon]="searchIcon"></kendo-svgicon>
+                        <kendo-textbox-separator></kendo-textbox-separator>
+                    </ng-template>
+                </kendo-textbox>
+            </div>
+        </kendo-appbar-section>
+        <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
+            <kendo-badge-container>
+                <button kendoButton [svgIcon]="bellIcon" fillMode="clear" title="Notifications"></button>
+                <kendo-badge rounded="medium" position="inside" [align]="badgeAlign" themeColor="error"></kendo-badge>
+            </kendo-badge-container>
+            <span class="k-appbar-separator k-color-border k-d-none k-d-sm-inline"></span>
+            <kendo-dropdownbutton [data]="userMenuItems" fillMode="clear" [svgIcon]="userIcon" [arrowIcon]="true"
+                (itemClick)="onUserMenuClick($event)">
+                <span class="k-d-none k-d-sm-inline">
+                    {{ isAuthenticated ? (getDisplayName() || currentUser?.email || 'User') : 'Sign In' }}
+                </span>
+            </kendo-dropdownbutton>
+        </kendo-appbar-section>
+    </kendo-appbar>
+</header>
+<!-- End of TPNAV-1 -->