first commit

2024-05-16 16:05:41 +02:00
commit adf8283ae0
197 changed files with 26666 additions and 0 deletions
@@ -0,0 +1,140 @@
+<div class="navbar-container" [class.example-is-mobile]="mobileQuery.matches">
+
+  <!-- Top navbar -->
+  <mat-toolbar class="navbar" color="primary">
+
+    <button mat-icon-button (click)="snav.toggle()">
+      <mat-icon>menu</mat-icon>
+    </button>
+
+    <a class="navbar-brand" [routerLink]="['/']" matTooltip="Home">
+      <h1>
+        Jucundus
+      </h1>
+    </a>
+
+    <span class="navbar-spacer"></span>
+
+    <button mat-icon-button [matMenuTriggerFor]="notificationMenu">
+      <mat-icon matBadge="2" matBadgeColor="accent">notifications</mat-icon>
+    </button>
+    <mat-menu #notificationMenu="matMenu" xPosition="before" yPosition="above" [overlapTrigger]="false">
+
+      <a mat-menu-item>
+        <span>You have new tasks</span>
+      </a>
+      <a mat-menu-item>
+        <span>You have a new message</span>
+      </a>
+
+    </mat-menu>
+
+    <button mat-button [matMenuTriggerFor]="userMenu">
+      <mat-icon>person</mat-icon>
+      <span fxShow fxHide.xs>
+        {{userName}}
+      </span>
+    </button>
+    <mat-menu #userMenu="matMenu" xPosition="before" yPosition="above" [overlapTrigger]="false">
+
+      <a mat-menu-item [routerLink]="['/account/profile']">
+        <mat-icon>person</mat-icon>
+        <span>Account</span>
+      </a>
+
+      <a mat-menu-item [routerLink]="['/auth/login']">
+        <mat-icon>exit_to_app</mat-icon>
+        <span>Log out</span>
+      </a>
+
+    </mat-menu>
+
+  </mat-toolbar>
+
+  <mat-sidenav-container class="navbar-sidenav-container">
+    <!-- Side nav -->
+    <mat-sidenav #snav [opened]="!mobileQuery.matches" [mode]="mobileQuery.matches ? 'over' : 'side'"
+      [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" class="sidenav">
+
+      <mat-nav-list>
+        <h3 mat-subheader>Home</h3>
+
+        <a mat-list-item [routerLink]="['/dashboard']" routerLinkActive="active">
+          <mat-icon matListItemIcon>
+            dashboard
+          </mat-icon>
+          <p mat-line> Dashboard </p>
+        </a>
+        <a mat-list-item [routerLink]="['/sales']" routerLinkActive="active">
+          <mat-icon matListItemIcon>
+            today
+          </mat-icon>
+          <p mat-line> Sales </p>
+        </a>        
+        <a mat-list-item [routerLink]="['/favorites']" routerLinkActive="active">
+          <mat-icon matListItemIcon>
+            bookmark
+          </mat-icon>
+          <p mat-line> Favorites </p>
+        </a>
+        <a mat-list-item [routerLink]="['/pictures']" routerLinkActive="active">
+          <mat-icon matListItemIcon>
+            image
+          </mat-icon>
+          <p mat-line> Pictures </p>
+        </a>
+
+
+        <!-- <a mat-list-item [routerLink]="['/customers']" routerLinkActive="active">
+          <mat-icon matListItemIcon>
+            business
+          </mat-icon>
+          <p mat-line> Customers </p>
+        </a>
+        <a mat-list-item [routerLink]="['/users']" routerLinkActive="active">
+          <mat-icon matListItemIcon>
+            people
+          </mat-icon>
+          <p mat-line> Users </p>
+        </a> -->
+
+        
+
+        <mat-divider></mat-divider>
+        <h3 mat-subheader>User</h3>
+        <a mat-list-item [routerLink]="['/account/profile']">
+          <mat-icon matListItemIcon>person</mat-icon>
+          <p mat-line> Account </p>
+        </a>
+
+        <a mat-list-item [routerLink]="['/auth/login']">
+          <mat-icon matListItemIcon>exit_to_app</mat-icon>
+          <p mat-line> Log out </p>
+        </a>
+
+        <a id="push-bottom" mat-list-item [routerLink]="['/about']" routerLinkActive="active">
+          <mat-icon matListItemIcon>
+            info_outline
+          </mat-icon>
+          <p mat-line> About </p>
+        </a>
+      </mat-nav-list>
+
+    </mat-sidenav>
+
+    <!-- Main content -->
+    <mat-sidenav-content class="sidenav-content">
+
+      <div class="progress-bar-container">
+        <mat-progress-bar color="accent" mode="indeterminate" *ngIf="spinnerService.visibility | async">
+        </mat-progress-bar>
+        <!-- <mat-spinner class="spinner" [diameter]="50" *ngIf="showSpinner"></mat-spinner> -->
+      </div>
+
+
+      <router-outlet></router-outlet>
+
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+
+</div>