docs(routing): udpated routes

Author: Mohammad Javed

projects/docs/src/app/app.routes.ts

@@ -6,63 +6,22 @@ export const routes: Routes = [
         loadComponent: () => import('./pages/docs/docs.component').then(c => c.DocsComponent),
         children: [
             {
-                path: 'introduction',
-                loadComponent: () => import('./pages/docs/introduction/introduction.component').then(c => c.IntroductionComponent)
+                path: 'getting-started',
+                loadChildren: () => import('./getting-started.routes').then(m => m.routes)
             },
             {
-                path: 'installation',
-                loadComponent: () => import('./pages/docs/installation/installation.component').then(c => c.InstallationComponent)
+                path: 'components',
+                loadChildren: () => import('./components.routes').then(m => m.routes)
             },
-            {
-                path: 'components/accordion',
-                loadComponent: () => import('./pages/docs/components/accordion/accordion.component').then(c => c.AccordionComponent)
-            },
-            {
-                path: 'components/button',
-                loadComponent: () => import('./pages/docs/components/button/button.component').then(c => c.ButtonComponent)
-            },
-            {
-                path: 'components/alert',
-                loadComponent: () => import('./pages/docs/components/alert/alert.component').then(c => c.AlertComponent)
-            },
-            {
-                path: 'components/avatar',
-                loadComponent: () => import('./pages/docs/components/avatar/avatar.component').then(c => c.AvatarComponent)
-            },
-            {
-                path: 'components/badge',
-                loadComponent: () => import('./pages/docs/components/badge/badge.component').then(c => c.BadgeComponent)
-            },
-            {
-                path: 'components/dialog',
-                loadComponent: () => import('./pages/docs/components/dialog/dialog.component').then(c => c.DialogComponent)
-            },
-            {
-                path: 'components/dropdown-menu',
-                loadComponent: () => import('./pages/docs/components/dropdown-menu/dropdown-menu.component').then(c => c.DropdownMenuComponent)
-            },
-            {
-                path: 'components/popover',
-                loadComponent: () => import('./pages/docs/components/popover/popover.component').then(c => c.PopoverComponent)
-            },
-            {
-                path: 'components/tabs',
-                loadComponent: () => import('./pages/docs/components/tabs/tabs.component').then(c => c.TabsComponent)
-            },
-            {
-                path: '',
-                pathMatch: 'full',
-                redirectTo: 'introduction'
-            }
         ]
     },
     {
         path: '',
-        redirectTo: '/docs/introduction',
+        redirectTo: 'docs/getting-started/introduction',
         pathMatch: 'full'
     },
     {
         path: '**',
-        redirectTo: ''
+        redirectTo: 'docs/getting-started/introduction'
     }
 ];

projects/docs/src/app/components.routes.ts

@@ -0,0 +1,40 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+    {
+        path: 'accordion',
+        loadComponent: () => import('./pages/docs/components/accordion/accordion.component').then(c => c.AccordionComponent)
+    },
+    {
+        path: 'button',
+        loadComponent: () => import('./pages/docs/components/button/button.component').then(c => c.ButtonComponent)
+    },
+    {
+        path: 'alert',
+        loadComponent: () => import('./pages/docs/components/alert/alert.component').then(c => c.AlertComponent)
+    },
+    {
+        path: 'avatar',
+        loadComponent: () => import('./pages/docs/components/avatar/avatar.component').then(c => c.AvatarComponent)
+    },
+    {
+        path: 'badge',
+        loadComponent: () => import('./pages/docs/components/badge/badge.component').then(c => c.BadgeComponent)
+    },
+    {
+        path: 'dialog',
+        loadComponent: () => import('./pages/docs/components/dialog/dialog.component').then(c => c.DialogComponent)
+    },
+    {
+        path: 'dropdown-menu',
+        loadComponent: () => import('./pages/docs/components/dropdown-menu/dropdown-menu.component').then(c => c.DropdownMenuComponent)
+    },
+    {
+        path: 'popover',
+        loadComponent: () => import('./pages/docs/components/popover/popover.component').then(c => c.PopoverComponent)
+    },
+    {
+        path: 'tabs',
+        loadComponent: () => import('./pages/docs/components/tabs/tabs.component').then(c => c.TabsComponent)
+    }
+];

projects/docs/src/app/components/sidenav/sidenav.component.html

@@ -10,7 +10,7 @@ <h2 class="mb-4 text-sm font-semibold text-zinc-800 dark:text-zinc-100">
                 @for (link of section.links; track link.name) {
                 <li class="text-zinc-600 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white">
                     <a class="relative flex h-10 items-center border-l border-zinc-200 px-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-zinc-800"
-                        [routerLink]="link.path"
+                        [routerLink]="'docs/' + section.link + '/' + link.path"
                         routerLinkActive="text-black dark:text-white font-medium before:w-0.5 before:bg-zinc-950 before:rounded-lg before:h-6 before:absolute before:left-0 before:-translate-x-1/2 dark:before:bg-white">
                         @if (link.icon) {
                         <ng-icon class="mr-2 text-base text-zinc-600 dark:text-zinc-300" [name]="link.icon" />

projects/docs/src/app/components/sidenav/sidenav.component.ts

@@ -18,24 +18,26 @@ export class SidenavComponent {
   sections: NavSection[] = [
     {
       title: 'Getting Started',
+      link: 'getting-started',
       links: [
-        { name: 'Introduction', icon: 'bootstrapBook', path: '/docs/introduction' },
-        { name: 'Installation', icon: 'bootstrapRocketTakeoff', path: '/docs/installation' },
-        { name: 'Theming', icon: 'bootstrapPaintBucket', path: '/docs/theming' }
+        { name: 'Introduction', icon: 'bootstrapBook', path: 'introduction' },
+        { name: 'Installation', icon: 'bootstrapRocketTakeoff', path: 'installation' },
+        { name: 'Theming', icon: 'bootstrapPaintBucket', path: 'theming' }
       ]
     },
     {
       title: 'Components',
+      link: 'components',
       links: [
-        { name: 'Accordion', path: '/docs/components/accordion' },
-        { name: 'Alert', path: '/docs/components/alert' },
-        { name: 'Tabs', path: '/docs/components/tabs' },
-        { name: 'Avatar', path: '/docs/components/avatar' },
-        { name: 'Badge', path: '/docs/components/badge' },
-        { name: 'Button', path: '/docs/components/button' },
-        { name: 'Dialog', path: '/docs/components/dialog' },
-        { name: 'Dropdown Menu', path: '/docs/components/dropdown-menu' },
-        { name: 'Popver', path: '/docs/components/popover' },
+        { name: 'Accordion', path: 'accordion' },
+        { name: 'Alert', path: 'alert' },
+        { name: 'Tabs', path: 'tabs' },
+        { name: 'Avatar', path: 'avatar' },
+        { name: 'Badge', path: 'badge' },
+        { name: 'Button', path: 'button' },
+        { name: 'Dialog', path: 'dialog' },
+        { name: 'Dropdown Menu', path: 'dropdown-menu' },
+        { name: 'Popver', path: 'popover' },
       ]
     }
   ];
@@ -59,5 +61,6 @@ interface NavLink {
 
 interface NavSection {
   title: string;
+  link?: string;
   links: NavLink[];
 }

projects/docs/src/app/getting-started.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+    {
+        path: 'introduction',
+        loadComponent: () => import('./pages/docs/introduction/introduction.component').then(c => c.IntroductionComponent)
+    },
+    {
+        path: 'installation',
+        loadComponent: () => import('./pages/docs/installation/installation.component').then(c => c.InstallationComponent)
+    },
+];