docs(ui): docs improvement

Author: immohammadjaved

package-lock.json

@@ -45,8 +45,7 @@
     "rxjs": "~7.8.0",
     "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.1.11",
-    "tslib": "^2.3.0",
-    "tw-animate-css": "^1.3.7"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular/build": "^20.1.3",
@@ -63,6 +62,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "ng-packagr": "^20.1.0",
+    "tw-animate-css": "^1.3.8",
     "typescript": "~5.8.2"
   }
 }

package.json

@@ -28,6 +28,11 @@ export class Sidebar {
   // Two-way binding model signal for menu state
   readonly menuOpen = model(false);
 
+  // Sort method for components
+  private sortComponents(components: NavLink[]): NavLink[] {
+    return components.sort((a, b) => a.name.localeCompare(b.name));
+  }
+  
   // Clean navigation structure
   readonly sections = signal<NavSection[]>([
     {
@@ -43,7 +48,7 @@ export class Sidebar {
     {
       title: 'Components',
       link: 'components',
-      links: [
+      links: this.sortComponents([
         { name: 'Accordion', path: 'accordion' },
         { name: 'Alert', path: 'alert' },
         { name: 'Alert Dialog', path: 'alert-dialog' },
@@ -70,7 +75,7 @@ export class Sidebar {
         { name: 'Toggle', path: 'toggle' },
         { name: 'Toggle Group', path: 'toggle-group' },
         { name: 'Skeleton', path: 'skeleton' }
-      ]
+      ])
     }
   ]);