From ac86b73b2a1eb2ee78c394324b18257f343c537d Mon Sep 17 00:00:00 2001
From: MGREMY <126514209+MGREMY@users.noreply.github.com>
Date: Tue, 16 Jan 2024 21:46:28 +0100
Subject: [PATCH] refactor(sidebar): refactor sidebar component template files

---
 .../sidebar/sidebar-item-group.component.html |  3 +++
 .../sidebar/sidebar-item-group.component.ts   |  4 +---
 .../sidebar/sidebar-item.component.html       | 23 ++++++++++++++++++
 .../sidebar/sidebar-item.component.ts         | 24 +------------------
 .../components/sidebar/sidebar.component.html | 13 ++++++++++
 .../components/sidebar/sidebar.component.ts   | 14 +----------
 6 files changed, 42 insertions(+), 39 deletions(-)
 create mode 100644 libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.html
 create mode 100644 libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.html
 create mode 100644 libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.html

diff --git a/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.html b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.html
new file mode 100644
index 00000000..dd0e2bdc
--- /dev/null
+++ b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.html
@@ -0,0 +1,3 @@
+<div class="flex flex-col space-y-2">
+  <ng-content></ng-content>
+</div>
diff --git a/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.ts b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.ts
index d2b44148..402792be 100644
--- a/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.ts
+++ b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item-group.component.ts
@@ -4,8 +4,6 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   selector: 'flowbite-sidebar-item-group',
-  template: ` <div class="flex flex-col space-y-2">
-    <ng-content></ng-content>
-  </div>`,
+  templateUrl: './sidebar-item-group.component.html',
 })
 export class SidebarItemGroupComponent {}
diff --git a/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.html b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.html
new file mode 100644
index 00000000..c5087ead
--- /dev/null
+++ b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.html
@@ -0,0 +1,23 @@
+<a
+  class="group flex cursor-pointer items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
+  [routerLink]="link"
+  routerLinkActive="bg-gray-200 dark:bg-gray-700"
+  [routerLinkActiveOptions]="{ exact: true }"
+>
+  <span
+    class="flex-shrink-0"
+    [innerHTML]="icon! | sanitizeHtml"
+    *ngIf="!!icon"
+  ></span>
+  <span
+    class="flex-1 whitespace-nowrap"
+    [class.ml-3]="!!icon"
+    *ngIf="(sidebarService.$collapsed | async) === false"
+  >
+    <ng-content></ng-content>
+  </span>
+  <flowbite-badge
+    *ngIf="(sidebarService.$collapsed | async) === false && label"
+    >{{ label }}</flowbite-badge
+  >
+</a>
diff --git a/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.ts b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.ts
index c959cd6f..daae38f2 100644
--- a/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.ts
+++ b/libs/flowbite-angular/src/lib/components/sidebar/sidebar-item.component.ts
@@ -16,29 +16,7 @@ import { SidebarService } from '../../services';
     BadgeComponent,
   ],
   selector: 'flowbite-sidebar-item',
-  template: `<a
-    class="group flex cursor-pointer items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
-    [routerLink]="link"
-    routerLinkActive="bg-gray-200 dark:bg-gray-700"
-    [routerLinkActiveOptions]="{ exact: true }"
-  >
-    <span
-      class="flex-shrink-0"
-      [innerHTML]="icon! | sanitizeHtml"
-      *ngIf="!!icon"
-    ></span>
-    <span
-      class="flex-1 whitespace-nowrap"
-      [class.ml-3]="!!icon"
-      *ngIf="(sidebarService.$collapsed | async) === false"
-    >
-      <ng-content></ng-content>
-    </span>
-    <flowbite-badge
-      *ngIf="(sidebarService.$collapsed | async) === false && label"
-      >{{ label }}</flowbite-badge
-    >
-  </a>`,
+  templateUrl: './sidebar-item.component.html',
 })
 export class SidebarItemComponent {
   @Input() icon?: string;
diff --git a/libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.html b/libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.html
new file mode 100644
index 00000000..65a03e5f
--- /dev/null
+++ b/libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.html
@@ -0,0 +1,13 @@
+<aside
+  class="h-full"
+  [class.w-16]="sidebarService.$collapsed | async"
+  [class.w-64]="(sidebarService.$collapsed | async) === false"
+>
+  <div
+    class="flex h-full flex-col space-y-4 divide-y divide-gray-200 overflow-y-auto bg-white py-4 px-3 dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
+    [class.rounded]="rounded"
+    [ngClass]="extraClass"
+  >
+    <ng-content></ng-content>
+  </div>
+</aside>
diff --git a/libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.ts b/libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.ts
index 40c9bc02..69edcbbe 100644
--- a/libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.ts
+++ b/libs/flowbite-angular/src/lib/components/sidebar/sidebar.component.ts
@@ -6,19 +6,7 @@ import { SidebarService } from '../../services';
   standalone: true,
   imports: [NgClass, AsyncPipe],
   selector: 'flowbite-sidebar',
-  template: `<aside
-    class="h-full"
-    [class.w-16]="sidebarService.$collapsed | async"
-    [class.w-64]="(sidebarService.$collapsed | async) === false"
-  >
-    <div
-      class="flex h-full flex-col space-y-4 divide-y divide-gray-200 overflow-y-auto bg-white py-4 px-3 dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
-      [class.rounded]="rounded"
-      [ngClass]="extraClass"
-    >
-      <ng-content></ng-content>
-    </div>
-  </aside>`,
+  templateUrl: './sidebar.component.html',
 })
 export class SidebarComponent {
   @Input() extraClass = '';