@indice/ng-components 0.2.139 → 0.2.141

package/src/lib/directives/screen-size.directive.ts

@@ -1,67 +0,0 @@
-import { Directive, ElementRef, HostListener, AfterViewInit, Input, TemplateRef, ViewContainerRef } from '@angular/core';
-import { ScreenSizeService } from '../services/screen-size-service';
-import { IScreenSize, SCREEN_SIZE } from '../types';
-
-@Directive({
-  // tslint:disable-next-line:directive-selector
-  selector: '[visibleForScreen]'
-})
-export class ScreenSizeDirective implements AfterViewInit {
-  private hasView = false;
-  private prefix = 'is-';
-  private sizes: IScreenSize[] = [
-    {
-      id: SCREEN_SIZE.XS, name: 'xs',
-      css: `d-block d-sm-none`
-    }, {
-      id: SCREEN_SIZE.SM, name: 'sm',
-      css: `d-none d-sm-block d-md-none`
-    }, {
-      id: SCREEN_SIZE.MD, name: 'md',
-      css: `d-none d-md-block d-lg-none`
-    }, {
-      id: SCREEN_SIZE.LG, name: 'lg',
-      css: `d-none d-lg-block d-xl-none`
-    }, {
-      id: SCREEN_SIZE.XL, name: 'xl',
-      css: `d-none d-xl-block`
-    }
-  ];
-
-  @Input() set visibleForScreen(size: string) {
-    this.updateElementVisibility(size);
-  }
-
-  private currentSize: IScreenSize | undefined = undefined;
-  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }
-
-  @HostListener('window:resize', [])
-  private onResize(): void {
-    this.detectScreenSize();
-  }
-
-  public ngAfterViewInit(): void {
-    this.detectScreenSize();
-  }
-
-  private detectScreenSize(): void {
-    this.currentSize = this.sizes.find(x => {
-      const el = this.viewContainer.element.nativeElement.querySelector(`.${this.prefix}${x.id}`);
-      const isVisible = window.getComputedStyle(el).display !== 'none';
-      return isVisible;
-    });
-    //console.log('detectScreenSize', this.currentSize);
-  }
-
-  private updateElementVisibility(target: string): void {
-    // if it should be rendered and it is not already rendered
-    // DO IT, DO IT NOWWWW
-    if (!this.hasView && this.currentSize && this.currentSize.name === target) {
-      this.viewContainer.createEmbeddedView(this.templateRef);
-      this.hasView = true;
-    } else {
-      this.viewContainer.clear();
-      this.hasView = false;
-    }
-  }
-}

package/src/lib/helpers/base-list.component.ts

@@ -1,204 +0,0 @@
-import { Observable, Subscription, of } from 'rxjs';
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { HeaderMetaItem, IResultSet, MenuOption, RouterViewAction, ViewAction, ListViewType } from '../types';
-import { Icons } from '../icons';
-
-@Component({ template: '' })
-export abstract class BaseListComponent<T> implements OnInit, OnDestroy {
-  public items: T[] | null | undefined = null;
-  public view: string = ListViewType.Tiles;
-  public title: string | null = null;
-  public actions: ViewAction[] = [];
-  public loaderItems: any[] = [1, 2, 3, 4, 5];
-  public page = 1;
-  public pageSize = 20;
-  public count = 0;
-  public sort: string | null = '';
-  public sortdir: string | null = '-';
-  public search: string | null = '';
-  public sortOptions: MenuOption[] = [];
-  public metaItems: HeaderMetaItem[] = [];
-  public abstract newItemLink: string | null;
-  private routeSub$: Subscription | undefined;
-
-  constructor(private route$: ActivatedRoute, private router$: Router) {
-  }
-
-  ngOnDestroy(): void {
-    if (this.routeSub$) {
-      this.routeSub$.unsubscribe();
-    }
-  }
-
-  public getViewActions(): Observable<ViewAction[]> {
-    const actions = [
-      new ViewAction('search', null, null, Icons.Search, 'αναζήτηση'),
-      new ViewAction('refresh', null, null, Icons.Refresh, 'ανανέωση στοιχείων')
-    ];
-    if (this.newItemLink) {
-      actions.push(new RouterViewAction(Icons.Add, this.newItemLink, 'rightpane', 'προσθήκη νέας εγγραφής;'));
-    }
-    return of(actions);
-  }
-
-  ngOnInit(): void {
-    this.getViewActions().subscribe(actions => {
-      this.actions = actions || [];
-    });
-
-    this.metaItems = [
-      { key: 'count', icon: Icons.ItemsCount, text: 'παρακαλώ περιμένετε...' }
-    ];
-
-    // disabled external route changes monitoring due to sync issues - which is bad :) - refresh from url will not work
-    // until i come up with a solution...
-
-    this.routeSub$ = this.route$.queryParamMap.subscribe(params => {
-      if (params.keys.length === 0) {
-        return;
-      }
-
-      // changing the view mode does not require reloading...
-      this.view = params.get('view') || ListViewType.Tiles;
-      // console.log('route changes ', this.view);
-
-      // if (params.get('search') !== this.search) {
-      //   this.searchChanged(params.get('search'));
-      // }
-
-      // const page = +(params.get('page') || 1);
-      // if (page !== this.page) {
-      //   this.page = page;
-      // }
-
-      // const size = +(params.get('pagesize') || 20);
-      // if (this.pageSize !== size) {
-      //   this.pageSize = size;
-      // }
-
-      // if (params.get('search') !== this.search) {
-      //   this.search = params.get('search');
-      // }
-
-      // if (params.get('sort') !== this.sort) {
-      //   this.sort = params.get('sort');
-      // }
-
-      // if (params.get('sortdir') !== this.sortdir) {
-      //   this.sortdir = params.get('sortdir');
-      // }
-
-    });
-
-    // just to sync params in query
-    this.setRouteParams(true);
-    this.load();
-  }
-
-  private setRouteParams(locationChange: boolean = false): void {
-    this.router$.navigate([], {
-      relativeTo: this.route$, queryParams: {
-        view: this.view,
-        page: this.page,
-        pagesize: this.pageSize,
-        search: this.search,
-        sort: this.sort,
-        dir: this.sortdir
-      }, queryParamsHandling: 'merge', skipLocationChange: locationChange
-    });
-  }
-
-  public actionHandler($event: ViewAction): void {
-    // console.log('BaseListComponent actionHandler', $event);
-    if ($event.key === 'refresh') {
-      this.refresh();
-    }
-  }
-
-  private load(): void {
-    // console.log('BaseListComponent LOAD');
-    this.count = 0;
-    this.items = null;
-    this.loadItems().subscribe(result => {
-      this.count = result ? result.count : 0;
-      this.items = result?.items;
-      this.updateHeaderMeta();
-    }, err => {
-      this.count = 0;
-      this.items = null;
-      this.updateHeaderMeta();
-    });
-  }
-
-  private updateHeaderMeta(): void {
-    const count = this.metaItems?.filter(m => m.key === 'count')[0];
-    if (count) {
-      this.count === 1 ? count.text = `${this.count} αποτέλεσμα` : count.text = `${this.count} αποτελέσματα`;
-    }
-  }
-
-  public abstract loadItems(): Observable<IResultSet<T> | null | undefined>;
-
-  public clear(): void {
-    this.count = 0;
-    this.page = 1;
-    this.items = null;
-    this.search = null;
-    this.setRouteParams();
-    this.load();
-  }
-
-  public refresh(): void {
-    this.count = 0;
-    this.page = 1;
-    this.items = null;
-    this.setRouteParams();
-    this.load();
-  }
-
-  public pageChanged(page: number): void {
-    if (this.page !== page) {
-      this.page = page;
-      this.setRouteParams();
-      this.load();
-    }
-  }
-
-  public pageSizeChanged(pageSize: number): void {
-    if (this.pageSize !== pageSize) {
-      this.pageSize = pageSize;
-      this.page = 1;
-      this.setRouteParams();
-      this.refresh();
-    }
-  }
-
-  public sortChanged(sort: string): void {
-    // console.log('base-list sortChanged', sort);
-    if (this.sort !== sort) {
-      this.page = 1;
-      this.sort = sort;
-      this.setRouteParams();
-      this.refresh();
-    }
-  }
-
-  public sortdirChanged(sortdir: string): void {
-    if (this.sortdir !== sortdir) {
-      this.page = 1;
-      this.sortdir = sortdir;
-      this.setRouteParams();
-      this.refresh();
-    }
-  }
-
-  public searchChanged(searchText: string | null): void {
-    this.count = 0;
-    this.page = 1;
-    this.items = null;
-    this.search = searchText;
-    this.setRouteParams();
-    this.load();
-  }
-}

package/src/lib/icons.ts

@@ -1,39 +0,0 @@
-export class Icons {
-  // https://uifabricicons.azurewebsites.net/
-  public static Dashboard = `ms-Icon ms-Icon--HomeGroup `;
-  public static Locations = `ms-Icon ms-Icon--MapPin `;
-  public static ChargePoints = `ms-Icon ms-Icon--ChatBot `;
-  public static Transations = `ms-Icon ms-Icon--PaymentCard `;
-  public static Badges = `ms-Icon ms-Icon--IDBadge `;
-
-  public static Information = `ms-Icon ms-Icon--Info`;
-  public static Refresh = `ms-Icon ms-Icon--Refresh`;
-  public static Search = `ms-Icon ms-Icon--Search`;
-  public static Add = `ms-Icon ms-Icon--Add`;
-  public static Delete = `ms-Icon ms-Icon--Delete`;
-  public static SendEmail = `ms-Icon ms-Icon--NewMail`;
-  public static Filter = `ms-Icon ms-Icon--Filter`;
-  public static Export = `ms-Icon ms-Icon--ExcelDocument`;
-  public static Import = `ms-Icon ms-Icon--PeopleAdd`;
-
-  public static TilesView = `ms-Icon ms-Icon--AppIconDefault`;
-  public static TableView = `ms-Icon ms-Icon--Table`;
-  public static MapView = `ms-Icon ms-Icon--MapPin`;
-  public static EntryView = `ms-Icon ms-Icon--EntryView`;
-
-  public static Separator = `ms-Icon ms-Icon--Separator text-white`;
-
-  public static ItemsCount = 'ms-Icon ms-Icon--Boards';
-
-  public static Heart = 'ms-Icon ms-Icon--Heart';
-  public static HeartBroken = 'ms-Icon ms-Icon--HeartBroken';
-  public static DateTime = 'ms-Icon ms-Icon--ReminderTime';
-
-  public static Expand = 'ms-Icon ms-Icon--ChevronDown';
-  public static Collapse = 'ms-Icon ms-Icon--ChevronUp';
-
-  public static SortAsc = 'ms-Icon ms-Icon--Ascending';
-  public static SortDesc = 'ms-Icon ms-Icon--Descending';
-
-  public static Details = ' ms-Icon ms-Icon--AccountActivity'
-}

package/src/lib/layouts/shell/shell-footer/shell-footer.component.html

@@ -1,71 +0,0 @@
-<footer class="shell-footer-component-container">
-  <div class="shell-footer-paddings">
-    <div class="shell-footer-component-container-inner">
-      <div class="shell-footer-sections-container">
-        <div class="shell-footer-section">
-          <img class="shell-footer-logo-h" src="assets/images/branding/indice.png" alt="INDICE logo" />
-          <nav class="mt-4">
-            <ul class="space-y-2">
-              <ng-container *ngFor="let link of links.brand | async">
-                <li>
-                  <a [href]="link.path" class="shell-footer-link">{{ link.text }}</a>
-                </li>
-              </ng-container>
-            </ul>
-          </nav>
-        </div>
-        <div class="shell-footer-section-links">
-          <h5 class="shell-footer-section-title">Legal</h5>
-          <nav class="mt-4">
-            <ul class="grid lg:grid-cols-2">
-              <ng-container *ngFor="let link of links.legal | async">
-                <li class="mb-2">
-                  <a [href]="link.path" class="shell-footer-link">{{ link.text }}</a>
-                </li>
-              </ng-container>
-            </ul>
-          </nav>
-        </div>
-        <div class="shell-footer-section-links">
-          <h5 class="shell-footer-section-title">Follow us</h5>
-          <nav class="mt-4">
-            <ul class="grid lg:grid-cols-2">
-              <li class="mb-2">
-                <a href="#" class="shell-footer-social">
-                  <svg  class="shell-footer-social-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
-                  </svg>
-                  <span> Twitter </span>
-                </a>
-              </li>
-              <li class="mb-2">
-                <a href="#" class="shell-footer-social">
-                  <svg class="shell-footer-social-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
-                    <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"/>
-                  </svg>
-                  <span> Instagram </span>
-                </a>
-              </li>
-              <li class="mb-2">
-                <a href="#" class="shell-footer-social">
-                  <svg class="shell-footer-social-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" >
-                    <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"/>
-                  </svg>
-                  <span> Facebook </span>
-                </a>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </div>
-    </div>
-    <div class="shell-footer-copyright">
-      <!--<nav class="flex flex-wrap justify-center space-x-6">
-      <a href="#" class="font-normal text-sm hover:text-gray-100 mb-2">Cookie settings</a>
-    </nav>-->
-      <p class="text-sm text-center sm:text-right">
-        © 2021 INDICE. All rights reserved.
-      </p>
-    </div>
-  </div>
-</footer>

package/src/lib/layouts/shell/shell-footer/shell-footer.component.ts

@@ -1,14 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { APP_LINKS } from '../../../tokens';
-import { IAppLinks } from '../../../types';
-
-@Component({
-  selector: 'lib-shell-footer',
-  templateUrl: './shell-footer.component.html'
-
-})
-
-export class ShellFooterComponent {
-    constructor(@Inject(APP_LINKS) public links: IAppLinks) {
-    }
-}

package/src/lib/layouts/shell/shell-header/shell-header.component.html

@@ -1,199 +0,0 @@
-<nav>
-  <div class="shell-header-paddings">
-    <div [class]="border ? 'shell-header-border' : ''">
-      <div class="shell-header-menu-container">
-        <div class="shell-header-logo-container">
-          <div>
-            <a href="#" [routerLink]="['/']"><img class="app-logo" [src]="config.appLogo" [alt]="config.appLogoAlt" /></a>
-          </div>
-        </div>
-
-        <div class="shell-header-link-container">
-          <div class="shell-header-link-container-inner">
-            <lib-nav-links-list
-              [links]="sectionLinks"
-              [active-fragment]="activeFragment"
-              [link-class]="'nav-link'"
-              [link-active-class]="'nav-link-active'">
-            </lib-nav-links-list>
-          </div>
-        </div>
-
-        <div *ngIf="langs && langs.length > 1 && currentLang" class="shell-header-links-far-container">
-            <button class="text-blue-300 hover:text-blue-500">
-                <span>{{currentLang}}</span>
-                <i class="text-xs ml-1 ms-Icon ms-Icon--ChevronDown"></i>
-            </button>
-        </div>
-
-        <div class="shell-header-md-visible">
-          <div class="shell-header-links-far-container" (clickOutside)="onClickOutside($event)">
-
-            <lib-nav-links-list
-              [links]="links.profileActions"
-              [active-fragment]="activeFragment"
-              [link-class]="'shell-header-menu-rounded-button'"
-              [link-active-class]="'shell-header-menu-rounded-button-active'">
-            </lib-nav-links-list>
-
-            <!-- <ng-container *ngFor="let link of links.profileActions | async">
-              <a class="shell-header-menu-rounded-button"
-                 (clickOutside)="onClickOutside($event)"
-                 [attr.href]="link.path"
-                 [attr.target]="link.external ? '_blank' : '_self'">
-                <span class="sr-only">{{ link.text }}</span>
-                <i *ngIf="link.icon" [class]="link.icon"></i>
-              </a>
-            </ng-container> -->
-
-            <!-- Username -->
-            <div *ngIf="profileMenuVisible" class="ml-2 relative">
-              <div [ngClass]="{'shell-header-profile': showUserNameOnHeader}">
-                <div *ngIf="user && showUserNameOnHeader" class="shell-header-profile-userName">
-                  {{ user.profile.name }}
-                </div>
-              </div>
-            </div>
-
-            <!-- Notifications dropdown -->
-            <div *ngIf="showAlerts && user" class="ml-2">
-              <lib-notifications-indicator></lib-notifications-indicator>
-            </div>
-
-            <!-- Profile dropdown -->
-            <div *ngIf="profileMenuVisible" class="ml-2 relative" (clickOutside)="onClickOutside($event)">
-              <div [ngClass]="{'shell-header-profile': showUserNameOnHeader}">
-                <button type="button" *ngIf="user" (click)="userMenuExpanded = !userMenuExpanded"
-                        class="shell-header-profile-dropdown-button"
-                        id="user-menu"
-                        aria-expanded="false"
-                        aria-haspopup="true">
-                  <span class="sr-only">Open user menu</span>
-                  <span class="avatar-container">
-                    <span class="avatar-text">{{this.avatarName}}</span>
-                  </span>
-                </button>
-
-                <button type="button"
-                        *ngIf="!user"
-                        (click)="signin(null)"
-                        class="shell-header-profile-dropdown-button"
-                        id="user-menu"
-                        aria-expanded="false"
-                        aria-haspopup="true">
-                  <span class="sr-only">sign in</span>
-                  <span class="avatar-container">
-                    <span class="avatar-text"><i class="ms-Icon ms-Icon--Signin"></i></span>
-                  </span>
-                </button>
-
-                <div *ngIf="userMenuExpanded"
-                     [ngClass]="showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'"
-                     role="menu"
-                     aria-orientation="vertical"
-                     aria-labelledby="user-menu">
-                     <lib-nav-links-list
-                        [links]="links.profile"
-                        [active-fragment]="activeFragment"
-                        [link-class]="'nav-link-profile'"
-                        [link-active-class]="'nav-link-profile-active'">
-                    </lib-nav-links-list>
-                </div>
-
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="mobile-menu-button-container">
-          <!-- Mobile menu button -->
-          <button type="button"
-                  (click)="mobileMenuExpanded = !mobileMenuExpanded"
-                  class="mobile-menu-button"
-                  aria-controls="mobile-menu"
-                  [attr.aria-expanded]="mobileMenuExpanded">
-            <span class="sr-only">Open main menu</span>
-            <!--Heroicon name: outline/menu  Menu open: "hidden", Menu closed: "block"-->
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke="currentColor"
-                 aria-hidden="true"
-                 [class]="mobileMenuExpanded ? 'hidden':'block h-6 w-6'">
-              <path stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-            <!--Heroicon name: outline/x Menu open: "block", Menu closed: "hidden"-->
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke="currentColor"
-                 aria-hidden="true"
-                 [class]="mobileMenuExpanded ? 'block h-6 w-6':'hidden'">
-              <path stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-  <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="mobile-menu-container" *ngIf="mobileMenuExpanded" id="mobile-menu">
-    <lib-nav-links-list
-      [links]="sectionLinks"
-      [active-fragment]="activeFragment"
-      [link-class]="'nav-link-mobile'"
-      [link-active-class]="'nav-link-mobile-active'"
-      [container-class]="'mobile-menu-link-container'">
-    </lib-nav-links-list>
-
-    <div *ngIf="!user">
-      <a href="#" (click)="signin($event)" class="nav-link-mobile">
-        <i class="ms-Icon ms-Icon--Signin mr-2"></i>Σύνδεση
-      </a>
-    </div>
-
-    <div class="mobile-menu-user-info-container" *ngIf="user">
-      <div class="mobile-menu-user-info-container-inner">
-        <div class="flex-shrink-0">
-          <span class="mobile-menu-avatar-container">
-            <span class="mobile-menu-avatar-name">{{ this.avatarName }}</span>
-          </span>
-        </div>
-        <div class="ml-3">
-          <div class="mobile-menu-user-name">{{ user.profile.name }}</div>
-          <div class="mobile-menu-user-email">{{ user.profile.email }}</div>
-        </div>
-        <button class="mobile-menu-rounded-button">
-          <span class="sr-only">View notifications</span>
-          <!-- Heroicon name: outline/bell -->
-          <svg class="mobile-menu-rounded-button-icon-style"
-               xmlns="http://www.w3.org/2000/svg"
-               fill="none"
-               viewBox="0 0 24 24"
-               stroke="currentColor"
-               aria-hidden="true">
-            <path stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-          </svg>
-        </button>
-      </div>
-    </div>
-
-    <lib-nav-links-list
-          [links]="links.profile"
-          [active-fragment]="activeFragment"
-          [link-class]="'nav-link-mobile'"
-          [link-active-class]="'nav-link-mobile-active'"
-          [container-class]="'mobile-menu-link-container'">
-      </lib-nav-links-list>
-  </div>
-</nav>