💄 add overlay in responsive design

Author: marcode24

src/app/core/components/header/header.component.ts

@@ -9,5 +9,7 @@ export class HeaderComponent {
   changeVisibilitySidebar(): void {
     const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
     sidebarElement.classList.toggle('closed');
+    const overlayElement = document.querySelector('.overlay') as HTMLElement;
+    overlayElement.classList.toggle('opened');
   }
 }

src/app/core/components/sidebar/sidebar.component.html

@@ -30,3 +30,5 @@
     </li>
   </ul>
 </nav>
+
+<div class="overlay" #overlay (click)="changeVisibilitySidebar()"></div>

src/app/core/components/sidebar/sidebar.component.scss

@@ -144,3 +144,25 @@ nav {
     justify-content: center;
   }
 }
+
+.overlay {
+  background-color: rgba(71, 80, 87, 0.4);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99;
+  transition: left 0.3s ease-in-out;
+
+  &.opened {
+    position: fixed;
+    opacity: 1;
+    left: 250px;
+    transition: left 0.3s ease-in-out;
+  }
+
+  @media (min-width: 769px) {
+    display: none;
+  }
+}

src/app/core/components/sidebar/sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
@@ -13,6 +13,8 @@ import { FileService } from '@services/file.service';
 export class SidebarComponent implements OnDestroy, OnInit {
   userActive = this.authService.userActive;
   private totalSizeSubscription: Subscription;
+  @ViewChild('overlay') overlay: ElementRef;
+
   constructor(
     private authService: AuthService,
     private fileService: FileService
@@ -36,5 +38,6 @@ export class SidebarComponent implements OnDestroy, OnInit {
   changeVisibilitySidebar(): void {
     const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
     sidebarElement.classList.toggle('closed');
+    this.overlay.nativeElement.classList.toggle('opened');
   }
 }

src/app/features/folder/folder.component.html

@@ -1,5 +1,5 @@
+<app-actions [folder]="folder"></app-actions>
 <div class="fluid-container" *ngIf="!loading && folder">
-  <app-actions [folder]="folder"></app-actions>
   <div class="not-items" *ngIf="!allFiles.length">
     <img src="assets/images/no-files.svg" alt="no-files-image">
     <span class="description">Agrega tu primer archivo o carpeta</span>

src/app/features/home/home.component.html

@@ -1,5 +1,5 @@
+<app-actions [folder]="root"></app-actions>
 <div class="fluid-container">
-  <app-actions [folder]="root"></app-actions>
   <div class="not-items" *ngIf="root.folders.length < 1 && root.files.length < 1">
     <img src="assets/images/no-files.svg" alt="no-files-image">
     <span class="description">Agrega tu primer archivo o carpeta</span>

src/app/shared/headers/actions/actions.component.html

@@ -1,19 +1,21 @@
-<header class="actions">
-  <app-breadcrumb></app-breadcrumb>
-  <div class="new">
-    <button #btnDrop class="btn btn-primary btn-select" (click)="openDrop(btnDrop)">
-      <span class="title">Nuevo</span>
-      <i class="bx bx-plus"></i>
-    </button>
-    <ul class="list-items">
-      <li class="item" (click)="openNewFolderModal(btnDrop)">
-        <i class="bx bx-folder-plus"></i>
-        <span class="title">Carpeta nueva</span>
-      </li>
-      <li class="item" (click)="openNewFileModal(btnDrop)">
-        <i class="bx bx-upload"></i>
-        <span class="title">Subir archivo</span>
-      </li>
-    </ul>
+<header>
+  <div class="actions">
+    <app-breadcrumb></app-breadcrumb>
+    <div class="new">
+      <button #btnDrop class="btn btn-primary btn-select" (click)="openDrop(btnDrop)">
+        <span class="title">Nuevo</span>
+        <i class="bx bx-plus"></i>
+      </button>
+      <ul class="list-items">
+        <li class="item" (click)="openNewFolderModal(btnDrop)">
+          <i class="bx bx-folder-plus"></i>
+          <span class="title">Carpeta nueva</span>
+        </li>
+        <li class="item" (click)="openNewFileModal(btnDrop)">
+          <i class="bx bx-upload"></i>
+          <span class="title">Subir archivo</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </header>

src/app/shared/headers/actions/actions.component.scss

@@ -18,11 +18,26 @@
   display: block;
 }
 
+header {
+  position: fixed;
+  background: var(--bg);
+  z-index: 90;
+  width: -webkit-fill-available;
+  height: 60px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 17px 24px 0px, rgba(0, 0, 0, 0.08) 0px 1px 0px 1px;
+
+  @include width-medium {
+    height: 55px;
+  }
+}
+
 .actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  padding: 0.6rem 1rem;
+  height: 100%;
 }
 
 .list-items {

src/app/shared/modals/new-folder/new-folder.component.scss

@@ -0,0 +1,3 @@
+.modal-content {
+  max-width: 30rem;
+}

src/app/shared/modals/update-name/update-name.component.scss

@@ -0,0 +1,3 @@
+.modal-content {
+  max-width: 30rem;
+}