notification UI

src/app/notifications/notifications.component.html

@@ -1,14 +1,7 @@
-<section class="notifications">
-    <header>
-        <h4> Notifications </h4>
-    </header>
-
-    <ul>
-        <li *ngFor="let notification of notifications">
-            <h5> {{ notification.text }} </h5>
-            <p *ngIf="notification.description"> {{ notification.description }} </p>
-            <span class="time-stamp"> {{ notification.timeStamp }} </span>
-        </li>
-    </ul>
-
-</section>
+<ul>
+    <li *ngFor="let notification of notifications">
+        <h5> {{ notification.text }} </h5>
+        <p *ngIf="notification.description"> {{ notification.description }} </p>
+        <span class="time-stamp"> {{ notification.timeStamp }} </span>
+    </li>
+</ul>

src/app/notifications/notifications.component.scss

@@ -1,29 +1,31 @@
-header {
-    background-color: white;
-    position: sticky;
-    top: 0;
-    padding: 1.5rem 2rem;
-    border-bottom: 1px solid var(--border-grey);
-
-    h4{
-        font-size: 1.8rem;
-        color: var(--primary);
-        font-weight: 500;
-    }
-}
-
 ul {
     list-style: none;
+    height: 100%;
+    overflow: auto;
+    min-height: 10rem;
+    max-height: 40rem;
 
     li {
         display: block;
-        padding: 1.5rem 2rem;
-        
+        width: calc(100% - 2rem);
+        padding: 1.5rem;
+        cursor: pointer;
+        position: relative;
+        margin: 1rem auto;
+        border: 1px solid var(--border-grey);
+        border-radius: 1rem;
+        line-height: 1.5;
+
+        &:hover {
+            box-shadow: 0px 0px 10px -4px var(--dark-grey);
+        }
 
         h5 {
             font-size: 1.4rem;
             margin: 0 0 0.5rem;
             font-weight: 500;
+            color: var(--highlight);
+            filter: brightness(80%);
         }
 
         p {

src/app/tabs/tabs.component.html

@@ -12,7 +12,8 @@
         <img src="assets/icons/search.svg" alt="search icon">
     </div>
 
-    <button class="notification-button">
+    <button class="notification-button" (click)="showNotifications = true"
+    [ngClass]="{'active' : showNotifications}">
         <img src="assets/icons/bell.svg" alt="bell icon">
 
         <span class="badge"> 9+ </span>
@@ -26,10 +27,15 @@
 
 </section>
 
-<div class="notifications-window">
+<div class="notifications-window" *ngIf="showNotifications">
+    <div class="backdrop" (click)="showNotifications = false"></div>
+    <header>
+        <h4> Notifications </h4>
+    </header>
+
     <app-notifications></app-notifications>
 </div>
 
-<div class="page">
+<div class="page" [ngClass]="{'blur' : showNotifications}">
     <router-outlet></router-outlet>
 </div>

src/app/tabs/tabs.component.scss

@@ -85,6 +85,24 @@ $header-height: 10rem;
         background-color: white;
         margin-left: 2rem;
 
+        &.active {
+            box-shadow: 0px 0px 10px -3px var(--primary);
+            
+            img {
+                filter: brightness(500%);
+            }
+
+            .badge {
+                transform: scale(0);
+            }
+
+            &::before {
+                background-color: var(--highlight);
+                opacity: 1;
+                filter: none;
+            }
+        }
+
         &:hover {
             box-shadow: 0px 0px 10px -3px var(--primary);
         }
@@ -104,6 +122,7 @@ $header-height: 10rem;
             align-items: center;
             justify-content: center;
             font-weight: 600;
+            transition: transform 0.1s;
         }
 
         &::before {
@@ -177,14 +196,53 @@ $header-height: 10rem;
     position: fixed;
     top: calc(#{$header-height} - 1rem);
     background-color: white;
-    width: 40rem;
-    min-height: 10rem;
-    max-height: 40rem;
-    box-shadow: 0px 0px 15px -7px var(--dark-grey);
+    width: 40rem;    
+    box-shadow: 0px 0px 15px -3px var(--dark-grey);
     z-index: 2;
     right: 26rem;
     border-radius: 1.5rem;
-    overflow: auto;
+    overflow: hidden;
+
+
+    header {
+        height: 5rem;
+        padding: 0 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;        
+        width: calc(100% - 2rem);
+        border-radius: 1rem;
+        margin: 1rem auto 0;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--border-grey);
+            opacity: 0.7;
+        }
+    
+        h4{
+            position: relative;
+            font-size: 1.7rem;
+            color: var(--primary);
+            font-weight: 500;
+        }
+    }
+
+    .backdrop {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100vw;
+        height: 100vw;
+        z-index: 0;
+    }
 }
 
 .page {
@@ -192,4 +250,8 @@ $header-height: 10rem;
     margin: 0 auto;
     overflow: auto;
     width: calc(100% - 4rem);
+
+    &.blur {
+        filter: blur(5px);
+    }
 }

src/app/tabs/tabs.component.ts

@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./tabs.component.scss']
 })
 export class TabsComponent implements OnInit {
-    
+    showNotifications: boolean = false;
+
     constructor() {
     }