✨ Integrate NavbarService for improved navbar and search state management in NavbarComponent

src/app/components/navbar/navbar.component.ts

@@ -24,6 +24,7 @@ import { PinService } from '../../services/pin/pin.service';
 import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
 import { FriendPageComponent } from '../friend-page/friend-page.component';
 import { AuthService } from '../../services/auth/auth.service';
+import { NavbarService } from '../../services/navbar/navbar.service';
 
 @Component({
   selector: 'app-navbar',
@@ -39,20 +40,9 @@ import { AuthService } from '../../services/auth/auth.service';
 })
 export class NavbarComponent implements OnInit {
   showTimeline: boolean = false;
-
   isSearchOpen: boolean = false;
   isNavbarOpen: boolean = false;
 
-  toggleNavbar() {
-    this.isNavbarOpen = !this.isNavbarOpen;
-    this.isSearchOpen = false;
-  }
-
-  toggleSearch() {
-    this.isSearchOpen = !this.isSearchOpen;
-    this.isNavbarOpen = false;
-  }
-
   pins: Pin[] = [];
   pinsFiltered: Pin[] = [];
   inputFocus: Boolean = false;
@@ -63,11 +53,30 @@ export class NavbarComponent implements OnInit {
     private route: ActivatedRoute,
     private pinService: PinService,
     private fb: FormBuilder,
-    private authService: AuthService
+    private authService: AuthService,
+    private navbarService: NavbarService
   ) {
     this.searchForm = this.fb.group({
       searchControl: new FormControl(''),
     });
+
+    this.navbarService.isSearchOpen$.subscribe(isOpen => {
+      this.isSearchOpen = isOpen;
+      this.isNavbarOpen = false;
+    });
+
+    this.navbarService.isNavbarOpen$.subscribe(isOpen => {
+      this.isNavbarOpen = isOpen;
+      this.isSearchOpen = false;
+    });
+  }
+
+  toggleSearch(): void {
+    this.navbarService.toggleSearch();
+  }
+
+  toggleNavbar(): void {
+    this.navbarService.toggleNavbar();
   }
 
   ngOnInit(): void {

src/app/services/navbar/navbar.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavbarService {
+  private isSearchOpenSubject = new BehaviorSubject<boolean>(false);
+  private isNavbarOpenSubject = new BehaviorSubject<boolean>(false);
+
+  isSearchOpen$ = this.isSearchOpenSubject.asObservable();
+  isNavbarOpen$ = this.isNavbarOpenSubject.asObservable();
+
+  toggleSearch(): void {
+    this.isSearchOpenSubject.next(!this.isSearchOpenSubject.value);
+  }
+
+  toggleNavbar(): void {
+    this.isNavbarOpenSubject.next(!this.isNavbarOpenSubject.value);
+  }
+}