Altera redirecionamento para componentes corretos

package.json

@@ -21,12 +21,15 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "angular-oauth2-oidc": "^15.0.1",
     "jwt-decode": "^3.1.2",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
     "postcss-preset-env": "^9.2.0",
     "postcss-scss": "^4.0.9",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.4.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/app.module.ts

@@ -26,6 +26,8 @@ import { AgoraComponent } from './pages/agora/agora.component';
 import { ProgramacaoComponent } from './pages/programacao/programacao.component';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
+import { MenuModule } from 'primeng/menu';
+import { ToastModule } from 'primeng/toast';
 
 @NgModule({
   declarations: [
@@ -55,6 +57,8 @@ import { ParticipateComponent } from './pages/participate/participate.component'
     HttpClientModule,
     ReactiveFormsModule,
     HttpClientModule,
+    MenuModule,
+    ToastModule
   ],
   providers: [
     AuthGuard,

src/app/components/background/background.component.html

@@ -1,62 +1,84 @@
 <div class="w-full flex h-screen flex-col">
-    <div>
-        <div class="pt-10 flex justify-center items-center">
-            <img alt="simbolo-unb" src="../../../assets/Simbolo_UnBTV-01 1.png">
-        </div>
-        <div class="flex flex-row items-center justify-center w-full">
-            <nav class="text-programs">
-              <a routerLink="" class="px-2">Início</a>|
-              <a routerLink="/agora" class="px-2">Agora na TV</a>|
-              <a routerLink="/programacao" class="px-2">Programação</a>|
-              <a routerLink="/transmissoes" class="pl-2">Transmissões</a>
-
-            </nav>
-            <img alt="hamburguer" (click)="toggleMenu()" src="../../../assets/hamburguer.svg">
-        </div>
-        <div class="menu" *ngIf="isMenuOpened">
-          <a class="menu-item">teste</a>
-          <a class="menu-item">teste</a>
-          <a class="menu-item">teste</a>
-        </div>
-    </div>
-    <div class="flex-grow">
-        <ng-content></ng-content>
-    </div>
-    <div class="flex flex-row items-center justify-center pb-10">
-      <div class="pr-2">
-        <a href="url_do_link_para_form-unb" target="_blank">
-          <img alt="form-unb" src="../../../assets/form-unb-tv.svg">
-        </a>
-      </div>
-      <div class="pr-2">
-        <a href="https://unbtv.unb.br/contato" target="_blank">
-          <img alt="telefone" src="../../../assets/telefone.svg">
-        </a>
-      </div>
-      <div class="pr-2">
-        <a href="https://unbtv.unb.br" target="_blank">
-          <img alt="website" src="../../../assets/website.svg">
-        </a>
-      </div>
-      <div class="pr-2">
-        <a href="https://www.youtube.com/@UnBTV" target="_blank">
-          <img alt="youtube" src="../../../assets/youtube.svg">
-        </a>
-      </div>
-      <div class="pr-2">
-        <a href="https://www.instagram.com/unbtv/" target="_blank">
-          <img alt="instagram" src="../../../assets/instagram.svg">
-        </a>
-      </div>
-      <div class="pr-2">
-        <a href="https://www.facebook.com/UnBTV" target="_blank">
-          <img alt="facebook" src="../../../assets/facebook.svg">
-        </a>
-      </div>
-      <div class="pr-2">
-        <a href="twitter.com/unb_tv" target="_blank">
-          <img alt="x" src="../../../assets/x.svg">
-        </a>
-      </div>
+  <div>
+    <div class="pt-10 flex justify-center items-center">
+      <img alt="simbolo-unb" src="../../../assets/Simbolo_UnBTV-01 1.png" />
     </div>
+    <div class="flex flex-row items-center justify-center w-full">
+      <nav class="text-programs">
+        <a [routerLink]="['/stream']">Agora na TV</a>
+        <div class="mx-2">|</div>
+        <a [routerLink]="['/videos']">Catálogo</a>
+        <div class="mx-2">|</div>
+        <a [routerLink]="['/grid-days']">Programação</a>
+        <div class="mx-2">|</div>
+        <a [routerLink]="['/participate']">Participe</a>
+      </nav>
+      <!-- <img
+        alt="hamburguer"
+        (click)="toggleMenu()"
+        src="../../../assets/hamburguer.svg"
+      /> -->
+    </div>
+    <!-- <div class="menu">
+      <p-menu #menu [model]="items" [popup]="true"></p-menu>
+      <button
+        pButton
+        type="button"
+        (click)="menu.toggle($event)"
+        icon="pi pi-bars"
+        label="Show"
+      ></button>
+    </div> -->
+    <div class="card flex justify-content-center">
+      <p-toast></p-toast>
+      <p-menu #menu [model]="items" [popup]="true"></p-menu>
+      <button
+        pButton
+        type="button"
+        (click)="menu.toggle($event)"
+        icon="pi pi-bars"
+        label="Show"
+      ></button>
+    </div>
+  </div>
+  <div class="flex-grow">
+    <ng-content></ng-content>
+  </div>
+  <div class="flex flex-row items-center justify-center pb-10">
+    <div class="pr-2">
+      <a href="url_do_link_para_form-unb" target="_blank">
+        <img alt="form-unb" src="../../../assets/form-unb-tv.svg" />
+      </a>
+    </div>
+    <div class="pr-2">
+      <a href="https://unbtv.unb.br/contato" target="_blank">
+        <img alt="telefone" src="../../../assets/telefone.svg" />
+      </a>
+    </div>
+    <div class="pr-2">
+      <a href="https://unbtv.unb.br" target="_blank">
+        <img alt="website" src="../../../assets/website.svg" />
+      </a>
+    </div>
+    <div class="pr-2">
+      <a href="https://www.youtube.com/@UnBTV" target="_blank">
+        <img alt="youtube" src="../../../assets/youtube.svg" />
+      </a>
+    </div>
+    <div class="pr-2">
+      <a href="https://www.instagram.com/unbtv/" target="_blank">
+        <img alt="instagram" src="../../../assets/instagram.svg" />
+      </a>
+    </div>
+    <div class="pr-2">
+      <a href="https://www.facebook.com/UnBTV" target="_blank">
+        <img alt="facebook" src="../../../assets/facebook.svg" />
+      </a>
+    </div>
+    <div class="pr-2">
+      <a href="twitter.com/unb_tv" target="_blank">
+        <img alt="x" src="../../../assets/x.svg" />
+      </a>
+    </div>
+  </div>
 </div>

src/app/components/background/background.component.ts

@@ -1,14 +1,31 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MenuItem, MessageService } from 'primeng/api';
+
 
 @Component({
   selector: 'app-background',
   templateUrl: './background.component.html',
-  styleUrls: ['./background.component.css']
+  styleUrls: ['./background.component.css'],
+  providers: [MessageService]
 })
-export class BackgroundComponent {
+export class BackgroundComponent implements OnInit {
   isMenuOpened: boolean = false;
+  items: MenuItem[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.items = [
+      {
+        label: 'Profile',
+        icon: 'pi pi-user',
+        routerLink: '/profile'
+      }
+    ]
+  }
 
   toggleMenu(): void {
     this.isMenuOpened = !this.isMenuOpened;
   }
+
 }