possible to use plain button in profile

projects/lib-workspace/src/app/app.component.html

@@ -39,10 +39,10 @@
 
     <fs-nav-user-profile-actions>
       <button mat-icon-button>
-        <mat-icon>manage_accounts</mat-icon>
+        <i class="material-icons">manage_accounts</i>
       </button>
-      <button mat-icon-button>
-        <mat-icon>logout</mat-icon>
+      <button>
+        <i class="material-icons">logout</i>
       </button>
     </fs-nav-user-profile-actions>
   </fs-nav-user-profile>

projects/lib-workspace/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as dateFnsLocales from 'date-fns/locale';
@@ -40,6 +41,7 @@ const locales: any = dateFnsLocales;
     MatSelectModule,
     MatCardModule,
     MatSlideToggleModule,
+    MatDialogModule,
     /* Lib modules */
     FsNavFrameModule,
     FsCalendarModule,

projects/lib-workspace/src/app/content/showcase-nav-frame/dialog-content-example-dialog.html

@@ -0,0 +1,64 @@
+<h2 mat-dialog-title>Install Angular</h2>
+<mat-dialog-content class="mat-typography">
+  <h3>Develop across all platforms</h3>
+  <p>Learn one way to build applications with Angular and reuse your code and abilities to build
+    apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
+
+  <h3>Speed &amp; Performance</h3>
+  <p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web
+    Workers and server-side rendering. Angular puts you in control over scalability. Meet huge
+    data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
+
+  <h3>Incredible tooling</h3>
+  <p>Build features quickly with simple, declarative templates. Extend the template language with
+    your own components and use a wide array of existing components. Get immediate Angular-specific
+    help and feedback with nearly every IDE and editor. All this comes together so you can focus
+    on building amazing apps rather than trying to make the code work.</p>
+
+  <h3>Loved by millions</h3>
+  <p>From prototype through global deployment, Angular delivers the productivity and scalable
+    infrastructure that supports Google's largest applications.</p>
+
+  <h3>What is Angular?</h3>
+
+  <p>Angular is a platform that makes it easy to build applications with the web. Angular
+    combines declarative templates, dependency injection, end to end tooling, and integrated
+    best practices to solve development challenges. Angular empowers developers to build
+    applications that live on the web, mobile, or the desktop</p>
+
+  <h3>Architecture overview</h3>
+
+  <p>Angular is a platform and framework for building client applications in HTML and TypeScript.
+  Angular is itself written in TypeScript. It implements core and optional functionality as a
+  set of TypeScript libraries that you import into your apps.</p>
+
+  <p>The basic building blocks of an Angular application are NgModules, which provide a compilation
+  context for components. NgModules collect related code into functional sets; an Angular app is
+  defined by a set of NgModules. An app always has at least a root module that enables
+  bootstrapping, and typically has many more feature modules.</p>
+
+  <p>Components define views, which are sets of screen elements that Angular can choose among and
+  modify according to your program logic and data. Every app has at least a root component.</p>
+
+  <p>Components use services, which provide specific functionality not directly related to views.
+  Service providers can be injected into components as dependencies, making your code modular,
+  reusable, and efficient.</p>
+
+  <p>Both components and services are simply classes, with decorators that mark their type and
+  provide metadata that tells Angular how to use them.</p>
+
+  <p>The metadata for a component class associates it with a template that defines a view. A
+  template combines ordinary HTML with Angular directives and binding markup that allow Angular
+  to modify the HTML before rendering it for display.</p>
+
+  <p>The metadata for a service class provides the information Angular needs to make it available
+  to components through Dependency Injection (DI).</p>
+
+  <p>An app's components typically define many views, arranged hierarchically. Angular provides
+  the Router service to help you define navigation paths among views. The router provides
+  sophisticated in-browser navigational capabilities.</p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
+</mat-dialog-actions>

projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.html

@@ -12,3 +12,5 @@
 
   <p style="position: absolute; top: 200px">&#8592; In the sidenav you can set preregisterd entrys</p>
 </div>
+
+<button mat-raised-button (click)="openDialog()">Open a dialog</button>

projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.ts

@@ -1,12 +1,32 @@
 import { Component, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-showcase-nav-frame',
   templateUrl: './showcase-nav-frame.component.html',
   styleUrls: ['./showcase-nav-frame.component.css'],
 })
 export class ShowcaseNavFrameComponent implements OnInit {
-  constructor() {}
+  constructor(public dialog: MatDialog) {}
 
   ngOnInit() {}
+
+  openDialog() {
+    const dialogRef = this.dialog.open(DialogContentExampleDialog, {
+      disableClose: true,
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
 }
+
+@Component({
+  selector: 'dialog-content-example-dialog',
+  templateUrl: 'dialog-content-example-dialog.html',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule],
+})
+export class DialogContentExampleDialog {}

projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss

@@ -1,83 +1,108 @@
 fs-nav-user-profile {
-    position: relative;
-    height: var(--sidebar-width-closed);
-    display: grid;
-    grid-template-columns: var(--sidebar-width-closed) 1fr;
+  position: relative;
+  height: var(--sidebar-width-closed);
+  display: grid;
+  grid-template-columns: var(--sidebar-width-closed) 1fr;
 }
 
 .profile-pic-button-wrapper {
-    width: var(--sidebar-width-closed);
-    height: var(--sidebar-width-closed);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: var(--sidebar-width-closed);
+  height: var(--sidebar-width-closed);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    button {
-        width: var(--sidebar-width-closed) !important;
-        height: var(--sidebar-width-closed) !important;
-        font-size: calc(var(--sidebar-width-closed)*0.8);
-        min-width: var(--sidebar-width-closed) !important;
+  button {
+    width: var(--sidebar-width-closed) !important;
+    height: var(--sidebar-width-closed) !important;
+    font-size: calc(var(--sidebar-width-closed) * 0.8);
+    min-width: var(--sidebar-width-closed) !important;
 
-        .mdc-button__label {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
+    .mdc-button__label {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
 
-        .pic {
-            height: calc(var(--sidebar-width-closed)*0.8);
-            width: calc(var(--sidebar-width-closed)*0.8);
-            margin-left: auto;
-            margin-right: auto;
-            background-size: cover;
-            flex-shrink: 0;
-            object-fit: cover;
-            border-radius: 50%;
-        }
+    .pic {
+      height: calc(var(--sidebar-width-closed) * 0.8);
+      width: calc(var(--sidebar-width-closed) * 0.8);
+      margin-left: auto;
+      margin-right: auto;
+      background-size: cover;
+      flex-shrink: 0;
+      object-fit: cover;
+      border-radius: 50%;
+    }
 
-        .default-profile-pic {
-            width: calc(var(--sidebar-width-closed)*0.8);
-            height: calc(var(--sidebar-width-closed)*0.8);
-            font-size: calc(var(--sidebar-width-closed)*0.8);
-        }
+    .default-profile-pic {
+      width: calc(var(--sidebar-width-closed) * 0.8);
+      height: calc(var(--sidebar-width-closed) * 0.8);
+      font-size: calc(var(--sidebar-width-closed) * 0.8);
     }
+  }
 }
 
 .profile-content-wrapper {
-    position: relative;
-    height: var(--sidebar-width-closed);
-    display: none;
-    align-items: center;
-    justify-content: space-between;
+  position: relative;
+  height: var(--sidebar-width-closed);
+  display: none;
+  align-items: center;
+  justify-content: space-between;
 
-    .user-infos {
-        height: 2rem;
-        display: inline-flex;
-        flex-direction: column;
-        justify-content: space-around;
+  .user-infos {
+    height: 2rem;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
 
-        .fs-nav-user-profile-name {
-            font-size: 1rem;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
+    .fs-nav-user-profile-name {
+      font-size: 1rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
-        .fs-nav-user-profile-subname {
-            font-size: .7rem;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
+    .fs-nav-user-profile-subname {
+      font-size: 0.7rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
+  }
+
+  .fs-nav-user-profile-actions {
+    display: inline-flex;
+    justify-content: space-around;
+    gap: 0.5rem;
+
+    > button {
+      cursor: pointer;
+      border: none;
+      padding: 12px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      text-align: center;
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      border: none;
+      outline: none;
+      background-color: rgba(0, 0, 0, 0);
+      fill: currentColor;
+      color: inherit;
+      text-decoration: none;
+      user-select: none;
+      overflow: visible;
 
-    .fs-nav-user-profile-actions {
-        display: inline-flex;
-        justify-content: space-around;
+      > i {
+        font-size: 1.3rem;
+      }
     }
+  }
 }
 
 .profile-content-wrapper.opened {
-    display: flex;
+  display: flex;
 }