added contact btn & nav

src/app/app.component.scss

@@ -50,10 +50,6 @@ app-sidebar-mobile {
     left: 0;
   }
 
-  app-sidebar {
-    display: none;
-  }
-
   app-sidebar-mobile {
     display: unset;
   }

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -44,6 +44,9 @@
             <p (click)="deleteContact()">delete</p>
           </div>
         </div>
+        <div class="btn-mobile" (click)="toggleNav()">
+          <img src="./../../../assets/img/contact/points.svg" alt="check" />
+        </div>
       </div>
     </div>
     <div class="contact word-wrap">
@@ -62,5 +65,10 @@
       </div>
     </div>
   </div>
+  } @if (isMobileNavbarOpen) {
+  <app-contact-nav
+    [deleteContact]="deleteContact"
+    [openEditDialog]="openEditDialog"
+  ></app-contact-nav>
   }
 </section>

src/app/components/contacts/contact-detail/contact-detail.component.scss

@@ -126,6 +126,31 @@
   }
 }
 
+.btn-mobile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 100px;
+  right: 20px;
+  height: 56px;
+  width: 56px;
+  border-radius: 100%;
+  border: 0;
+  background-color: var(--dark-blue);
+  z-index: 1;
+  cursor: pointer;
+  img {
+    padding: 0;
+    width: 7px;
+    height: 32px;
+  }
+  &:hover {
+    background-color: var(--light-blue);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
 /*------------- ANIMATION -------------*/
 
 .animation-coming-in {

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -5,17 +5,24 @@ import { ContactsComponent } from '../contacts.component';
 import { Router } from '@angular/router';
 import { ContactEditComponent } from '../contact-edit/contact-edit.component';
 import { SharedService } from '../../../services/shared.service';
-
+import { ContactNavComponent } from '../contact-nav/contact-nav.component';
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
-  imports: [CommonModule, ContactsComponent, ContactEditComponent],
+  imports: [
+    CommonModule,
+    ContactsComponent,
+    ContactEditComponent,
+    ContactNavComponent,
+  ],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',
 })
 export class ContactDetailComponent {
   @Input() currentUserId!: string | undefined;
 
+  isMobileNavbarOpen: boolean = false;
+
   constructor(
     public userService: UserService,
     private router: Router,
@@ -26,6 +33,10 @@ export class ContactDetailComponent {
     this.router.navigate(['contacts']);
   }
 
+  toggleNav() {
+    this.isMobileNavbarOpen = !this.isMobileNavbarOpen;
+  }
+
   openEditDialog() {
     this.sharedService.isAnyDialogOpen = true;
     this.sharedService.isEditContactDialogOpen = true;

src/app/components/contacts/contact-edit/contact-edit.component.ts

@@ -2,7 +2,6 @@ import { Component, Input } from '@angular/core';
 import { ContactFormComponent } from '../contact-form/contact-form.component';
 import { CommonModule } from '@angular/common';
 import { UserService } from '../../../services/user.service';
-import { SharedService } from '../../../services/shared.service';
 
 @Component({
   selector: 'app-contact-edit',

src/app/components/contacts/contact-nav/contact-nav.component.html

@@ -0,0 +1,8 @@
+<nav class="navbar">
+  <div class="link btn-edit">
+    <span (click)="openEditDialog()">Edit</span>
+  </div>
+  <div class="link btn-delete">
+    <span (click)="deleteContact()">Delete</span>
+  </div>
+</nav>

src/app/components/contacts/contact-nav/contact-nav.component.scss

@@ -0,0 +1,37 @@
+.navbar {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  bottom: 146px;
+  right: 80px;
+  width: 110px;
+  height: 108px;
+  background-color: var(--bgSidebar);
+  border-radius: 20px 20px 0 20px;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  z-index: 5;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  height: 46px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: var(--white);
+  cursor: pointer;
+  span {
+    text-align: center;
+    width: 118px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+  }
+  &:hover {
+    background-color: var(--very-dark-blue);
+    span {
+      color: var(--light-blue);
+    }
+  }
+}

src/app/components/contacts/contact-nav/contact-nav.component.spec.ts

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

src/app/components/contacts/contact-nav/contact-nav.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { SharedService } from '../../../services/shared.service';
+
+@Component({
+  selector: 'app-contact-nav',
+  standalone: true,
+  imports: [],
+  templateUrl: './contact-nav.component.html',
+  styleUrl: './contact-nav.component.scss',
+})
+export class ContactNavComponent {
+  @Input() deleteContact!: () => any;
+  @Input() openEditDialog!: () => any;
+
+  constructor(public sharedService: SharedService) {}
+}

src/app/components/contacts/contacts.component.scss

@@ -191,7 +191,7 @@
   .btn {
     position: fixed;
     bottom: 100px;
-    right: 40px;
+    right: 20px;
     justify-content: space-between;
     height: 56px;
     width: 56px;

src/assets/img/contact/points.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="22" viewBox="0 0 6 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.99967 21.6666C2.26634 21.6666 1.63856 21.4055 1.11634 20.8833C0.594119 20.361 0.333008 19.7333 0.333008 18.9999C0.333008 18.2666 0.594119 17.6388 1.11634 17.1166C1.63856 16.5944 2.26634 16.3333 2.99967 16.3333C3.73301 16.3333 4.36079 16.5944 4.88301 17.1166C5.40523 17.6388 5.66634 18.2666 5.66634 18.9999C5.66634 19.7333 5.40523 20.361 4.88301 20.8833C4.36079 21.4055 3.73301 21.6666 2.99967 21.6666ZM2.99967 13.6666C2.26634 13.6666 1.63856 13.4055 1.11634 12.8833C0.594119 12.361 0.333008 11.7333 0.333008 10.9999C0.333008 10.2666 0.594119 9.63881 1.11634 9.11659C1.63856 8.59436 2.26634 8.33325 2.99967 8.33325C3.73301 8.33325 4.36079 8.59436 4.88301 9.11659C5.40523 9.63881 5.66634 10.2666 5.66634 10.9999C5.66634 11.7333 5.40523 12.361 4.88301 12.8833C4.36079 13.4055 3.73301 13.6666 2.99967 13.6666ZM2.99967 5.66659C2.26634 5.66659 1.63856 5.40547 1.11634 4.88325C0.594119 4.36103 0.333008 3.73325 0.333008 2.99992C0.333008 2.26659 0.594119 1.63881 1.11634 1.11659C1.63856 0.594363 2.26634 0.333252 2.99967 0.333252C3.73301 0.333252 4.36079 0.594363 4.88301 1.11659C5.40523 1.63881 5.66634 2.26659 5.66634 2.99992C5.66634 3.73325 5.40523 4.36103 4.88301 4.88325C4.36079 5.40547 3.73301 5.66659 2.99967 5.66659Z" fill="white"/>
+</svg>