bug fixes and cosmetic changes

src/app/content/content.component.html

@@ -1,2 +1,3 @@
+<div class="background-image"></div>
 <app-header></app-header>
 <app-image-container></app-image-container>

src/app/content/content.component.scss

@@ -1,3 +1,17 @@
 :host {
     width: 100%;
 }
+
+.background-image { 
+    background-image: url("/assets/images/BG.jpg");
+    background-size: cover;
+    -webkit-background-size: cover;
+    display: block;
+    filter: blur(15px);
+    -webkit-filter: blur(15px);
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    /* z-index: 1; */
+  }

src/app/side-bar/side-bar.component.html

@@ -1,5 +1,4 @@
-<div class="wrapper">
-  <nav id="sidebar" class="active">
+<nav id="sidebar" class="active">
   <div class="sidebar-header">
     <button type="button" id="sidebarCollapse" class="btn btn-info">
       <i class="fas fa-align-justify"></i>
@@ -82,5 +81,4 @@
       </a>
     </li> -->
   </ul>
-  </nav>
-</div>
+</nav>

src/app/side-bar/side-bar.component.scss

@@ -4,6 +4,7 @@ $themeColor-Dark:#E3E2DF;
 $theme-font: verdana, sans-serif;
 // $theme-supplementer: #f39c12;
 $theme-supplementer: #5D001E;
+$theme-supplementer-transparent: rgba(93,0,30,0.2);
 
 // app-root {
 //     font-family: 'Poppins', sans-serif;
@@ -11,7 +12,8 @@ $theme-supplementer: #5D001E;
 // }
 
 :host {
-    background: $theme-supplementer;
+    background: $theme-supplementer-transparent;
+    z-index: 20;
 }
 
 p {
@@ -71,7 +73,7 @@ span {
 #sidebar {
     min-width: 250px;
     max-width: 250px;
-    background: $theme-supplementer;
+    background: $theme-supplementer-transparent;
     color: $themeColor-Dark;
     transition: all 0.3s;
 }

src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */