Added some styling & fixed a couple of api errors

src/app/app-routing.module.ts

@@ -3,13 +3,15 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { ArtistsComponent } from './components/artists/artists.component';
 import { AlbumsComponent } from './components/albums/albums.component';
+import { SongComponent } from './components/song/song.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'artists/:id', component: ArtistsComponent },
   { path: 'artists', component: ArtistsComponent },
   { path: 'albums/:id', component: AlbumsComponent },
-  { path: 'albums', component: AlbumsComponent }
+  { path: 'albums', component: AlbumsComponent },
+  { path: 'songs', component: SongComponent }
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,5 +1,46 @@
-<app-nav></app-nav>
+<div [ngClass]="this.navToggled ? 'd-flex toggled' : 'd-flex'" id="wrapper">
+    <div class="bg-light border-right" id="sidebar-wrapper">
+      <div class="sidebar-heading d-flex justify-content-between"><img src="./assets/icon.png" />Cassettea</div>
+      <!-- Nav buttons -->
+      <div class="list-group list-group-flush">
+        <a routerLink="" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
+            Explore
+            <fa-icon [icon]="faGlobeEurope" [fixedWidth]="true"></fa-icon>
+        </a>
+        <a routerLink="songs" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
+            Songs
+            <fa-icon [icon]="faMusic" [fixedWidth]="true"></fa-icon>            
+        </a>
+        <a routerLink="albums" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
+            Albums
+            <fa-icon [icon]="faCompactDisc" [fixedWidth]="true"></fa-icon>
+        </a>
+        <a routerLink="artists" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
+            Artists
+            <fa-icon [icon]="faUsers" [fixedWidth]="true"></fa-icon>
+        </a>
+        <a routerLink="settings" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
+            Settings
+            <fa-icon [icon]="faCog" [fixedWidth]="true"></fa-icon>
+        </a>
+      </div>
+    </div>
+    <div id="page-content">
+    <!-- Sidenav toggle -->
+      <nav class="navbar navbar-light bg-light justify-content-between border-bottom">
+            <button type="button" class="btn btn-outline-secondary" (click)="toggleNav();">
+                    <fa-icon [icon]="this.navToggled ? faChevronLeft : faChevronRight" [fixedWidth]="true"></fa-icon>
+            </button>  
+            <span class="navbar-brand">Route name here</span>
+            <form class="form-inline" id="navbar-search">
+              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+            </form>
+      </nav>
 
+    <!-- Router output -->
       <router-outlet></router-outlet>
-
+    </div>
-<app-controls></app-controls>
+</div>
+<!-- Music controls -->
+<app-controls class="d-flex"></app-controls>

src/app/app.component.scss

@@ -0,0 +1,69 @@
+// Main 
+body {
+  overflow-x: hidden;
+}
+app-controls {
+  width: 100%;
+  height: 64px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+#wrapper {
+    height: calc(100vh - 64px);
+}
+
+// Sidebar
+#sidebar-wrapper {
+  min-height: inherit;   
+  margin-left: -15rem;
+  -webkit-transition: margin .25s ease-out;
+  -moz-transition: margin .25s ease-out;
+  -o-transition: margin .25s ease-out;
+  transition: margin .25s ease-out;
+}
+  
+#sidebar-wrapper .sidebar-heading {
+  padding: 0.875rem 1.25rem;
+  font-size: 1.2rem;
+}
+
+.sidebar-heading > img {
+    width: 64px;
+}
+  
+#sidebar-wrapper .list-group {
+  width: 15rem;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    margin-left: 0;
+}
+
+// Page content
+#page-content {
+  min-width: 100%;
+}
+
+#navbar-search {
+    display: none;
+}
+  
+@media (min-width: 768px) {
+  #sidebar-wrapper {
+    margin-left: 0;
+  }
+
+  #navbar-search {
+    display: block;
+  }
+
+  #page-content {
+    min-width: 0;
+    width: 100%;
+  }
+ 
+  #wrapper.toggled #sidebar-wrapper {
+    margin-left: -15rem;
+  }
+}

src/app/app.component.ts

@@ -1,10 +1,33 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { faGlobeEurope, faMusic, faCompactDisc, faUsers, faCog, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Cassettea';
+  navToggled;
+
+  // FontAwesome
+  faGlobeEurope = faGlobeEurope;
+  faMusic = faMusic;
+  faCompactDisc = faCompactDisc;
+  faUsers = faUsers;
+  faCog = faCog;
+  faChevronLeft = faChevronLeft;
+  faChevronRight = faChevronRight;
+
+  
+  constructor() { 
+    this.navToggled = false;
+  }
+  
+  ngOnInit() {
+  }
+  
+  toggleNav() {
+    this.navToggled = (this.navToggled) ? false : true;
+  }
 }

src/app/app.module.ts

@@ -10,7 +10,6 @@ import { HomeComponent } from './components/home/home.component';
 import { SongComponent } from './components/song/song.component';
 import { ArtistsComponent } from './components/artists/artists.component';
 import { AlbumsComponent } from './components/albums/albums.component';
-import { NavComponent } from './components/nav/nav.component';
 import { ControlsComponent } from './components/controls/controls.component';
 
 @NgModule({
@@ -20,7 +19,6 @@ import { ControlsComponent } from './components/controls/controls.component';
     SongComponent,
     ArtistsComponent,
     AlbumsComponent,
-    NavComponent,
     ControlsComponent
   ],
   imports: [

src/app/components/controls/controls.component.html

@@ -1,19 +1,20 @@
-<div class="container">
+<div class="navbar navbar-light bg-light border-top controls-wrapper">
 
-  <div *ngIf="( currentSong | async ) as song" class="songInfo">
+  <span *ngIf="( currentSong | async ) as song" class="songInfo">
     {{ song.name }}
-  </div>
+  </span>
 
-  <div class="buttons">
+  <span class="buttons">
     <fa-icon (click)="audio.isCurrentlyPlaying ? audio.pause() : audio.play()" [icon]="audio.isCurrentlyPlaying ? faPause : faPlay"></fa-icon>
-  </div>
+  </span>
 
-  <div class="time">
+  <span class="time">
-
+    <input type="range" class="form-control-range" id="song-range">
-  </div>
+  </span>
-
+
-  <div class="volume">
+  <span class="volume">
-
+    <fa-icon [icon]="faMusic" [fixedWidth]="true"></fa-icon>
-  </div>
+    <input type="range" class="form-control-range" id="volume-range">
+  </span>
 
 </div>

src/app/components/controls/controls.component.scss

@@ -0,0 +1,14 @@
+.controls-wrapper {
+    width: 100%;
+    padding: 18px;
+    line-height: 1.5em;
+}
+.form-control-range {
+    display: inline;
+}
+// #song-range {
+//     width: 50%;
+// }
+// #volume-range {
+//     width: 20%;
+// }

src/app/components/controls/controls.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
+import { faPlay, faPause, faVolumeMute, faVolumeDown, faVolumeUp } from '@fortawesome/free-solid-svg-icons';
 import { AudioService } from 'src/app/services/audio.service';
 import { Song } from '../../classes/entities';
 import { ApiService } from 'src/app/services/api.service';
@@ -14,6 +14,9 @@ export class ControlsComponent implements OnInit {
   // ? Fontawesome imports
   faPlay = faPlay;
   faPause = faPause;
+  faVolumeMute = faVolumeMute;
+  faVolumeDown = faVolumeDown;
+  faVolumeUp = faVolumeUp;
 
   currentSong: Promise<Song>;
 

src/app/components/nav/nav.component.html

@@ -1,19 +0,0 @@
-<div [ngClass]="this.navToggled ? 'd-flex toggled' : 'd-flex'" id="wrapper">
-    <div class="bg-light border-right" id="sidebar-wrapper">
-      <div class="sidebar-heading">Cassettea</div>
-      <div class="list-group list-group-flush">
-        <a href="#" class="list-group-item list-group-item-action bg-light">Explore</a>
-        <a href="#" class="list-group-item list-group-item-action bg-light">Songs</a>
-        <a href="#" class="list-group-item list-group-item-action bg-light">Albums</a>
-        <a href="#" class="list-group-item list-group-item-action bg-light">Artists</a>
-        <a href="#" class="list-group-item list-group-item-action bg-light">Settings</a>
-      </div>
-    </div>
-    <button class="navbar-toggler" (click)="toggleNav();"><span class="navbar-toggler-icon"></span></button>
-  </div>
-  <script>
-    $("#menu-toggle").click(function(e) {
-      e.preventDefault();
-      $("#wrapper").toggleClass("toggled");
-    });
-  </script>

src/app/components/nav/nav.component.scss

@@ -1,36 +0,0 @@
-body {
-    overflow-x: hidden;
-  }
-  
-  #sidebar-wrapper {
-    min-height: 100vh;
-    margin-left: -15rem;
-    -webkit-transition: margin .25s ease-out;
-    -moz-transition: margin .25s ease-out;
-    -o-transition: margin .25s ease-out;
-    transition: margin .25s ease-out;
-  }
-  
-  #sidebar-wrapper .sidebar-heading {
-    padding: 0.875rem 1.25rem;
-    font-size: 1.2rem;
-  }
-  
-  #sidebar-wrapper .list-group {
-    width: 15rem;
-  }
-  
-  #wrapper.toggled #sidebar-wrapper {
-    margin-left: 0;
-  }
-  
-  @media (min-width: 768px) {
-    #sidebar-wrapper {
-      margin-left: 0;
-    }
-  
-    #wrapper.toggled #sidebar-wrapper {
-      margin-left: -15rem;
-    }
-  }
-  

src/app/components/nav/nav.component.spec.ts

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

src/app/components/nav/nav.component.ts

@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-nav',
-  templateUrl: './nav.component.html',
-  styleUrls: ['./nav.component.scss']
-})
-export class NavComponent implements OnInit {
-navToggled;
-
-  constructor() { 
-    this.navToggled = false;
-  }
-
-  ngOnInit() {
-  }
-
-  toggleNav() {
-    this.navToggled = (this.navToggled) ? false : true;
-  }
-
-}

src/app/services/entity.service.ts

@@ -21,8 +21,7 @@ export class EntityService {
       const result = [];
 
       // For every entity in the api data.
-      data.data.result.forEach(element => {
+      data.data.result.forEach((element: { type: any; }) => {
-
         // If the type is...
         switch (element.type) {
           // ... a song, add a song entity to the result array.