From 8f89ba87f1901f58a5906695ef3ea201cc90c4a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 10 Feb 2022 16:13:36 +0300
Subject: [PATCH 1/3] add scroll to tabmenu

---
 src/app/components/tabmenu/tabmenu.css |  47 +++++++++-
 src/app/components/tabmenu/tabmenu.ts  | 117 +++++++++++++++++++------
 2 files changed, 134 insertions(+), 30 deletions(-)

diff --git a/src/app/components/tabmenu/tabmenu.css b/src/app/components/tabmenu/tabmenu.css
index 67758af675f..9cddd08b2a8 100755
--- a/src/app/components/tabmenu/tabmenu.css
+++ b/src/app/components/tabmenu/tabmenu.css
@@ -1,5 +1,41 @@
-.p-tabmenu {
+
+
+.p-tabmenu-nav-container {
+    position: relative;
+}
+
+.p-tabmenu-scrollable .p-tabmenu-nav-container {
+    overflow: hidden;
+}
+
+.p-tabmenu-nav-content {
     overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+}
+
+.p-tabmenu-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tabmenu-nav-prev {
+    left: 0;
+}
+
+.p-tabmenu-nav-next {
+    right: 0;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
 }
 
 .p-tabmenu-nav {
@@ -7,7 +43,12 @@
     margin: 0;
     padding: 0;
     list-style-type: none;
-    flex-wrap: nowrap;
+    flex: 1 1 auto;
+    /* display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex-wrap: nowrap; */
 }
 
 .p-tabmenu-nav a {
@@ -34,6 +75,6 @@
     z-index: 1;
 }
 
-.p-tabmenu::-webkit-scrollbar {
+.p-tabmenu-nav-content::-webkit-scrollbar {
     display: none;
 }
diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts
index 0e7f0817d76..40159f96090 100755
--- a/src/app/components/tabmenu/tabmenu.ts
+++ b/src/app/components/tabmenu/tabmenu.ts
@@ -10,33 +10,43 @@ import {TooltipModule} from 'primeng/tooltip';
 @Component({
     selector: 'p-tabMenu',
     template: `
-        <div [ngClass]="'p-tabmenu p-component'" [ngStyle]="style" [class]="styleClass">
-            <ul #navbar class="p-tabmenu-nav p-reset" role="tablist">
-                <li *ngFor="let item of model; let i = index" role="tab" [ngStyle]="item.style" [class]="item.styleClass" [attr.aria-selected]="isActive(item)" [attr.aria-expanded]="isActive(item)"
-                    [ngClass]="{'p-tabmenuitem':true,'p-disabled':item.disabled,'p-highlight':isActive(item),'p-hidden': item.visible === false}" pTooltip [tooltipOptions]="item.tooltipOptions">
-                    <a *ngIf="!item.routerLink" [attr.href]="item.url" class="p-menuitem-link" role="presentation" (click)="itemClick($event,item)" (keydown.enter)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
-                        [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" pRipple>
-                        <ng-container *ngIf="!itemTemplate">
-                            <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
-                            <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
-                            <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
-                        </ng-container>
-                        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
-                    </a>
-                    <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
-                        role="presentation" class="p-menuitem-link" (click)="itemClick($event,item)" (keydown.enter)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
-                        [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
-                        [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
-                        <ng-container *ngIf="!itemTemplate">
-                            <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
-                            <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
-                            <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
-                        </ng-container>
-                        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
-                    </a>
-                </li>
-                <li #inkbar class="p-tabmenu-ink-bar"></li>
-            </ul>
+        <div [ngClass]="{'p-tabmenu p-component': true, 'p-tabmenu-scrollable': scrollable}" [ngStyle]="style" [class]="styleClass">
+            <div class="p-tabmenu-nav-container">
+                <button *ngIf="scrollable && !backwardIsDisabled" #prevBtn class="p-tabmenu-nav-prev p-tabmenu-nav-btn p-link" (click)="navBackward()" type="button" pRipple>
+                    <span class="pi pi-chevron-left"></span>
+                </button>
+                <div #content class="p-tabmenu-nav-content" (scroll)="onScroll($event)">
+                    <ul #navbar class="p-tabmenu-nav p-reset" role="tablist">
+                        <li *ngFor="let item of model; let i = index" role="tab" [ngStyle]="item.style" [class]="item.styleClass" [attr.aria-selected]="isActive(item)" [attr.aria-expanded]="isActive(item)"
+                            [ngClass]="{'p-tabmenuitem':true,'p-disabled':item.disabled,'p-highlight':isActive(item),'p-hidden': item.visible === false}" pTooltip [tooltipOptions]="item.tooltipOptions">
+                            <a *ngIf="!item.routerLink" [attr.href]="item.url" class="p-menuitem-link" role="presentation" (click)="itemClick($event,item)" (keydown.enter)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
+                                [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" pRipple>
+                                <ng-container *ngIf="!itemTemplate">
+                                    <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
+                                    <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
+                                    <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                                </ng-container>
+                                <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
+                            </a>
+                            <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
+                                role="presentation" class="p-menuitem-link" (click)="itemClick($event,item)" (keydown.enter)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
+                                [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
+                                [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
+                                <ng-container *ngIf="!itemTemplate">
+                                    <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
+                                    <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
+                                    <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                                </ng-container>
+                                <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
+                            </a>
+                        </li>
+                        <li #inkbar class="p-tabmenu-ink-bar"></li>
+                    </ul>
+                </div>
+                <button *ngIf="scrollable && !forwardIsDisabled" #nextBtn class="p-tabmenu-nav-next p-tabmenu-nav-btn p-link" (click)="navForward()" type="button" pRipple>
+                    <span class="pi pi-chevron-right"></span>
+                </button>
+            </div>
         </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -52,22 +62,34 @@ export class TabMenu implements AfterContentInit,AfterViewInit,AfterViewChecked
 
     @Input() activeItem: MenuItem;
 
+    @Input() scrollable: boolean;
+
     @Input() popup: boolean;
 
     @Input() style: any;
 
     @Input() styleClass: string;
 
+    @ViewChild('content') content: ElementRef;
+
     @ViewChild('navbar') navbar: ElementRef;
 
     @ViewChild('inkbar') inkbar: ElementRef;
 
+    @ViewChild('prevBtn') prevBtn: ElementRef;
+
+    @ViewChild('nextBtn') nextBtn: ElementRef;
+
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
     itemTemplate: TemplateRef<any>;
 
     tabChanged: boolean;
 
+    backwardIsDisabled: boolean = true;
+
+    forwardIsDisabled: boolean = false;
+
     constructor(private router: Router, private route:ActivatedRoute, private cd: ChangeDetectorRef) { }
 
     ngAfterContentInit() {
@@ -133,6 +155,47 @@ export class TabMenu implements AfterContentInit,AfterViewInit,AfterViewChecked
             this.inkbar.nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';
         }
     }
+
+    getVisibleButtonWidths() {
+        return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0);
+    }
+
+    updateButtonState() {
+        const content = this.content.nativeElement;
+        const { scrollLeft, scrollWidth } = content;
+        const width = DomHandler.getWidth(content);
+
+        this.backwardIsDisabled = scrollLeft === 0;
+        this.forwardIsDisabled = scrollLeft === scrollWidth - width;
+    }
+
+
+    updateScrollBar(index) {
+        let tabHeader = this.navbar.nativeElement.children[index];
+        tabHeader.scrollIntoView({ block: 'nearest' })
+    }
+
+    onScroll(event) {
+        this.scrollable && this.updateButtonState();
+
+        event.preventDefault();
+    }
+
+    navBackward() {
+        const content = this.content.nativeElement;
+        const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+        const pos = content.scrollLeft - width;
+        content.scrollLeft = pos <= 0 ? 0 : pos;
+    }
+
+    navForward() {
+        const content = this.content.nativeElement;
+        const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+        const pos = content.scrollLeft + width;
+        const lastPos = content.scrollWidth - width;
+
+        content.scrollLeft = pos >= lastPos ? lastPos : pos;
+    }
 }
 
 @NgModule({

From 06dd29673d35e0d2d02c95a9a89c83893d6c1626 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 10 Feb 2022 17:12:19 +0300
Subject: [PATCH 2/3] update tabmenu css

---
 .../components/tabmenu/tabmenudemo.html       |  2 +-
 .../components/tabmenu/tabmenudemo.ts         | 80 +++++++++++++++++++
 .../components/themes/arya-blue/theme.css     | 18 +++++
 .../components/themes/arya-green/theme.css    | 18 +++++
 .../components/themes/arya-orange/theme.css   | 18 +++++
 .../components/themes/arya-purple/theme.css   | 18 +++++
 .../themes/bootstrap4-dark-blue/theme.css     | 18 +++++
 .../themes/bootstrap4-dark-purple/theme.css   | 18 +++++
 .../themes/bootstrap4-light-blue/theme.css    | 18 +++++
 .../themes/bootstrap4-light-purple/theme.css  | 18 +++++
 .../components/themes/fluent-light/theme.css  | 18 +++++
 .../themes/lara-dark-blue/theme.css           | 18 +++++
 .../themes/lara-dark-indigo/theme.css         | 18 +++++
 .../themes/lara-dark-purple/theme.css         | 18 +++++
 .../themes/lara-dark-teal/theme.css           | 18 +++++
 .../themes/lara-light-blue/theme.css          | 18 +++++
 .../themes/lara-light-indigo/theme.css        | 18 +++++
 .../themes/lara-light-purple/theme.css        | 18 +++++
 .../themes/lara-light-teal/theme.css          | 18 +++++
 .../components/themes/luna-amber/theme.css    | 18 +++++
 .../components/themes/luna-blue/theme.css     | 18 +++++
 .../components/themes/luna-green/theme.css    | 18 +++++
 .../components/themes/luna-pink/theme.css     | 18 +++++
 .../themes/md-dark-deeppurple/theme.css       | 18 +++++
 .../themes/md-dark-indigo/theme.css           | 18 +++++
 .../themes/md-light-deeppurple/theme.css      | 18 +++++
 .../themes/md-light-indigo/theme.css          | 18 +++++
 .../themes/mdc-dark-deeppurple/theme.css      | 18 +++++
 .../themes/mdc-dark-indigo/theme.css          | 18 +++++
 .../themes/mdc-light-deeppurple/theme.css     | 18 +++++
 .../themes/mdc-light-indigo/theme.css         | 18 +++++
 .../components/themes/nova-accent/theme.css   | 18 +++++
 .../components/themes/nova-alt/theme.css      | 18 +++++
 src/assets/components/themes/nova/theme.css   | 18 +++++
 src/assets/components/themes/rhea/theme.css   | 18 +++++
 .../components/themes/saga-blue/theme.css     | 18 +++++
 .../components/themes/saga-green/theme.css    | 18 +++++
 .../components/themes/saga-orange/theme.css   | 18 +++++
 .../components/themes/saga-purple/theme.css   | 18 +++++
 .../themes/tailwind-light/theme.css           | 18 +++++
 .../components/themes/vela-blue/theme.css     | 18 +++++
 .../components/themes/vela-green/theme.css    | 18 +++++
 .../components/themes/vela-orange/theme.css   | 18 +++++
 .../components/themes/vela-purple/theme.css   | 18 +++++
 44 files changed, 837 insertions(+), 1 deletion(-)

diff --git a/src/app/showcase/components/tabmenu/tabmenudemo.html b/src/app/showcase/components/tabmenu/tabmenudemo.html
index 06a625c0bf1..4daac24d933 100755
--- a/src/app/showcase/components/tabmenu/tabmenudemo.html
+++ b/src/app/showcase/components/tabmenu/tabmenudemo.html
@@ -8,7 +8,7 @@ <h1>TabMenu</h1>
 
 <div class="content-section implementation">
     <div class="card">
-        <p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
+        <p-tabMenu [scrollable]="true" [model]="items" [activeItem]="activeItem"></p-tabMenu>
     </div>
 </div>
 
diff --git a/src/app/showcase/components/tabmenu/tabmenudemo.ts b/src/app/showcase/components/tabmenu/tabmenudemo.ts
index 5dd50d2f5ef..fbe875bc3f2 100755
--- a/src/app/showcase/components/tabmenu/tabmenudemo.ts
+++ b/src/app/showcase/components/tabmenu/tabmenudemo.ts
@@ -16,6 +16,86 @@ export class TabMenuDemo {
             {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
             {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
             {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
             {label: 'Settings', icon: 'pi pi-fw pi-cog'}
         ];
 
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
index da51c5fabec..a7b47fb7b60 100644
--- a/src/assets/components/themes/arya-blue/theme.css
+++ b/src/assets/components/themes/arya-blue/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #64B5F6;
   color: #64B5F6;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1e1e1e;
+  color: #64B5F6;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #93cbf9;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
index 946734e5d47..0499024ab94 100644
--- a/src/assets/components/themes/arya-green/theme.css
+++ b/src/assets/components/themes/arya-green/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #81C784;
   color: #81C784;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1e1e1e;
+  color: #81C784;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #a7d8a9;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
index bf7827f3895..aaae363259b 100644
--- a/src/assets/components/themes/arya-orange/theme.css
+++ b/src/assets/components/themes/arya-orange/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #FFD54F;
   color: #FFD54F;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1e1e1e;
+  color: #FFD54F;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #ffe284;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
index 8082e270d37..cbf6ad4d882 100644
--- a/src/assets/components/themes/arya-purple/theme.css
+++ b/src/assets/components/themes/arya-purple/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #BA68C8;
   color: #BA68C8;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1e1e1e;
+  color: #BA68C8;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #cf95d9;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
index cc44d721566..5c8e965e91b 100644
--- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
   color: rgba(255, 255, 255, 0.6);
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #e3f3fe;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
index bbd407e6993..d117a05071d 100644
--- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
   color: rgba(255, 255, 255, 0.6);
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #f0e6f5;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
index 550fc1c781f..10580030389 100644
--- a/src/assets/components/themes/bootstrap4-light-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
   color: #495057;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #495057;
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
index 883a09d9ce2..56a4abf2c2b 100644
--- a/src/assets/components/themes/bootstrap4-light-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
   color: #495057;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #495057;
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
index c1d8d735df4..be4ed1ac1a9 100644
--- a/src/assets/components/themes/fluent-light/theme.css
+++ b/src/assets/components/themes/fluent-light/theme.css
@@ -4999,6 +4999,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #0078d4;
   color: #323130;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #323130;
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset inset 0 0 0 1px #605e5c;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
index 64a95b90059..835bc1b9d74 100644
--- a/src/assets/components/themes/lara-dark-blue/theme.css
+++ b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #93C5FD;
   color: #93C5FD;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #071426;
+  color: #93C5FD;
+  width: 3rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
index 680f35fcf73..80343432a76 100644
--- a/src/assets/components/themes/lara-dark-indigo/theme.css
+++ b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #A5B4FC;
   color: #A5B4FC;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #071426;
+  color: #A5B4FC;
+  width: 3rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
index 0f86beb108e..2cc7c18d976 100644
--- a/src/assets/components/themes/lara-dark-purple/theme.css
+++ b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #C4B5FD;
   color: #C4B5FD;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #071426;
+  color: #C4B5FD;
+  width: 3rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
index 61dfaa53e94..3a8497e7170 100644
--- a/src/assets/components/themes/lara-dark-teal/theme.css
+++ b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #5EEAD4;
   color: #5EEAD4;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #071426;
+  color: #5EEAD4;
+  width: 3rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
index 10dc1e2b3d2..aa86fdac172 100644
--- a/src/assets/components/themes/lara-light-blue/theme.css
+++ b/src/assets/components/themes/lara-light-blue/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #3B82F6;
   color: #3B82F6;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #3B82F6;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #BFDBFE;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
index e14879d590d..eb22b1ba825 100644
--- a/src/assets/components/themes/lara-light-indigo/theme.css
+++ b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #6366F1;
   color: #6366F1;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #6366F1;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #C7D2FE;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
index 19fbdc0595c..42aebe2d01f 100644
--- a/src/assets/components/themes/lara-light-purple/theme.css
+++ b/src/assets/components/themes/lara-light-purple/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #8B5CF6;
   color: #8B5CF6;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #8B5CF6;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #DDD6FE;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
index e598ec1a2bc..dc3dfb10447 100644
--- a/src/assets/components/themes/lara-light-teal/theme.css
+++ b/src/assets/components/themes/lara-light-teal/theme.css
@@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #14B8A6;
   color: #14B8A6;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #14B8A6;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #99F6E4;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 807b7261faa..2f51d791281 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #FFE082;
   color: #212529;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #FFE082;
+  color: #212529;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index 8da8462a5a3..ea03afc551f 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #81D4FA;
   color: #212529;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #81D4FA;
+  color: #212529;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index bd110d05b42..8224b5febbb 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #C5E1A5;
   color: #212529;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #C5E1A5;
+  color: #212529;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index 83ccb117b52..241f736f73f 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #F48FB1;
   color: #212529;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #F48FB1;
+  color: #212529;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
index c429afab4cf..98dda456d44 100644
--- a/src/assets/components/themes/md-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(255, 255, 255, 0.12);
   color: #CE93D8;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: transparent;
+  color: #CE93D8;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
index 8958646ad51..fe4d9d3f047 100644
--- a/src/assets/components/themes/md-dark-indigo/theme.css
+++ b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(255, 255, 255, 0.12);
   color: #9FA8DA;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: transparent;
+  color: #9FA8DA;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
index e8dcd0c6bea..4fc2e691e0f 100644
--- a/src/assets/components/themes/md-light-deeppurple/theme.css
+++ b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(0, 0, 0, 0.12);
   color: #673AB7;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #673AB7;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
index 2a5ffa044a8..53379c65c00 100644
--- a/src/assets/components/themes/md-light-indigo/theme.css
+++ b/src/assets/components/themes/md-light-indigo/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(0, 0, 0, 0.12);
   color: #3F51B5;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #3F51B5;
+  width: 3rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
index 72afd8628de..e49d64b289b 100644
--- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(255, 255, 255, 0.12);
   color: #CE93D8;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: transparent;
+  color: #CE93D8;
+  width: 2.75rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
index a06d7ef6a57..6bdabe60bca 100644
--- a/src/assets/components/themes/mdc-dark-indigo/theme.css
+++ b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(255, 255, 255, 0.12);
   color: #9FA8DA;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: transparent;
+  color: #9FA8DA;
+  width: 2.75rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
index 918a48813f6..e46315a5026 100644
--- a/src/assets/components/themes/mdc-light-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(0, 0, 0, 0.12);
   color: #673AB7;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #673AB7;
+  width: 2.75rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css
index 46063058786..20262877203 100644
--- a/src/assets/components/themes/mdc-light-indigo/theme.css
+++ b/src/assets/components/themes/mdc-light-indigo/theme.css
@@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: rgba(0, 0, 0, 0.12);
   color: #3F51B5;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #3F51B5;
+  width: 2.75rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
 
 .p-tieredmenu {
   padding: 0.5rem 0;
diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css
index 10a38a90377..d2dd7cf3b62 100644
--- a/src/assets/components/themes/nova-accent/theme.css
+++ b/src/assets/components/themes/nova-accent/theme.css
@@ -4999,6 +4999,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #007ad9;
   color: #ffffff;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #007ad9;
+  color: #ffffff;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #8dcdff;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css
index 36a57c4a97d..8f2393876ea 100644
--- a/src/assets/components/themes/nova-alt/theme.css
+++ b/src/assets/components/themes/nova-alt/theme.css
@@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #007ad9;
   color: #ffffff;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #007ad9;
+  color: #ffffff;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #8dcdff;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css
index f460744f6c1..151e2b5f4cf 100644
--- a/src/assets/components/themes/nova/theme.css
+++ b/src/assets/components/themes/nova/theme.css
@@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #007ad9;
   color: #ffffff;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #007ad9;
+  color: #ffffff;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #8dcdff;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css
index 9d4f0094179..32815cf26ad 100644
--- a/src/assets/components/themes/rhea/theme.css
+++ b/src/assets/components/themes/rhea/theme.css
@@ -4999,6 +4999,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #dadada;
   color: #385048;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #AFD3C8;
+  color: #385048;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #e4e9ec;
+}
 
 .p-tieredmenu {
   padding: 0;
diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css
index d3b35c72f51..68476a1f247 100644
--- a/src/assets/components/themes/saga-blue/theme.css
+++ b/src/assets/components/themes/saga-blue/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #2196F3;
   color: #2196F3;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #2196F3;
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #a6d5fa;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css
index c69b820e191..95426c1fb7b 100644
--- a/src/assets/components/themes/saga-green/theme.css
+++ b/src/assets/components/themes/saga-green/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #4CAF50;
   color: #4CAF50;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #4CAF50;
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #b7e0b8;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css
index b2c2c2624b3..b61886badba 100644
--- a/src/assets/components/themes/saga-orange/theme.css
+++ b/src/assets/components/themes/saga-orange/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #FFC107;
   color: #FFC107;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #FFC107;
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #ffe69c;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css
index 821130a96ec..30644b0d561 100644
--- a/src/assets/components/themes/saga-purple/theme.css
+++ b/src/assets/components/themes/saga-purple/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #9C27B0;
   color: #9C27B0;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #9C27B0;
+  width: 2.357rem;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #df9eea;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css
index d398eafb2dd..babc054ad08 100644
--- a/src/assets/components/themes/tailwind-light/theme.css
+++ b/src/assets/components/themes/tailwind-light/theme.css
@@ -5082,6 +5082,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #4F46E5;
   color: #4F46E5;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #ffffff;
+  color: #4F46E5;
+  width: 3rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #6366F1;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css
index 2edbd8e1dba..bb2bc6127d8 100644
--- a/src/assets/components/themes/vela-blue/theme.css
+++ b/src/assets/components/themes/vela-blue/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #64B5F6;
   color: #64B5F6;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1f2d40;
+  color: #64B5F6;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #93cbf9;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css
index b6062c63ced..8fb0634216d 100644
--- a/src/assets/components/themes/vela-green/theme.css
+++ b/src/assets/components/themes/vela-green/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #81C784;
   color: #81C784;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1f2d40;
+  color: #81C784;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #a7d8a9;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css
index 7d4028778eb..1e9f6e6c52b 100644
--- a/src/assets/components/themes/vela-orange/theme.css
+++ b/src/assets/components/themes/vela-orange/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #FFD54F;
   color: #FFD54F;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1f2d40;
+  color: #FFD54F;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #ffe284;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;
diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css
index 0a797050512..5a0fcc38cc0 100644
--- a/src/assets/components/themes/vela-purple/theme.css
+++ b/src/assets/components/themes/vela-purple/theme.css
@@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #BA68C8;
   color: #BA68C8;
 }
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: #1f2d40;
+  color: #BA68C8;
+  width: 2.357rem;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #cf95d9;
+}
 
 .p-tieredmenu {
   padding: 0.25rem 0;

From b4b90c669e1769a292d3e941c968a6f9c66a1a33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Fri, 11 Feb 2022 10:30:35 +0300
Subject: [PATCH 3/3] add demo and documentation for scrollable tabMenu

---
 src/app/components/tabmenu/tabmenu.css        | 10 +--
 .../components/tabmenu/tabmenudemo.html       | 47 +++++++++-
 .../components/tabmenu/tabmenudemo.ts         | 88 ++-----------------
 3 files changed, 54 insertions(+), 91 deletions(-)

diff --git a/src/app/components/tabmenu/tabmenu.css b/src/app/components/tabmenu/tabmenu.css
index 9cddd08b2a8..92e11c65c9c 100755
--- a/src/app/components/tabmenu/tabmenu.css
+++ b/src/app/components/tabmenu/tabmenu.css
@@ -1,5 +1,3 @@
-
-
 .p-tabmenu-nav-container {
     position: relative;
 }
@@ -43,12 +41,7 @@
     margin: 0;
     padding: 0;
     list-style-type: none;
-    flex: 1 1 auto;
-    /* display: flex;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    flex-wrap: nowrap; */
+    flex-wrap: nowrap;
 }
 
 .p-tabmenu-nav a {
@@ -68,6 +61,7 @@
 
 .p-tabmenu-nav .p-menuitem-text {
     line-height: 1;
+    white-space: nowrap;
 }
 
 .p-tabmenu-ink-bar {
diff --git a/src/app/showcase/components/tabmenu/tabmenudemo.html b/src/app/showcase/components/tabmenu/tabmenudemo.html
index 4daac24d933..36a7841fe14 100755
--- a/src/app/showcase/components/tabmenu/tabmenudemo.html
+++ b/src/app/showcase/components/tabmenu/tabmenudemo.html
@@ -8,7 +8,13 @@ <h1>TabMenu</h1>
 
 <div class="content-section implementation">
     <div class="card">
-        <p-tabMenu [scrollable]="true" [model]="items" [activeItem]="activeItem"></p-tabMenu>
+        <h5>Default</h5>
+        <p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
+    </div>
+
+    <div class="card">
+        <h5>Scrollable</h5>
+        <p-tabMenu [scrollable]="true" [model]="scrollableItems" [activeItem]="activeItem2"></p-tabMenu>
     </div>
 </div>
 
@@ -50,8 +56,8 @@ <h5>Getting Started</h5>
             <h5>ActiveItem</h5>
             <p>By default item that matches the active route is highlighted, alternatively <i>activeItem</i> property can be used choose the initial active item.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
-&lt;p-tabMenu [model]="items" [activeItem]="items[0]"&gt;&lt;/p-tabMenu&gt;</app-code>
-
+&lt;p-tabMenu [model]="items" [activeItem]="items[0]"&gt;&lt;/p-tabMenu&gt;
+</app-code>
 <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
 export class TabMenuDemo &#123;
     
@@ -81,6 +87,25 @@ <h5>Templating</h5>
         //item content
     &lt;/ng-template&gt;
 &lt;/p-tabMenu&gt;
+</app-code>
+
+<h5>Scrollable</h5>
+<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
+&lt;p-tabMenu [model]="scrollableItems" [activeItem]="activeItem2"&gt;&lt;/p-tabMenu&gt;
+</app-code>
+
+<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
+export class TabMenuDemo &#123;
+
+    scrollableItems: MenuItem[];
+
+    activeItem2: MenuItem;
+
+    ngOnInit() &#123;
+        this.scrollableItems = Array.from(&#123; length: 50 &#125;, (_, i) => (&#123; label: `Tab $&#123;i + 1&#125;`, icon: `pi pi-fw pi-display` &#125;));
+        this.activeItem2 = this.scrollableItems[0];
+    &#125;
+&#125;
 </app-code>
 
             <h5>Properties</h5>
@@ -119,6 +144,12 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Style class of the component.</td>
                         </tr>
+                        <tr>
+                            <td>scrollable</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled displays buttons at each side of the tab headers to scroll the tab list.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -195,6 +226,8 @@ <h5>Dependencies</h5>
 
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-tabMenu [model]="items" [activeItem]="activeItem"&gt;&lt;/p-tabMenu&gt;
+
+&lt;p-tabMenu [model]="scrollableItems" [activeItem]="activeItem2"&gt;&lt;/p-tabMenu&gt;
 </app-code>
 
 <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
@@ -202,8 +235,12 @@ <h5>Dependencies</h5>
     
     items: MenuItem[];
 
+    scrollableItems: MenuItem[];
+
     activeItem: MenuItem;
 
+    activeItem2: MenuItem;
+
     ngOnInit() &#123;
         this.items = [
             &#123;label: 'Home', icon: 'pi pi-fw pi-home'&#125;,
@@ -213,7 +250,11 @@ <h5>Dependencies</h5>
             &#123;label: 'Settings', icon: 'pi pi-fw pi-cog'&#125;
         ];
 
+        this.scrollableItems = Array.from(&#123; length: 50 &#125;, (_, i) => (&#123; label: `Tab $&#123;i + 1&#125;`, icon: `pi pi-fw pi-display` &#125;));
+
         this.activeItem = this.items[0];
+
+        this.activeItem2 = this.scrollableItems[0];
     &#125;
 
 &#125;
diff --git a/src/app/showcase/components/tabmenu/tabmenudemo.ts b/src/app/showcase/components/tabmenu/tabmenudemo.ts
index fbe875bc3f2..d501ae6af2e 100755
--- a/src/app/showcase/components/tabmenu/tabmenudemo.ts
+++ b/src/app/showcase/components/tabmenu/tabmenudemo.ts
@@ -8,97 +8,25 @@ export class TabMenuDemo {
     
     items: MenuItem[];
 
+    scrollableItems: MenuItem[];
+
     activeItem: MenuItem;
 
+    activeItem2: MenuItem;
+
     ngOnInit() {
         this.items = [
             {label: 'Home', icon: 'pi pi-fw pi-home'},
             {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
             {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
             {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
             {label: 'Settings', icon: 'pi pi-fw pi-cog'}
         ];
 
+        this.scrollableItems = Array.from({ length: 50 }, (_, i) => ({ label: `Tab ${i + 1}`, icon: `pi pi-fw pi-display` }));
+
         this.activeItem = this.items[0];
+
+        this.activeItem2 = this.scrollableItems[0];
     }
 }
\ No newline at end of file