From bafa9adc01b70ebe480092a4b1d765df41a24cf4 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Wed, 9 Jun 2021 11:41:39 +0300
Subject: [PATCH] (ui/page-layouts) Added tabbed version of Simple Fullwidth
 page layout

---
 src/app/mock-api/common/navigation/data.ts    |  12 +-
 .../ui/page-layouts/page-layouts.module.ts    | 111 +++++++++++++++---
 .../fullwidth-1.component.html}               |   0
 .../content-scroll/fullwidth-1.component.ts   |  16 +++
 .../normal-scroll/fullwidth-1.component.html} |   0
 .../normal-scroll/fullwidth-1.component.ts}   |   6 +-
 .../page-scroll/fullwidth-1.component.html}   |   0
 .../page-scroll/fullwidth-1.component.ts}     |   6 +-
 .../content-scroll/fullwidth-2.component.html | 104 ++++++++++++++++
 .../content-scroll/fullwidth-2.component.ts   |  16 +++
 .../normal-scroll/fullwidth-2.component.html  | 102 ++++++++++++++++
 .../normal-scroll/fullwidth-2.component.ts    |  16 +++
 .../page-scroll/fullwidth-2.component.html    | 104 ++++++++++++++++
 .../page-scroll/fullwidth-2.component.ts}     |   6 +-
 14 files changed, 468 insertions(+), 31 deletions(-)
 rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/content-scroll/fullwidth.component.html => fullwidth-1/content-scroll/fullwidth-1.component.html} (100%)
 create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts
 rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/normal-scroll/fullwidth.component.html => fullwidth-1/normal-scroll/fullwidth-1.component.html} (100%)
 rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/content-scroll/fullwidth.component.ts => fullwidth-1/normal-scroll/fullwidth-1.component.ts} (54%)
 rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/page-scroll/fullwidth.component.html => fullwidth-1/page-scroll/fullwidth-1.component.html} (100%)
 rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/normal-scroll/fullwidth.component.ts => fullwidth-1/page-scroll/fullwidth-1.component.ts} (55%)
 create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html
 create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts
 create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html
 create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts
 create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html
 rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/page-scroll/fullwidth.component.ts => fullwidth-2/page-scroll/fullwidth-2.component.ts} (55%)

diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts
index 26b22d3f..157df34a 100644
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/src/app/mock-api/common/navigation/data.ts
@@ -868,10 +868,16 @@ export const defaultNavigation: FuseNavigationItem[] = [
                         type    : 'collapsable',
                         children: [
                             {
-                                id   : 'user-interface.page-layouts.simple.fullwidth',
-                                title: 'Fullwidth',
+                                id   : 'user-interface.page-layouts.simple.fullwidth-1',
+                                title: 'Fullwidth #1',
                                 type : 'basic',
-                                link : '/ui/page-layouts/simple/fullwidth'
+                                link : '/ui/page-layouts/simple/fullwidth-1'
+                            },
+                            {
+                                id   : 'user-interface.page-layouts.simple.fullwidth-2',
+                                title: 'Fullwidth #2',
+                                type : 'basic',
+                                link : '/ui/page-layouts/simple/fullwidth-2'
                             },
                             {
                                 id   : 'user-interface.page-layouts.simple.left-sidebar-1',
diff --git a/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts b/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts
index 29759b48..05bd18b2 100644
--- a/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts
+++ b/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts
@@ -36,9 +36,13 @@ import { CardedRightSidebar1PageScrollComponent } from 'app/modules/admin/ui/pag
 import { CardedRightSidebar1ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/carded/right-sidebar-1/content-scroll/right-sidebar-1.component';
 import { CardedRightSidebar2NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/carded/right-sidebar-2/normal-scroll/right-sidebar-2.component';
 
-import { SimpleFullwidthNormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component';
-import { SimpleFullwidthPageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component';
-import { SimpleFullwidthContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component';
+import { SimpleFullwidth1NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component';
+import { SimpleFullwidth1PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component';
+import { SimpleFullwidth1ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component';
+
+import { SimpleFullwidth2NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component';
+import { SimpleFullwidth2PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component';
+import { SimpleFullwidth2ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component';
 
 import { SimpleLeftSidebar1NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/left-sidebar-1/normal-scroll/left-sidebar-1.component';
 import { SimpleLeftSidebar1PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/left-sidebar-1/page-scroll/left-sidebar-1.component';
@@ -277,8 +281,8 @@ export const overviews = {
         }
     },
     simple: {
-        fullwidth    : {
-            title           : 'Fullwidth Layout',
+        fullwidth1    : {
+            title           : 'Fullwidth #1',
             description     : 'Layout that spans the entire width of the content area with a dedicated header and 3 different scroll modes.',
             availableOptions: [
                 {
@@ -298,18 +302,54 @@ export const overviews = {
             options         : {
                 normalScroll : {
                     description: 'No scrolling area manipulations, entire viewport scrolls (body scroll).',
-                    link       : '/ui/page-layouts/simple/fullwidth/normal-scroll',
-                    component  : SimpleFullwidthNormalScrollComponent
+                    link       : '/ui/page-layouts/simple/fullwidth-1/normal-scroll',
+                    component  : SimpleFullwidth1NormalScrollComponent
                 },
                 pageScroll   : {
                     description: 'Only the page area scrolls making the main toolbar and footer to stick to the top and bottom of the viewport respectively.',
-                    link       : '/ui/page-layouts/simple/fullwidth/page-scroll',
-                    component  : SimpleFullwidthPageScrollComponent
+                    link       : '/ui/page-layouts/simple/fullwidth-1/page-scroll',
+                    component  : SimpleFullwidth1PageScrollComponent
                 },
                 contentScroll: {
                     description: 'Only the content area of the page scrolls making everything else to stick into their positions.',
-                    link       : '/ui/page-layouts/simple/fullwidth/content-scroll',
-                    component  : SimpleFullwidthContentScrollComponent
+                    link       : '/ui/page-layouts/simple/fullwidth-1/content-scroll',
+                    component  : SimpleFullwidth1ContentScrollComponent
+                }
+            }
+        },
+        fullwidth2    : {
+            title           : 'Fullwidth #2',
+            description     : 'Layout that spans the entire width of the content area with a dedicated header, tabs and 3 different scroll modes.',
+            availableOptions: [
+                {
+                    value: 'normalScroll',
+                    title: 'Normal Scroll'
+                },
+                {
+                    value: 'pageScroll',
+                    title: 'Page Scroll'
+                },
+                {
+                    value: 'contentScroll',
+                    title: 'Content Scroll'
+                }
+            ],
+            selectedOption  : 'normalScroll',
+            options         : {
+                normalScroll : {
+                    description: 'No scrolling area manipulations, entire viewport scrolls (body scroll).',
+                    link       : '/ui/page-layouts/simple/fullwidth-2/normal-scroll',
+                    component  : SimpleFullwidth2NormalScrollComponent
+                },
+                pageScroll   : {
+                    description: 'Only the page area scrolls making the main toolbar and footer to stick to the top and bottom of the viewport respectively.',
+                    link       : '/ui/page-layouts/simple/fullwidth-2/page-scroll',
+                    component  : SimpleFullwidth2PageScrollComponent
+                },
+                contentScroll: {
+                    description: 'Only the content area of the page scrolls making everything else to stick into their positions.',
+                    link       : '/ui/page-layouts/simple/fullwidth-2/content-scroll',
+                    component  : SimpleFullwidth2ContentScrollComponent
                 }
             }
         },
@@ -741,7 +781,7 @@ export const routes: Route[] = [
         path    : 'simple',
         children: [
             {
-                path    : 'fullwidth',
+                path    : 'fullwidth-1',
                 children: [
                     {
                         path      : '',
@@ -752,20 +792,49 @@ export const routes: Route[] = [
                         path     : 'overview',
                         component: LayoutOverviewComponent,
                         data     : {
-                            overview: overviews.simple.fullwidth
+                            overview: overviews.simple.fullwidth1
                         }
                     },
                     {
                         path     : 'normal-scroll',
-                        component: SimpleFullwidthNormalScrollComponent
+                        component: SimpleFullwidth1NormalScrollComponent
                     },
                     {
                         path     : 'page-scroll',
-                        component: SimpleFullwidthPageScrollComponent
+                        component: SimpleFullwidth1PageScrollComponent
                     },
                     {
                         path     : 'content-scroll',
-                        component: SimpleFullwidthContentScrollComponent
+                        component: SimpleFullwidth1ContentScrollComponent
+                    }
+                ]
+            },
+            {
+                path    : 'fullwidth-2',
+                children: [
+                    {
+                        path      : '',
+                        pathMatch : 'full',
+                        redirectTo: 'overview'
+                    },
+                    {
+                        path     : 'overview',
+                        component: LayoutOverviewComponent,
+                        data     : {
+                            overview: overviews.simple.fullwidth2
+                        }
+                    },
+                    {
+                        path     : 'normal-scroll',
+                        component: SimpleFullwidth2NormalScrollComponent
+                    },
+                    {
+                        path     : 'page-scroll',
+                        component: SimpleFullwidth2PageScrollComponent
+                    },
+                    {
+                        path     : 'content-scroll',
+                        component: SimpleFullwidth2ContentScrollComponent
                     }
                 ]
             },
@@ -987,9 +1056,13 @@ export const routes: Route[] = [
         CardedRightSidebar2ContentScrollComponent,
 
         // Simple - Fullwidth
-        SimpleFullwidthNormalScrollComponent,
-        SimpleFullwidthPageScrollComponent,
-        SimpleFullwidthContentScrollComponent,
+        SimpleFullwidth1NormalScrollComponent,
+        SimpleFullwidth1PageScrollComponent,
+        SimpleFullwidth1ContentScrollComponent,
+
+        SimpleFullwidth2NormalScrollComponent,
+        SimpleFullwidth2PageScrollComponent,
+        SimpleFullwidth2ContentScrollComponent,
 
         // Simple - Left sidebar
         SimpleLeftSidebar1NormalScrollComponent,
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.html
similarity index 100%
rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.html
rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.html
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts
new file mode 100644
index 00000000..285ec653
--- /dev/null
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts
@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector     : 'simple-fullwidth-1-content-scroll',
+    templateUrl  : './fullwidth-1.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class SimpleFullwidth1ContentScrollComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.html
similarity index 100%
rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.html
rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.html
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.ts
similarity index 54%
rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.ts
rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.ts
index 3fbd420b..a14945ba 100644
--- a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.ts
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.ts
@@ -1,11 +1,11 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-    selector     : 'simple-fullwidth-content-scroll',
-    templateUrl  : './fullwidth.component.html',
+    selector     : 'simple-fullwidth-1-normal-scroll',
+    templateUrl  : './fullwidth-1.component.html',
     encapsulation: ViewEncapsulation.None
 })
-export class SimpleFullwidthContentScrollComponent
+export class SimpleFullwidth1NormalScrollComponent
 {
     /**
      * Constructor
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.html
similarity index 100%
rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.html
rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.html
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.ts
similarity index 55%
rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.ts
rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.ts
index 8cbd86b4..311a8347 100644
--- a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.ts
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.ts
@@ -1,11 +1,11 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-    selector     : 'simple-fullwidth-normal-scroll',
-    templateUrl  : './fullwidth.component.html',
+    selector     : 'simple-fullwidth-1-page-scroll',
+    templateUrl  : './fullwidth-1.component.html',
     encapsulation: ViewEncapsulation.None
 })
-export class SimpleFullwidthNormalScrollComponent
+export class SimpleFullwidth1PageScrollComponent
 {
     /**
      * Constructor
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html
new file mode 100644
index 00000000..bc94286c
--- /dev/null
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html
@@ -0,0 +1,104 @@
+<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div>
+                <div class="hidden sm:flex flex-wrap items-center font-medium">
+                    <div>
+                        <a class="whitespace-nowrap text-primary-500">Projects</a>
+                    </div>
+                    <div class="flex items-center ml-1 whitespace-nowrap">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                        <a class="ml-1 text-primary-500">Weekend Project</a>
+                    </div>
+                    <div class="flex items-center ml-1 whitespace-nowrap">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                        <span class="ml-1 text-secondary">Overview</span>
+                    </div>
+                </div>
+                <div class="flex sm:hidden">
+                    <a
+                        class="inline-flex items-center -ml-1.5 text-secondary font-medium"
+                        [routerLink]="'./..'">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
+                        <span class="ml-1">Back</span>
+                    </a>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Page heading
+                </h2>
+            </div>
+        </div>
+        <!-- Actions -->
+        <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+            <button mat-stroked-button>
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
+                Edit
+            </button>
+            <button
+                class="ml-3"
+                mat-flat-button
+                [color]="'accent'">
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:link'"></mat-icon>
+                View
+            </button>
+        </div>
+    </div>
+
+    <!-- Main -->
+    <div
+        class="flex-auto pt-6 sm:px-4 sm:pb-4 overflow-y-auto"
+        cdkScrollable>
+
+        <!-- Tabs -->
+        <mat-tab-group [animationDuration]="'0'">
+
+            <!-- Tab #1 -->
+            <mat-tab label="First Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">First tab content</div>
+                </div>
+
+            </mat-tab>
+
+            <!-- Tab #2 -->
+            <mat-tab label="Second Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">Second tab content</div>
+                </div>
+
+            </mat-tab>
+
+            <!-- Tab #3 -->
+            <mat-tab label="Third Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">Third tab content</div>
+                </div>
+
+            </mat-tab>
+        </mat-tab-group>
+
+    </div>
+
+</div>
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts
new file mode 100644
index 00000000..fe2868c9
--- /dev/null
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts
@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector     : 'simple-fullwidth-2-content-scroll',
+    templateUrl  : './fullwidth-2.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class SimpleFullwidth2ContentScrollComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html
new file mode 100644
index 00000000..19eb6445
--- /dev/null
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html
@@ -0,0 +1,102 @@
+<div class="flex flex-col flex-auto min-w-0">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div>
+                <div class="hidden sm:flex flex-wrap items-center font-medium">
+                    <div>
+                        <a class="whitespace-nowrap text-primary-500">Projects</a>
+                    </div>
+                    <div class="flex items-center ml-1 whitespace-nowrap">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                        <a class="ml-1 text-primary-500">Weekend Project</a>
+                    </div>
+                    <div class="flex items-center ml-1 whitespace-nowrap">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                        <span class="ml-1 text-secondary">Overview</span>
+                    </div>
+                </div>
+                <div class="flex sm:hidden">
+                    <a
+                        class="inline-flex items-center -ml-1.5 text-secondary font-medium"
+                        [routerLink]="'./..'">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
+                        <span class="ml-1">Back</span>
+                    </a>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Page heading
+                </h2>
+            </div>
+        </div>
+        <!-- Actions -->
+        <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+            <button mat-stroked-button>
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
+                Edit
+            </button>
+            <button
+                class="ml-3"
+                mat-flat-button
+                [color]="'accent'">
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:link'"></mat-icon>
+                View
+            </button>
+        </div>
+    </div>
+
+    <!-- Main -->
+    <div class="flex-auto pt-6 sm:px-4 sm:pb-4">
+
+        <!-- Tabs -->
+        <mat-tab-group [animationDuration]="'0'">
+
+            <!-- Tab #1 -->
+            <mat-tab label="First Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">First tab content</div>
+                </div>
+
+            </mat-tab>
+
+            <!-- Tab #2 -->
+            <mat-tab label="Second Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">Second tab content</div>
+                </div>
+
+            </mat-tab>
+
+            <!-- Tab #3 -->
+            <mat-tab label="Third Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">Third tab content</div>
+                </div>
+
+            </mat-tab>
+        </mat-tab-group>
+
+    </div>
+
+</div>
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts
new file mode 100644
index 00000000..ab0cab96
--- /dev/null
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts
@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector     : 'simple-fullwidth-2-normal-scroll',
+    templateUrl  : './fullwidth-2.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class SimpleFullwidth2NormalScrollComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html
new file mode 100644
index 00000000..fa7bcbbd
--- /dev/null
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html
@@ -0,0 +1,104 @@
+<div
+    class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
+    cdkScrollable>
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div>
+                <div class="hidden sm:flex flex-wrap items-center font-medium">
+                    <div>
+                        <a class="whitespace-nowrap text-primary-500">Projects</a>
+                    </div>
+                    <div class="flex items-center ml-1 whitespace-nowrap">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                        <a class="ml-1 text-primary-500">Weekend Project</a>
+                    </div>
+                    <div class="flex items-center ml-1 whitespace-nowrap">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                        <span class="ml-1 text-secondary">Overview</span>
+                    </div>
+                </div>
+                <div class="flex sm:hidden">
+                    <a
+                        class="inline-flex items-center -ml-1.5 text-secondary font-medium"
+                        [routerLink]="'./..'">
+                        <mat-icon
+                            class="icon-size-5 text-secondary"
+                            [svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
+                        <span class="ml-1">Back</span>
+                    </a>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Page heading
+                </h2>
+            </div>
+        </div>
+        <!-- Actions -->
+        <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+            <button mat-stroked-button>
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
+                Edit
+            </button>
+            <button
+                class="ml-3"
+                mat-flat-button
+                [color]="'accent'">
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:link'"></mat-icon>
+                View
+            </button>
+        </div>
+    </div>
+
+    <!-- Main -->
+    <div class="flex-auto pt-6 sm:px-4 sm:pb-4">
+
+        <!-- Tabs -->
+        <mat-tab-group [animationDuration]="'0'">
+
+            <!-- Tab #1 -->
+            <mat-tab label="First Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">First tab content</div>
+                </div>
+
+            </mat-tab>
+
+            <!-- Tab #2 -->
+            <mat-tab label="Second Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">Second tab content</div>
+                </div>
+
+            </mat-tab>
+
+            <!-- Tab #3 -->
+            <mat-tab label="Third Tab">
+
+                <!-- TAB CONTENT GOES HERE -->
+                <div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
+                    <div class="mt-52 text-4xl font-bold text-hint">Third tab content</div>
+                </div>
+
+            </mat-tab>
+        </mat-tab-group>
+
+    </div>
+
+</div>
diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.ts
similarity index 55%
rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.ts
rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.ts
index a8d7301c..ed972ea1 100644
--- a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.ts
+++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.ts
@@ -1,11 +1,11 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-    selector     : 'simple-fullwidth-page-scroll',
-    templateUrl  : './fullwidth.component.html',
+    selector     : 'simple-fullwidth-2-page-scroll',
+    templateUrl  : './fullwidth-2.component.html',
     encapsulation: ViewEncapsulation.None
 })
-export class SimpleFullwidthPageScrollComponent
+export class SimpleFullwidth2PageScrollComponent
 {
     /**
      * Constructor