diff --git a/src/app/app.component.scss b/src/app/app.component.scss index f23eafc..cea6550 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -50,10 +50,6 @@ app-sidebar-mobile { left: 0; } - app-sidebar { - display: none; - } - app-sidebar-mobile { display: unset; } diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html index a842e22..f8c4808 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.html +++ b/src/app/components/contacts/contact-detail/contact-detail.component.html @@ -44,6 +44,9 @@

delete

+
+ check +
@@ -62,5 +65,10 @@
+ } @if (isMobileNavbarOpen) { + } diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss index f83bc1b..31128a3 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.scss +++ b/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 { diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts index 585ecc6..fdad017 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.ts +++ b/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; diff --git a/src/app/components/contacts/contact-edit/contact-edit.component.ts b/src/app/components/contacts/contact-edit/contact-edit.component.ts index 4b64e91..d78e8d9 100644 --- a/src/app/components/contacts/contact-edit/contact-edit.component.ts +++ b/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', diff --git a/src/app/components/contacts/contact-nav/contact-nav.component.html b/src/app/components/contacts/contact-nav/contact-nav.component.html new file mode 100644 index 0000000..a0ac511 --- /dev/null +++ b/src/app/components/contacts/contact-nav/contact-nav.component.html @@ -0,0 +1,8 @@ + diff --git a/src/app/components/contacts/contact-nav/contact-nav.component.scss b/src/app/components/contacts/contact-nav/contact-nav.component.scss new file mode 100644 index 0000000..cda465e --- /dev/null +++ b/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); + } + } +} diff --git a/src/app/components/contacts/contact-nav/contact-nav.component.spec.ts b/src/app/components/contacts/contact-nav/contact-nav.component.spec.ts new file mode 100644 index 0000000..19227f5 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ContactNavComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ContactNavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/contacts/contact-nav/contact-nav.component.ts b/src/app/components/contacts/contact-nav/contact-nav.component.ts new file mode 100644 index 0000000..826c8a0 --- /dev/null +++ b/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) {} +} diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss index 268723a..368dc5a 100644 --- a/src/app/components/contacts/contacts.component.scss +++ b/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; diff --git a/src/assets/img/contact/points.svg b/src/assets/img/contact/points.svg new file mode 100644 index 0000000..5100089 --- /dev/null +++ b/src/assets/img/contact/points.svg @@ -0,0 +1,3 @@ + + +