Add layout

src/app/layout/app.footer.component.ts

@@ -1,10 +1,17 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
 import { LayoutService } from "./service/app.layout.service";
 
 @Component({
     selector: 'app-footer',
-    templateUrl: './app.footer.component.html'
+    standalone: true,
+    providers: [LayoutService],
+    template: `
+        <div class="layout-footer">
+          <img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2"/>
+          by
+          <span class="font-medium ml-2">PrimeNG</span>
+        </div>`
 })
 export class AppFooterComponent {
-    constructor(public layoutService: LayoutService) { }
+  layoutService = inject(LayoutService);
 }

src/app/layout/app.layout.component.ts

@@ -1,12 +1,17 @@
 import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import {NavigationEnd, Router, RouterModule} from '@angular/router';
 import { filter, Subscription } from 'rxjs';
 import { LayoutService } from "./service/app.layout.service";
 import { AppSidebarComponent } from "./app.sidebar.component";
 import { AppTopBarComponent } from './app.topbar.component';
+import {AppConfigComponent} from './config/app.config.component';
+import {AppFooterComponent} from './app.footer.component';
+import {CommonModule} from '@angular/common';
 
 @Component({
     selector: 'app-layout',
+    standalone: true,
+    imports: [CommonModule, RouterModule, AppTopBarComponent, AppSidebarComponent, AppConfigComponent, AppFooterComponent],
     templateUrl: './app.layout.component.html'
 })
 export class AppLayoutComponent implements OnDestroy {
@@ -25,9 +30,9 @@ export class AppLayoutComponent implements OnDestroy {
         this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
             if (!this.menuOutsideClickListener) {
                 this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
-                    const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target) 
+                    const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target)
                         || this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || this.appTopbar.menuButton.nativeElement.contains(event.target));
-                    
+
                     if (isOutsideClicked) {
                         this.hideMenu();
                     }

src/app/layout/app.menu.component.ts

@@ -1,9 +1,14 @@
 import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
 import { LayoutService } from './service/app.layout.service';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {AppMenuitemComponent} from './app.menuitem.component';
 
 @Component({
     selector: 'app-menu',
+  standalone: true,
+  imports: [RouterModule, CommonModule, AppMenuitemComponent],
     templateUrl: './app.menu.component.html'
 })
 export class AppMenuComponent implements OnInit {

src/app/layout/app.menuitem.component.ts

@@ -1,14 +1,17 @@
 import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import {NavigationEnd, Router, RouterModule} from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { MenuService } from './app.menu.service';
 import { LayoutService } from './service/app.layout.service';
+import {CommonModule} from '@angular/common';
 
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: '[app-menuitem]',
+    standalone: true,
+    imports: [CommonModule, RouterModule],
     template: `
 		<ng-container>
             <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div>
@@ -18,9 +21,9 @@ import { LayoutService } from './service/app.layout.service';
 				<span class="layout-menuitem-text">{{item.label}}</span>
 				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
 			</a>
-			<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.class" 
+			<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.class"
 			   [routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
-               [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" 
+               [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
                [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
                [attr.target]="item.target" tabindex="0" pRipple>
 				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
@@ -131,7 +134,7 @@ export class AppMenuitemComponent implements OnInit, OnDestroy {
         return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
     }
 
-    @HostBinding('class.active-menuitem') 
+    @HostBinding('class.active-menuitem')
     get activeClass() {
         return this.active && !this.root;
     }

src/app/layout/app.sidebar.component.ts

@@ -1,8 +1,11 @@
 import { Component, ElementRef } from '@angular/core';
 import { LayoutService } from "./service/app.layout.service";
+import {AppMenuComponent} from './app.menu.component';
 
 @Component({
     selector: 'app-sidebar',
+    standalone: true,
+    imports: [AppMenuComponent],
     templateUrl: './app.sidebar.component.html'
 })
 export class AppSidebarComponent {

src/app/layout/app.topbar.component.ts

@@ -1,9 +1,13 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { LayoutService } from "./service/app.layout.service";
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
 
 @Component({
     selector: 'app-topbar',
+    standalone: true,
+    imports: [CommonModule, RouterModule],
     templateUrl: './app.topbar.component.html'
 })
 export class AppTopBarComponent {

src/app/layout/config/app.config.component.ts

@@ -1,9 +1,24 @@
 import { Component, Input } from '@angular/core';
 import { LayoutService } from '../service/app.layout.service';
 import { MenuService } from '../app.menu.service';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {SidebarModule} from 'primeng/sidebar';
+import {RadioButtonModule} from 'primeng/radiobutton';
+import {ButtonModule} from 'primeng/button';
+import {InputSwitchModule} from 'primeng/inputswitch';
 
 @Component({
     selector: 'app-config',
+    standalone: true,
+    imports: [
+      CommonModule,
+      FormsModule,
+      SidebarModule,
+      RadioButtonModule,
+      ButtonModule,
+      InputSwitchModule
+    ],
     templateUrl: './app.config.component.html',
 })
 export class AppConfigComponent {

src/app/layout/config/config.module.ts

@@ -1,23 +1,9 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { SidebarModule } from 'primeng/sidebar';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import { ButtonModule } from 'primeng/button';
-import { InputSwitchModule } from 'primeng/inputswitch';
 import { AppConfigComponent } from './app.config.component';
 
 @NgModule({
     imports: [
-        CommonModule,
-        FormsModule,
-        SidebarModule,
-        RadioButtonModule,
-        ButtonModule,
-        InputSwitchModule
-    ],
-    declarations: [
-        AppConfigComponent
+        AppConfigComponent,
     ],
     exports: [
         AppConfigComponent