Add virtual scrolling card component

Add OpenAPI client(s)

src/app/component/bar/bar.component.html

@@ -1,3 +1,28 @@
-<div class="flex items-center justify-center absolute top-0 w-full hover:bg-emphasis">
-  <p>bar works!</p>
+<div class="w-screen p-4 bg-none">
+  <p-menubar
+    [model]="items"
+    [style]="{ background: 'none'}"
+    styleClass="backdrop-blur-md"
+    class="backdrop-blur-md"
+  >
+    <ng-template #item let-item let-root="root">
+      <a pRipple class="flex items-center p-menubar-item-link">
+        <span>{{ item.label }}</span>
+        <p-badge *ngIf="item.badge" [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge" />
+        <span *ngIf="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+        <i *ngIf="item.items" [ngClass]="['ml-auto pi', root ? 'pi-angle-down' : 'pi-angle-right']"></i>
+      </a>
+    </ng-template>
+    <ng-template #end>
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          pInputText
+          placeholder="Search"
+          class="w-36"
+        />
+        <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
+      </div>
+    </ng-template>
+  </p-menubar>
 </div>