refactor(sidebar): refactor sidebar component template files

themesberg · Jan 16, 2024 · ac86b73 · ac86b73
1 parent 94728be
commit ac86b73
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 39 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = '';