@cityway/bo-ui 1.0.0 → 1.0.1

package/src/lib/components/layout/header/header.component.html

@@ -0,0 +1,71 @@
+<header role="banner" class="header">
+  <form [formGroup]="formHeader">
+    <nav class="navbar custom-navbar bg-faded main-header">
+      <button type="button" class="btn btn-primary menu-link" (click)="onClick()"
+        [title]="isMenuOpened ? ('_COMMON._MENU.BTN_MAIN_MENU_CLOSE' | translate) : ('_COMMON._MENU.BTN_MAIN_MENU_OPEN' | translate)">
+        <span class="bo-icons" [ngClass]="isMenuOpened ? 'bo-menu-expanded' : 'bo-menu-collapsed' "
+          aria-hidden="true"></span>
+        <span class="visually-hidden">{{ '_COMMON._MENU.BTN_MAIN_MENU' | translate}}</span>
+      </button>
+
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb align-items-center">
+          <li class="breadcrumb-item">
+            <a href="/#">
+              <span class="optyweb cw-nav-home d-block d-md-none" aria-hidden="true"></span>
+              <span class="visually-hidden d-block d-md-none">{{ "_COMMON._BREADCRUMB.HOME" | translate }}</span>
+              <span class="d-none d-md-block">{{ "_COMMON._BREADCRUMB.HOME" | translate }}</span>
+            </a>
+          </li>
+          <li *ngFor="let item of getMenus(parent)" class="breadcrumb-item active">
+            <a *ngIf="!item.disabled" [routerLink]="item.link" href="#">{{item.title | translate}}</a>
+            <span *ngIf="item.disabled">{{item.title | translate}}</span>
+          </li>
+          <li aria-current="page" class="breadcrumb-item active navbar-heading">
+            <h1>{{ heading | translate:headingUrlParamsOptions }}</h1>
+          </li>
+        </ol>
+      </nav>
+
+      <span class="me-auto"></span>
+
+      <ul class="navbar-nav">
+
+        <li class="nav-item ms-0" ngbDropdown placement="right">
+          <button class="header-login d-flex align-items-center btn btn-light" id="language"
+            ngbDropdownToggle type="button">
+            <span class="optyweb cw-misc-man2 header-avatar" aria-hidden="true"></span>
+            <span class="header-indicator">
+              <span class="bo-icons bo-alert-success" aria-hidden="true"></span>
+              <span class="visually-hidden">{{ '_COMMON._USER.LBL_LOGGED' | translate }}</span>
+              <!-- <img src="assets/images/common/check-mark.svg" [alt]="'_COMMON._USER.LBL_LOGGED' | translate"
+                class="header-indicator" width="15" height="15"> -->
+              </span>
+            <span class="d-none d-lg-inline-block ms-3 me-1">{{ loginName }}</span>
+          </button>
+          <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
+            <div class="dropdown-header font-md d-md-none">
+              <span>{{ loginName }}</span>
+            </div>
+            <a class="dropdown-item" href="javascript:;">
+              <span>{{'_COMMON._USER.LBL_SETTINGS' | translate}}</span>
+            </a>
+            <a class="dropdown-item" href="javascript:;">
+              <span>{{'_COMMON._USER.LBL_PROFILE' | translate}}</span>
+            </a>
+            <a class="dropdown-item" href="javascript:;">
+              <span>{{'_COMMON._USER.LBL_NOTIFICATIONS' | translate}}</span>
+            </a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="javascript:;">
+              <span>{{'_COMMON._USER.LBL_HELP' | translate}}</span>
+            </a>
+            <a class="dropdown-item" href="javascript:;">
+              <span>{{ '_COMMON._ACTION.SIGN_OUT' | translate }}</span>
+            </a>
+          </div>
+        </li>
+      </ul>
+    </nav>
+  </form>
+</header>

package/src/lib/components/layout/header/header.component.ts

@@ -0,0 +1,95 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { JwtHelperService } from '@auth0/angular-jwt';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { User } from 'oidc-client';
+import { Parent } from '../admin-layout/admin-layout.component';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    RouterModule,
+    CommonModule,
+    TranslateModule,
+    NgbDropdownModule
+  ]
+})
+
+export class HeaderComponent implements OnInit, OnChanges {
+  @Input() heading: string;
+  @Input() headingUrlParamsOptions: Array<string>;
+  @Input() parent: any;
+  @Input() isMenuOpened: boolean;
+  @Output() toggleSidenav = new EventEmitter<void>();
+
+  public parentTitle: string | Array<string>;
+  public parentLink: string | Array<string>;
+  public loadMenu: boolean;
+  public extractedBy: string;
+  public loginName: string;
+  public formHeader: UntypedFormGroup;
+  public lang: string;
+
+  private jwtHelper: JwtHelperService;
+
+  constructor(
+    public translateService: TranslateService,
+    private fb: UntypedFormBuilder,
+  ) {
+    this.parent = null;
+    this.jwtHelper = new JwtHelperService();
+  }
+
+  ngOnInit() {
+    this.formHeader = this.fb.group({
+      lang: ['fr', Validators.compose([Validators.required])],
+    });
+    this.loginName = 'Admin';
+  }
+
+  public changeLang(lang: string) {
+    localStorage.setItem('lang', lang);
+    this.lang = lang;
+    this.translateService.setDefaultLang(lang);
+    this.translateService.use(lang);
+  }
+
+  ngOnChanges(simpleChanges: SimpleChanges) {
+    // Si il y a un changement et que la variable envoye par le parent a une currentValue
+    if (simpleChanges && simpleChanges['parent'] && simpleChanges['parent'].currentValue) {
+      // attribution des datas a nos variables pour notre HTML
+      this.parentLink = simpleChanges['parent'].currentValue.link;
+      this.parentTitle = simpleChanges['parent'].currentValue.title;
+    }
+
+    // Si il y a un changement et que la variable envoye par le parent a une currentValue
+    if (simpleChanges && simpleChanges['heading'] && simpleChanges['heading'].currentValue) {
+      // Attribution des datas a nos variables pour notre HTML
+      this.heading = simpleChanges['heading'].currentValue;
+      // Si la variable du parent (parent) n'as pas change
+      if (!simpleChanges['heading']) {
+        // alors on la supprime pour le cote HTML
+        delete this.parent;
+      }
+    }
+  }
+
+  /** Renvoie un tableau de menus */
+  getMenus(parent: Parent | Array<Parent>) {
+    if (parent === null || parent === undefined) {
+      return new Array();
+    }
+    // Soit 1 element , soit 1 tableau en entée
+    return parent instanceof Array ? parent : new Array(parent);
+  }
+
+  public onClick() {
+    this.toggleSidenav.emit()
+  }
+}

package/src/lib/components/layout/menu/menu.component.html

@@ -0,0 +1,115 @@
+<!-- <ul class="navigation" appAccordion>
+  <ng-container *ngFor="let menuitem of menus; index as Index">
+    <ng-container *ngIf="!menuitem.hide">
+      <li *ngIf="menuitem.type !== 'divider' && menuitem.type !== 'title'" appAccordionLink [group]="menuitem.state"
+        [ngClass]="menuitem.state.includes(currentRoute) ? 'navigation-item menu-opened' : 'navigation-item'" routerLinkActive="active"> -->
+        <!-- INTERNAL LINK -->
+        <!-- <a *ngIf="menuitem.type === 'link' && isOpened" [ngClass]="{'disabled': menuitem.disabled}" class="navigation-link"
+          [routerLink]="menuitem.state">
+          <ng-container [ngTemplateOutlet]="menuItem"></ng-container>
+        </a>
+        <a *ngIf="menuitem.type === 'link' && !isOpened" [ngClass]="{'disabled': menuitem.disabled}" class="navigation-link"
+          [routerLink]="menuitem.state" placement="right" [ngbTooltip]="menuitem.name | translate" container="body"
+          tooltipClass="menu-tooltip">
+          <ng-container [ngTemplateOutlet]="menuItem"></ng-container>
+        </a> -->
+        <!-- EXTERNAL LINK ou EXTERNAL LINK IN A TAB-->
+        <!-- <a *ngIf="menuitem.type === 'extLink' || menuitem.type === 'extTabLink' && isOpened" class="navigation-link"
+          [href]="menuitem.state" [attr.target]="menuitem.type === 'extTabLink' ? '_blanck' : null">
+          <ng-container [ngTemplateOutlet]="menuItem"></ng-container>
+        </a>
+        <a *ngIf="menuitem.type === 'extLink' || menuitem.type === 'extTabLink' && !isOpened" class="navigation-link"
+          [href]="menuitem.state" [attr.target]="menuitem.type === 'extTabLink' ? '_blanck' : null"
+          placement="right" [ngbTooltip]="menuitem.name | translate" container="body"
+          tooltipClass="menu-tooltip">
+          <ng-container [ngTemplateOutlet]="menuItem"></ng-container>
+        </a> -->
+
+<!--
+        <ng-template #menuItem>
+          <span class="{{ menuitem.icon }} me-3 icon" aria-hidden="true"></span>
+          <span class="title me-auto">{{ menuitem.name | translate }}</span>
+          <span *ngFor="let badge of menuitem.badge" class="badge badge-{{ badge.type }} me-3">{{ badge.value }}</span>
+        </ng-template>
+
+        <ng-container *ngIf="isOpened">
+          <button *ngIf="menuitem.type === 'sub' || menuitem.type === 'sub-reorder'" type="button" class="navigation-link btn navigation-btn"
+            (click)="onShow(Index)" [ngClass]="isCollapsed[Index] ? 'collapsed' : ''"
+            [attr.aria-expanded]="!isCollapsed[Index]" aria-controls="collapseExample">
+            <ng-container [ngTemplateOutlet]="menuItem"></ng-container>
+            <span class="menu-caret optyweb cw-nav-collapse2" aria-hidden="true"></span>
+          </button>
+          <ul *ngIf="menuitem.type === 'sub'" class="navigation-submenu" [ngbCollapse]
+            [(ngbCollapse)]="isCollapsed[Index]">
+            <ng-container *ngFor="let childitem of menuitem.children">
+              <li *ngIf="!childitem.hide" class="navigation-item" routerLinkActive="active"
+                [ngClass]="{disabled: childitem.disabled}">
+                <a [routerLink]="['/', menuitem.state, childitem.state ]" class="navigation-submenu-link">
+                  {{ childitem.name | translate }}
+                </a>
+              </li>
+            </ng-container>
+          </ul>
+          <ul *ngIf="menuitem.type === 'sub-reorder'" class="navigation-submenu" [ngbCollapse]
+            [(ngbCollapse)]="isCollapsed[Index]">
+            <ng-container *ngFor="let childitem of menuitem.children">
+              <li *ngIf="!childitem.hide" class="navigation-item" routerLinkActive="active"
+                [ngClass]="{disabled: childitem.disabled}">
+                <a [routerLink]="childitem.state" class="navigation-submenu-link">
+                  {{ childitem.name | translate }}
+                </a>
+              </li>
+            </ng-container>
+          </ul>
+        </ng-container>
+      </li>
+
+      <ng-container *ngIf="!isOpened">
+        <li ngbDropdown *ngIf="menuitem.type !== 'divider' && menuitem.type !== 'title'" appAccordionLink
+          [group]="menuitem.state" class="navigation-dropdown" [autoClose]="true"
+          [container]="'body'" [dropdownClass]="'navigation-submenu-dropdown'" routerLinkActive="active" #myDrop="ngbDropdown"
+          (mouseenter)="$event.stopPropagation(); myDrop.open();" (mouseleave)="$event.stopPropagation(); myDrop.close();">
+          <button *ngIf="menuitem.type === 'sub' || menuitem.type === 'sub-reorder'" type="button" class="navigation-link btn navigation-btn"
+            id="dropdownBasic1" ngbDropdownToggle (click)="onShow(Index)">
+            <span class="{{ menuitem.icon }} me-3 icon" aria-hidden="true"></span>
+            <span class="title me-auto">{{ menuitem.name | translate }}</span>
+            <span *ngFor="let badge of menuitem.badge" class="badge badge-{{ badge.type }} me-3">{{ badge.value
+              }}</span>
+            <span class="menu-caret optyweb cw-nav-expand2" aria-hidden="true"></span>
+          </button>
+          <ul ngbDropdownMenu *ngIf="menuitem.type === 'sub'" class="navigation-submenu"
+            [ngClass]="'navigation-submenu-collapsed'"
+            (mouseenter)="$event.stopPropagation(); myDrop.open();" (mouseleave)="$event.stopPropagation(); myDrop.close();">
+            <ng-container *ngFor="let childitem of menuitem.children">
+              <li *ngIf="!childitem.hide" class="navigation-item" routerLinkActive="active"
+                [ngClass]="{disabled: childitem.disabled}">
+                <a [routerLink]="['/', menuitem.state, childitem.state ]" class="navigation-submenu-link" ngbDropdownItem>
+                  {{ childitem.name | translate }}
+                </a>
+              </li>
+            </ng-container>
+          </ul>
+          <ul ngbDropdownMenu *ngIf="menuitem.type === 'sub-reorder'" class="navigation-submenu"
+            [ngClass]="'navigation-submenu-collapsed'"
+            (mouseenter)="$event.stopPropagation(); myDrop.open();" (mouseleave)="$event.stopPropagation(); myDrop.close();">
+            <ng-container *ngFor="let childitem of menuitem.children">
+              <li *ngIf="!childitem.hide" class="navigation-item" routerLinkActive="active"
+                [ngClass]="{disabled: childitem.disabled}">
+                <a [routerLink]="childitem.state" class="navigation-submenu-link" ngbDropdownItem>
+                  {{ childitem.name | translate }}
+                </a>
+              </li>
+            </ng-container>
+          </ul>
+        </li>
+      </ng-container>
+
+      <li *ngIf="menuitem.type === 'divider'" class="navigation-item">
+        <hr />
+      </li>
+      <li *ngIf="menuitem.type === 'title'" class="navigation-item">
+        <span class="navigation-title">{{ menuitem.name | translate }}</span>
+      </li>
+    </ng-container>
+  </ng-container>
+</ul> -->

package/src/lib/components/layout/menu/menu.component.ts

@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { NgbCollapseModule, NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { NgxPermissionsService } from 'ngx-permissions';
+import { AccordionDirective, AccordionLinkDirective } from '../menu-accordion';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    NgbTooltipModule,
+    NgbCollapseModule,
+    NgbDropdownModule,
+    AccordionLinkDirective,
+    TranslateModule,
+    AccordionLinkDirective,
+    AccordionDirective
+  ]
+})
+export class MenuComponent {
+
+  // @Input() isOpened = true;
+
+  // public menus: MenuItem[];
+  // public currentRoute: string;
+	// public isCollapsed: boolean [] = [];
+
+  // constructor(
+  //   public menuService: MenuService,
+  //   public translate: TranslateService,
+  //   private permissionStoreService: NgxPermissionsService,
+  //   private router: Router
+  // ) {
+
+  //   this.menus = this.menuService.getAll();
+  //   this.menuService.menu$.subscribe({ next: menu => this.menus = menu });
+
+  //   this.currentRoute = this.router.url.split('/')[1];
+  //   // check for permissions
+  //   this.menus.forEach(menu => {
+  //     if(this.currentRoute && menu.state.includes(this.currentRoute)) {
+  //       this.isCollapsed.push(false);
+  //     } else {
+  //       this.isCollapsed.push(true);
+  //     }
+  //     if (menu.permissions) {
+  //       this.permissionStoreService.hasPermission(menu.permissions).then(hasPermission => menu.hide = !hasPermission);
+  //     }
+  //     if (menu.children) {
+  //       menu.children.forEach(childMenu => {
+  //         if (childMenu.permissions) {
+  //           this.permissionStoreService.hasPermission(childMenu.permissions).then(r => childMenu.hide = !r);
+  //         }
+  //       });
+  //     }
+  //   });
+  //   router.events.subscribe(() => this.currentRoute = null);
+  // }
+
+
+  // public onShow(index): void {
+  //   this.menus.forEach((menu, indexMenu) => {
+  //     if (indexMenu !== index) {
+  //      this.isCollapsed[indexMenu] = true;
+  //     }
+  //   });
+  //   this.isCollapsed[index] = !this.isCollapsed[index];
+  // }
+
+}

package/src/lib/components/layout/menu-accordion/accordion.directive.ts

@@ -0,0 +1,57 @@
+
+import { filter } from 'rxjs/operators';
+import { AfterContentChecked, AfterViewInit, Directive, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+
+
+import { AccordionLinkDirective } from './accordionlink.directive';
+
+@Directive({
+  selector: '[appAccordion]',
+  standalone: true
+})
+export class AccordionDirective implements AfterContentChecked {
+
+  protected navlinks: AccordionLinkDirective[] = [];
+
+  constructor(private router: Router) {
+    setTimeout(() => this.checkOpenLinks());
+  }
+
+  ngAfterContentChecked(): void {
+    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((e) => this.checkOpenLinks());
+  }
+
+  closeOtherLinks(openLink: AccordionLinkDirective): void {
+    this.navlinks.forEach((link: AccordionLinkDirective) => {
+      if (link !== openLink) {
+        link.open = false;
+      }
+    });
+  }
+
+  addLink(link: AccordionLinkDirective): void {
+    this.navlinks.push(link);
+  }
+
+  removeGroup(link: AccordionLinkDirective): void {
+    const index = this.navlinks.indexOf(link);
+    if (index !== -1) {
+      this.navlinks.splice(index, 1);
+    }
+  }
+
+  checkOpenLinks() {
+    this.navlinks.forEach((link: AccordionLinkDirective) => {
+      if (link.group) {
+        const routeUrl = this.router.url;
+        const currentUrl = routeUrl.split('/');
+        if (currentUrl.indexOf(link.group) > 0) {
+          link.open = true;
+          this.closeOtherLinks(link);
+        }
+      }
+    });
+  }
+
+}

package/src/lib/components/layout/menu-accordion/accordionanchor.directive.ts

@@ -0,0 +1,21 @@
+import { Directive, HostListener, Inject } from '@angular/core';
+
+import { AccordionLinkDirective } from './accordionlink.directive';
+
+@Directive({
+  selector: '[appAccordionToggle]',
+  standalone: true
+})
+export class AccordionAnchorDirective {
+
+  protected navlink: AccordionLinkDirective;
+
+  constructor( @Inject(AccordionLinkDirective) navlink: AccordionLinkDirective) {
+    this.navlink = navlink;
+  }
+
+  @HostListener('click', ['$event'])
+  onClick(e: any) {
+    this.navlink.toggle();
+  }
+}

package/src/lib/components/layout/menu-accordion/accordionlink.directive.ts

@@ -0,0 +1,45 @@
+import { Directive, HostBinding, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { AccordionDirective } from './accordion.directive';
+
+
+@Directive({
+  selector: '[appAccordionLink]',
+  standalone: true
+})
+export class AccordionLinkDirective implements OnInit, OnDestroy {
+
+  @Input() public group: any;
+
+  @HostBinding('class.open')
+
+  protected _open: boolean;
+  protected nav: AccordionDirective;
+
+  constructor(@Inject(AccordionDirective) nav: AccordionDirective) {
+    this.nav = nav;
+  }
+
+  @Input()
+  get open(): boolean {
+    return this._open;
+  }
+
+  set open(value: boolean) {
+    this._open = value;
+    if (value) {
+      this.nav.closeOtherLinks(this);
+    }
+  }
+
+  ngOnInit(): any {
+    this.nav.addLink(this);
+  }
+
+  ngOnDestroy(): any {
+    this.nav.removeGroup(this);
+  }
+
+  toggle(): any {
+    this.open = !this.open;
+  }
+}

package/src/lib/components/layout/menu-accordion/index.ts

@@ -0,0 +1,3 @@
+export * from './accordionanchor.directive';
+export * from './accordionlink.directive';
+export * from './accordion.directive';

package/src/lib/components/layout/sidebar/sidebar.component.html

@@ -0,0 +1,62 @@
+<div class="sidebar-scroll">
+  <div class="sidebar">
+    <nav class="navbar custom-navbar main-brand justify-content-center text-center">
+      <a class="navbar-brand text-decoration-none" [routerLink]="['/']" [ngClass]="{'invisible': !isOpened}">
+        <div class="navbar-brand-name text-wrap">
+          <!-- {{ configuration.appSettings.name }} -->
+        </div>
+        <div class="navbar-brand-project">
+          <!-- {{ configuration.appSettings.clientName }} -->
+        </div>
+      </a>
+      <button type="button" class="btn btn-primary btn-close-menu d-lg-none" (click)="onClick()">
+        <span class="optyweb cw-toolbar-close1" aria-hidden="true"></span>
+        <span class="visually-hidden">{{ '_COMMON._SIDEBAR.CLOSE_BTN' | translate }}</span>
+      </button>
+    </nav>
+
+    <!-- main navigation -->
+    <!-- <nav *ngIf="menuService.menu$ | async" class="main-menu">
+      <app-menu [isOpened]="isOpened"></app-menu>
+    </nav> -->
+
+    <nav class="navbar custom-navbar sidebar-footer bg-white" [ngClass]="{'sidebar-footer-closed': !isOpened}">
+      <ul class="navbar-nav w-100">
+        <!-- <li class="nav-item">
+          <a class="btn nav-link d-flex" href="assets/docs/fr/manuel.pdf" container="body" type="button"
+            [ngbTooltip]="'_COMMON._USER.LBL_USER_MANUAL' | translate" [placement]="isOpened ? 'top' : 'right'">
+            <span class="bo-icons bo-manual" aria-hidden="true"></span>
+            <span class="visually-hidden">{{ '_COMMON._USER.LBL_USER_MANUAL' | translate }}</span>
+          </a>
+        </li>
+        <ng-container *ngIf="authService.isLoggedIn()">
+          <li class="nav-item">
+            <button (click)="authService.logout()" class="btn nav-link d-flex" container="body" type="button"
+              [ngbTooltip]="'_COMMON._APPLICATION.LOGOUT' | translate" [placement]="isOpened ? 'top' : 'right'">
+              <span class="optyweb cw-nav-connexion" aria-hidden="true"></span>
+              <span class="visually-hidden">{{ '_COMMON._APPLICATION.LOGOUT' | translate }}</span>
+            </button>
+          </li>
+        </ng-container>
+        <ng-container *ngIf="!authService.isLoggedIn()">
+          <li class="nav-item">
+            <button (click)="authService.startAuthentication()" class="btn nav-link d-flex" container="body"
+              type="button" [ngbTooltip]="'_COMMON._APPLICATION.LOGIN' | translate"
+              [placement]="isOpened ? 'top' : 'right'">
+              <span class="optyweb cw-nav-connexion" aria-hidden="true"></span>
+              <span class="visually-hidden">{{ '_COMMON._APPLICATION.LOGIN' | translate }}</span>
+            </button>
+          </li>
+        </ng-container>
+        <li class="nav-item docked-hidden">
+          <a [href]="configuration.authentication.portalSettings.urlApplications" class="nav-link d-flex"
+            container="body" [ngbTooltip]="'_COMMON._APPLICATION.CHANGE' | translate"
+            [placement]="isOpened ? 'top' : 'right'">
+            <span class="bo-icons bo-change-app" aria-hidden="true"></span>
+            <span class="visually-hidden">{{ '_COMMON._APPLICATION.CHANGE' | translate }}</span>
+          </a>
+        </li> -->
+      </ul>
+    </nav>
+  </div>
+</div>

package/src/lib/components/layout/sidebar/sidebar.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { MenuComponent } from '../menu/menu.component';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    MenuComponent,
+    NgbTooltipModule,
+    CommonModule,
+    RouterModule
+  ]
+})
+export class SidebarComponent {
+
+  @Output() toggleSidenav = new EventEmitter<void>();
+  @Input() isOpened: boolean;
+
+  public onClick() {
+    this.toggleSidenav.emit()
+  }
+}

package/src/lib/components/layout/skip-links/skip-links.component.html

@@ -0,0 +1,3 @@
+<div class="skip-links">
+  <a href="#content">{{ '_COMMON._SKIP_LINKS.CONTENT' | translate }}</a>
+</div>

package/src/lib/components/layout/skip-links/skip-links.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkipLinksComponent } from './skip-links.component';
+
+describe('SkipLinksComponent', () => {
+  let component: SkipLinksComponent;
+  let fixture: ComponentFixture<SkipLinksComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SkipLinksComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SkipLinksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/layout/skip-links/skip-links.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-skip-links',
+  templateUrl: './skip-links.component.html',
+  standalone: true,
+  imports: [
+    TranslateModule
+  ]
+})
+export class SkipLinksComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/components/layout/title-breadcrumb/title-breadcrumb.component.html

@@ -0,0 +1,10 @@
+<div class="bg-white border-bottom px-3 py-3">
+  <h1>{{heading}}</h1>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="#">{{ 'GENERIC.HOME' | translate}}</a></li>
+      <li class="breadcrumb-item">{{ 'GENERIC.HOME' | translate}}</li>
+      <li class="breadcrumb-item active" aria-current="page">{{ heading | uppercase | translate }}</li>
+    </ol>
+    </nav>
+</div>