Feature/navigation from statamic controls section

projects/demo/src/app/app.component.html

@@ -34,10 +34,9 @@
     <button idsButton type="button" variant="primary" [disabled]="currentLang() === 'en'" (click)="changeLanguage('en')">EN</button>
     <button idsButton type="button" variant="secondary" [disabled]="currentLang() === 'hu'" (click)="changeLanguage('hu')">HU</button>
   </div>
-  <ids-switch [formControl]="darkMode" [size]="'dense'" />
+  <ids-switch size="dense" [formControl]="darkMode" />
 </header>
-<!-- <ids-nav [menu]="menuConfigs" /> -->
 <ids-nav [menu]="dynamicMenu" />
 <main cdkScrollable>
-  <div class="container p-8 mx-auto"><router-outlet /></div>
+  <div class="container p-8 mx-auto"> <router-outlet/></div>
 </main>

projects/demo/src/app/app.component.ts

@@ -34,67 +34,6 @@ export class AppComponent implements OnInit, OnDestroy {
 
   private _subscription = new Subscription();
 
-  public menuConfigs: Menu[] = [
-    {
-      name: 'GET_STARTED', children: [
-        { name: 'Home', path: '/index' },
-        { name: 'Issue report', path: '/issue-report' },
-      ],
-    },
-    {
-      name: 'DESIGN_DEVELOP',
-      children: [
-        { name: 'DESIGN_DEVELOP_MENU.DESIGN_TOKENS', path: '/design-tokens' },
-        { name: 'DESIGN_DEVELOP_MENU.FOUNDATION', path: '/foundation' },
-        {
-          name: 'DESIGN_DEVELOP_MENU.COMPONENTS',
-          path: '/components',
-          children: [
-            { name: 'COMPONENTS.ACCORDION', path: '/components/accordion' },
-            { name: 'COMPONENTS.ACTION_MENU', path: '/components/action-menu' },
-            { name: 'COMPONENTS.AVATAR', path: '/components/avatar' },
-            { name: 'COMPONENTS.BADGE', path: '/components/badge' },
-            { name: 'COMPONENTS.BREADCRUMB', path: '/components/breadcrumb' },
-            { name: 'COMPONENTS.BUTTON', path: '/components/button' },
-            { name: 'COMPONENTS.CARD', path: '/components/card' },
-            { name: 'COMPONENTS.CHECKBOX', path: '/components/checkbox' },
-            { name: 'COMPONENTS.CHIP', path: '/components/chip' },
-            { name: 'COMPONENTS.DATEPICKER', path: '/components/datepicker' },
-            { name: 'COMPONENTS.DIALOG', path: '/components/dialog' },
-            { name: 'COMPONENTS.DIVIDER', path: '/components/divider' },
-            { name: 'COMPONENTS.FIELDSET', path: '/components/fieldset' },
-            { name: 'COMPONENTS.FORM_FIELD', path: '/components/form-field' },
-            { name: 'COMPONENTS.ICON', path: '/components/icon' },
-            { name: 'COMPONENTS.ICON_BUTTON', path: '/components/icon-button' },
-            { name: 'COMPONENTS.MENU_ITEM', path: '/components/menu-item' },
-            { name: 'COMPONENTS.NOTIFICATION', path: '/components/notification' },
-            { name: 'COMPONENTS.OVERLAY_PANEL', path: '/components/overlay-panel' },
-            { name: 'COMPONENTS.PAGINATOR', path: '/components/paginator' },
-            { name: 'COMPONENTS.RADIO', path: '/components/radio' },
-            { name: 'COMPONENTS.SCROLLBAR', path: '/components/scrollbar' },
-            { name: 'COMPONENTS.SEGMENTED_CONTROL', path: '/components/segmented-control' },
-            { name: 'COMPONENTS.SEGMENTED_CONTROL_TOGGLE', path: '/components/segmented-control-toggle' },
-            { name: 'COMPONENTS.SELECT', path: '/components/select' },
-            { name: 'COMPONENTS.SIDE_SHEET', path: '/components/side-sheet' },
-            { name: 'COMPONENTS.SIDE_NAV', path: '/components/side-nav' },
-            { name: 'COMPONENTS.SNACKBAR', path: '/components/snackbar' },
-            { name: 'COMPONENTS.SPINNER', path: '/components/spinner' },
-            { name: 'COMPONENTS.SWITCH', path: '/components/switch' },
-            { name: 'COMPONENTS.TAB', path: '/components/tab' },
-            { name: 'COMPONENTS.TABLE', path: '/components/table' },
-            { name: 'COMPONENTS.TAG', path: '/components/tag' },
-            { name: 'COMPONENTS.TOOLTIP', path: '/components/tooltip' },
-          ],
-        },
-        {
-          name: 'DESIGN_DEVELOP_MENU.PATTERNS',
-          path: '/patterns',
-        },
-      ],
-    },
-    { name: 'RESOURCES', children: [] },
-  ];
-
   public darkMode = new FormControl<boolean>(false);
 
   public currentLang = toSignal(this._translate.onLangChange.pipe(map(({ lang }) => lang), startWith(this._translate.currentLang)));
@@ -124,7 +63,6 @@ export class AppComponent implements OnInit, OnDestroy {
     });
   }
 
-  // Find the deepest level in the Statamic navigation tree
   private _findDeepestLevel(tree: readonly StatamicNavNode[], currentDepth = 0): number {
     if (!tree || tree.length === 0) {
       return currentDepth;
@@ -140,7 +78,6 @@ export class AppComponent implements OnInit, OnDestroy {
     return tree.map((node) => {
       let path: string | undefined = undefined;
       if (node.page?.slug) {
-        // Only link to /components/:slug for component-level items (depth >= _componentLevelDepth)
         if (this._componentLevelDepth !== undefined && node.depth >= this._componentLevelDepth) {
           path = `/components/${node.page.slug}`;
         } else {
@@ -180,7 +117,6 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 }
 
-// Add StatamicNavNode type
 interface StatamicNavNode {
   depth: number;
   page?: { title?: string; id?: string; slug?: string };