Feat/high frontend update

Frontend/src/app/app.component.html

@@ -4,14 +4,19 @@
   <router-outlet></router-outlet>
 </div>
 <div *ngIf="!isCurrentRouteAuth()">
-  <div *ngIf="screenSize === 'desktop'" class="grid grid-cols-[1fr,1fr,1fr,1fr,200px] grid-rows-[0.01fr,0.01fr,0.67fr] min-h-screen pl-2 pr-2 relative">
-    <app-header class="col-start-2 col-span-1 row-start-2 row-span-1"></app-header>
+  <div *ngIf="screenSize === 'desktop'" class="grid grid-cols-5 grid-rows-[0.01fr,0.01fr,0.67fr] min-h-screen pl-2 pr-2 relative">
+    <app-header [ngClass]="'col-start-' + columnStart" class="col-span-1 row-start-2 row-span-1 pl-[2.5vw]"></app-header>
     <app-other-nav class="col-start-5 col-span-1 row-start-1 row-span-1 justify-self-end"></app-other-nav>
-    <app-left class="col-start-1 col-span-1 row-start-1 row-span-3"></app-left>
-    <div id="center" class="no-scrollbar col-span-4 row-start-3 row-span-2 overflow-y-scroll overflow-hidden">
+    <app-navbar class="col-start-1 col-span-1 row-start-1 row-span-3"></app-navbar>
+    <app-side-bar [isSideBarHidden]="isSidebarOpen" (sidebarToggled)="layout($event)" class="col-start-1 col-span-1 row-start-2 row-span-3 pr-2"></app-side-bar>
+    <!-- dont remove this div -->
+    <div class="col-span-4"></div> 
+    <div [ngClass]="'col-span-' + colSpan + ' col-start-' + columnStart"
+      id="center"
+      class="no-scrollbar row-span-2 row-start-3 overflow-y-scroll overflow-hidden p-2">
       <router-outlet></router-outlet>
     </div>
-  </div>
+  </div>  
   <div *ngIf="screenSize === 'mobile'">
     <div class="grid grid-cols-3 grid-rows-[0.1fr,1fr,1fr] min-h-screen relative">
       <app-header class="col-start-2 col-span-1 row-start-1 row-span-1"></app-header>

Frontend/src/app/app.component.ts

@@ -6,12 +6,13 @@ import { ScreenSizeService } from "./services/screen-size-service.service";
 import { SwUpdate } from "@angular/service-worker";
 import { filter } from "rxjs/operators";
 import { CommonModule, isPlatformBrowser } from "@angular/common";
-import { SideBarComponent } from "./components/organisms/side-bar/side-bar.component";
 import { ProviderService } from "./services/provider.service";
 import { PageHeaderComponent } from "./components/molecules/page-header/page-header.component";
 import { MoodService } from "./services/mood-service.service";
 import { BackgroundAnimationComponent } from "./components/organisms/background-animation/background-animation.component";
 
+import { NavbarComponent } from "./components/organisms/navbar/navbar.component";
+import { SideBarComponent } from './components/organisms/side-bar/side-bar.component';
 //template imports
 import { HeaderComponent } from "./components/organisms/header/header.component";
 import { OtherNavComponent } from "./components/templates/desktop/other-nav/other-nav.component";
@@ -32,7 +33,9 @@ import { Observable } from "rxjs";
     HeaderComponent,
     OtherNavComponent,
     LeftComponent,
-    BackgroundAnimationComponent
+    BackgroundAnimationComponent,
+    NavbarComponent,
+    SideBarComponent
   ],
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
@@ -41,6 +44,10 @@ export class AppComponent implements OnInit, OnDestroy {
   update: boolean = false;
   screenSize!: string;
   displayPageName: boolean = false;
+  columnStart: number = 3; 
+  columnStartNav: number = 1; 
+  colSpan: number = 4; 
+  isSidebarOpen: boolean = false;
   protected displaySideBar: boolean = false;
   protected isAuthRoute: boolean = false;
   protected isCallbackRoute: boolean = false;
@@ -76,12 +83,11 @@ export class AppComponent implements OnInit, OnDestroy {
     this.router.events.pipe(
       filter((event): event is NavigationEnd => event instanceof NavigationEnd)
     ).subscribe((event: NavigationEnd) => {
-      console.log('Navigation ended:', event.urlAfterRedirects);
       this.isAuthRoute = ['/login', '/register'].includes(event.urlAfterRedirects);
       this.isCallbackRoute = ['/auth/callback'].includes(event.urlAfterRedirects);
     });
   }
-
+  
   async ngOnInit() {
     this.screenSizeService.screenSize$.subscribe(screenSize => {
       this.screenSize = screenSize;
@@ -95,6 +101,11 @@ export class AppComponent implements OnInit, OnDestroy {
     return ['/login', '/register','/Auth/callback'].includes(this.router.url);
   }
 
+  layout(isSidebarOpen: boolean) {
+    this.isSidebarOpen = isSidebarOpen;
+    this.columnStart = isSidebarOpen ? 1 : 3;    
+    this.colSpan = isSidebarOpen ? 5 : 4;
+  }
 
   isReady(): boolean {
     if (isPlatformBrowser(this.platformId))
@@ -106,4 +117,4 @@ export class AppComponent implements OnInit, OnDestroy {
   {
     this.authService.signOut();
   }
-}
+}

Frontend/src/app/components/atoms/button-component/button-component.component.html

@@ -1,6 +1,6 @@
 <button
   (click)="handleClick($event)"
-  [ngClass]="isSelected ? moodComponentClassesDark[this.moodService.getCurrentMood()] : moodComponentClassesHover[this.moodService.getCurrentMood()]"
+  [ngClass]="isSelected ? moodComponentClassesHover[this.moodService.getCurrentMood()]  : moodComponentClassesDark[this.moodService.getCurrentMood()]" 
   class="ml-1 mb-1 px-5 py-2 rounded-full focus:cursor-pointer">
   {{ label }}
 </button>

Frontend/src/app/components/atoms/svg-icon/svg-icon.component.html

@@ -1,4 +1,4 @@
-<svg class="bounce-on-hover" fill-rule="evenodd" clip-rule="evenodd" (click)="onClick()" width="10vh" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="bounce-on-hover" fill-rule="evenodd" clip-rule="evenodd" (click)="onClick()" [attr.width]="width" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle class="bounce-circle"
     [ngClass]="{'animate': isAnimating}"
     [class]="circleColor()"

Frontend/src/app/components/atoms/svg-icon/svg-icon.component.ts

@@ -14,9 +14,10 @@ export class SvgIconComponent {
     moodComponentClasses!: { [key: string]: string };
     @Input() svgPath: string = '';
     @Input() fillColor: string = '#000000';
+    @Input() width: string = '10vh';
     @Input() selected: boolean = false;
     @Input() isAnimating: boolean = false;
-    @Input() middleColor: string = '#FFFFFF';
+    @Input() middleColor: string = '#191716';
     @Input() pathHeight: string = '1'; // Default path height as a string
     @Input() circleAnimation: boolean = false;
     @Output() svgClick = new EventEmitter<MouseEvent>();

Frontend/src/app/components/molecules/mood-list/mood-list.component.html

@@ -2,7 +2,7 @@
     <app-button-component 
     *ngFor="let mood of moods; let i = index"
     [label]="mood"
-    [isSelected]="selectedMood === null && i === 0 || selectedMood === i"
+    [isSelected]="selectedMood === i"
     (click)="selectMood(i)">
     </app-button-component>
 </div>

Frontend/src/app/components/molecules/mood-list/mood-list.component.ts

@@ -12,9 +12,9 @@ import { ButtonComponentComponent } from './../../atoms/button-component/button-
 })
 export class MoodListComponent {
   @Input() moods!: string[];
-  @Input() selectedMood!: number | null;
+  @Input() selectedMood = 0;
   @Input() screenSize!: string;
-
+  
   constructor(public moodService: MoodService) {
 
   }

Frontend/src/app/components/molecules/moods-list/moods-list.component.ts

@@ -19,9 +19,7 @@ export class MoodsListComponent implements OnInit {
     this.redirectToMoodPage.emit(mood);
   }
   ngOnInit(): void {
-    for (let mood of this.moods){
-      console.log(mood);
-    }
+
   }
 
 }

Frontend/src/app/components/molecules/top-card/top-card.component.ts

@@ -37,7 +37,6 @@ export class TopCardComponent {
     });
 
     dialogRef.afterClosed().subscribe((result) => {
-        console.log('The dialog was closed');
     });
   }
 }

Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.html

@@ -0,0 +1,7 @@
+<app-svg-icon 
+  [svgPath]="svgString" 
+  [selected]="true"
+  [fillColor]="'#000000'"
+  [width]="'1.5vw'"
+  (svgClick)="handleSvgClick($event)">
+</app-svg-icon>

Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.spec.ts

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

Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts

@@ -0,0 +1,27 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from "@angular/common";
+import { SvgIconComponent } from '../../atoms/svg-icon/svg-icon.component';
+
+const SVG_PATHS = {
+  PLUS: 'M20 0 H30 V20 H50 V30 H30 V50 H20 V30 H0 V20 H20 Z',
+  MIN: 'M0 20 H50 V30 H0 Z',
+};
+
+@Component({
+  selector: 'app-expandable-icon',
+  standalone: true,
+  imports: [CommonModule, SvgIconComponent],
+  templateUrl: './expandable-icon.component.html',
+  styleUrl: './expandable-icon.component.css'
+})
+export class ExpandableIconComponent {
+
+  svgString: string = SVG_PATHS.MIN;
+
+  @Output() svgClicked = new EventEmitter<void>();
+
+  handleSvgClick(event: MouseEvent) {
+    this.svgString = this.svgString === SVG_PATHS.PLUS ? SVG_PATHS.MIN : SVG_PATHS.PLUS;
+    this.svgClicked.emit();
+  }
+}

Frontend/src/app/components/organisms/moods/moods.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="screenSize === 'desktop'" class="flex flex-col pl-1 ml-[2vw]">
+<div *ngIf="screenSize === 'desktop'" class="flex flex-col">
     <div class="card-body relative">
         <app-page-title>Favourite Moods</app-page-title>
         <app-moods-list [moods]="favouriteMoods" (redirectToMoodPage)="redirectToMoodPage($event)"></app-moods-list>

Frontend/src/app/components/organisms/side-bar/side-bar.component.css

@@ -34,10 +34,7 @@
 .scrollbar-hidden::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
-.container {
-  width: var(--tw-w);
-  height: var(--tw-h);
-}
+
 .view-more-container {
   /* Adjust the padding value based on your needs */
   margin-bottom: calc(50vh - 50px); /* Assuming the button's height is around 100px */
@@ -47,4 +44,3 @@
   color: inherit !important; /* Neutralizes text color change */
   /* Add any other properties that change on hover to be neutralized */
 }
-

Frontend/src/app/components/organisms/side-bar/side-bar.component.html

@@ -1,16 +1,23 @@
-<div class="z-10 w-[42vh]" style="--tw-h: 75vh; left: 1vw; top: 10.2vh;">
-  <div class="container pl-5 rounded-md h-full">
+<div class="z-10"  style="left: 1vw; top: 10.2vh;">
+  <div [ngClass]="{'w-[2.5vw] h-[2vw]': isSideBarHidden, 'w-[20vw] h-[75vh]': !isSideBarHidden}"  class="container  pl-5 rounded-md max-h-screen " >
     <div [ngClass]="moodComponentClasses[moodService.getCurrentMood()]" class="rounded-lg overflow-auto h-full flex flex-col justify-between scrollbar-hidden">
+      <!-- SVG button always visible -->
       <div class="flex justify-between items-center mb-2 mt-3">
-        <div class="button-container" [ngClass]="getButtonClasses('suggestions')">
-          <button class="px-10 text-sm font-bold text-white focus:outline-none truncate" (click)="selectOption('suggestions')">Suggestions</button>
+        <div class="button-container">
+          <app-expandable-icon class="focus:outline-none max-w-[.5vw]" (click)="toggleSideBar()"></app-expandable-icon>
         </div>
-        <div class="button-container" [ngClass]="getButtonClasses('recentListening')">
-          <button class="px-10 text-sm text-white focus:outline-none truncate" (click)="selectOption('recentListening')">Recent listening</button>
+        <!-- Only show these buttons when the sidebar is expanded -->
+        <div *ngIf="!isSideBarHidden" class="button-container" [ngClass]="getButtonClasses('suggestions')">
+          <button class="px-10 text-sm font-bold text-white focus:outline-none truncate max-w-[9.5vw] flex-1" (click)="selectOption('suggestions')">Suggestions</button>
+        </div>
+        <div *ngIf="!isSideBarHidden" class="button-container" [ngClass]="getButtonClasses('recentListening')">
+          <button class="px-10 text-sm text-white focus:outline-none truncate max-w-[9.5vw] flex-1" (click)="selectOption('recentListening')">Recent listening</button>
         </div>
       </div>
-      <div class="mt-7 mx-3 flex-grow overflow-auto scrollbar-hidden">
-        <ng-container *ngIf="!isLoading; else loading">
+
+      <!-- Content of the sidebar -->
+      <div *ngIf="!isSideBarHidden" class="mt-7 mx-3 flex-grow overflow-auto scrollbar-hidden">
+        <ng-container *ngIf="!isLoading ; else loading">
           <div *ngFor="let card of getSelectedCardData(); let i = index">
             <app-song-cards [svgSize]="'2.5vw'" [imgSize]="'5vw'" [card]="card"></app-song-cards>
           </div>
@@ -22,9 +29,12 @@
           <app-toast></app-toast>
         </div>
       </div>
+
     </div>
   </div>
 </div>
+
+
 <div *ngIf="isEchoModalVisible" id="echo-songs" tabindex="-1" aria-hidden="true" class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full bg-black bg-opacity-50">
   <div class="relative p-4 w-full max-w-2xl max-h-full">
     <!-- Modal content -->

Frontend/src/app/components/organisms/side-bar/side-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ChangeDetectorRef } from "@angular/core";
+import { Component, OnInit, ViewChild, EventEmitter, Output, ChangeDetectorRef,Input } from "@angular/core";
 import { MatCard, MatCardContent } from "@angular/material/card";
 import { NgClass, NgForOf, NgIf } from "@angular/common";
 import { SpotifyService } from "../../../services/spotify.service";
@@ -13,19 +13,22 @@ import { SearchService } from "../../../services/search.service";
 import { SkeletonSongCardComponent } from "../../atoms/skeleton-song-card/skeleton-song-card.component";
 import { ToastComponent } from "../../../components/organisms/toast/toast.component";
 import { YouTubeService } from "../../../services/youtube.service";
+import { ExpandableIconComponent } from '../../organisms/expandable-icon/expandable-icon.component';
 
 type SelectedOption = "suggestions" | "recentListening";
 
 @Component({
   selector: "app-side-bar",
   standalone: true,
-  imports: [MatCard, MatCardContent, NgForOf, NgIf, NgClass, EchoButtonComponent, SongCardsComponent, SkeletonSongCardComponent, ToastComponent],
+  imports: [MatCard, MatCardContent, NgForOf, NgIf, NgClass, EchoButtonComponent, SongCardsComponent, SkeletonSongCardComponent, ToastComponent, ExpandableIconComponent],
   templateUrl: "./side-bar.component.html",
-  styleUrls: ["./side-bar.component.css"]
+  styleUrls: ["./side-bar.component.css"],
 })
 export class SideBarComponent implements OnInit
 {
   @ViewChild(ToastComponent) toastComponent!: ToastComponent; // Declare ToastComponent
+  @Output() sidebarToggled = new EventEmitter<boolean>(); // Declare EventEmitter
+  @Input() isSideBarHidden!: boolean; // Declare Input
 
   // Mood Service Variables
   moodComponentClasses!: { [key: string]: string };
@@ -62,13 +65,13 @@ export class SideBarComponent implements OnInit
   isLoading: boolean = true;
   skeletonArray = Array(10);
 
-  async ngAfterViewInit()
-  {
-    this.cdRef.detectChanges();
+
+  toggleSideBar() {
+    this.isSideBarHidden = !this.isSideBarHidden;
+    this.sidebarToggled.emit(this.isSideBarHidden); // Emit event
   }
 
-  toggleDropdown(): void
-  {
+  toggleDropdown(): void {
     this.isDropdownVisible = !this.isDropdownVisible;
   }
 
@@ -116,9 +119,7 @@ export class SideBarComponent implements OnInit
       {
         this.suggestionsCardData = await this.spotifyService.getQueue(this.provider);
         await this.suggestionsCardData.unshift(this.getEchoedCardData()[0]);
-      }
-      catch (error)
-      {
+      } catch (error) {
         console.error("Error loading up next data:", error);
       }
     }
@@ -154,9 +155,9 @@ export class SideBarComponent implements OnInit
       {
         this.isLoading = true;
         const data = await this.spotifyService.getRecentlyPlayedTracks(this.provider);
-        console.log("Recently Played Tracks Data:", data);
-        data.items.forEach((item: any) =>
-        {
+        console.log("First track: ", data.items[0]);
+        console.log("First track: ", data.items[0]);
+        data.items.forEach((item: any) => {
           const trackId = item.track.id;
           if (!this.recentListeningCardData.find(track => track.id === trackId))
           {

Frontend/src/app/components/templates/desktop/left/left.component.html

@@ -1,2 +1,2 @@
 <app-navbar></app-navbar>
-<app-side-bar></app-side-bar>
+<app-side-bar></app-side-bar>