From a68c2a2be66e31b943455acb6119097b0f3b3e2c Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Wed, 1 Nov 2023 17:47:20 +0900
Subject: [PATCH] [css] fix search bar align issue when hamburger icon is
 showing

---
 .../app/components/master-page/master-page.component.html  | 2 +-
 .../app/components/search-form/search-form.component.html  | 2 +-
 .../app/components/search-form/search-form.component.scss  | 7 +++++++
 .../app/components/search-form/search-form.component.ts    | 4 +++-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index c1327cd11..748055ea8 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -71,7 +71,7 @@
         <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
       </li>
     </ul>
-    <app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
+    <app-search-form [hamburgerOpen]="user != null" class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
   </div>
 </nav>
 </header>
diff --git a/frontend/src/app/components/search-form/search-form.component.html b/frontend/src/app/components/search-form/search-form.component.html
index 3fc03c83a..73e9d0501 100644
--- a/frontend/src/app/components/search-form/search-form.component.html
+++ b/frontend/src/app/components/search-form/search-form.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
+<form [class]="{hamburgerOpen: hamburgerOpen}" [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
   <div class="d-flex">
     <div class="search-box-container mr-2">
       <input #searchInput (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="Explore the full Bitcoin ecosystem">
diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index 534bf0698..961b797df 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -26,6 +26,13 @@ form {
   @media (min-width: 992px) {
     width: 100%;
   }
+
+  &.hamburgerOpen {
+    @media (max-width: 613px) {
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+  }
 }
 
 .btn-block {
diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts
index 0a794d1f5..902379552 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, ElementRef } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, ElementRef, Input } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { EventType, NavigationStart, Router } from '@angular/router';
 import { AssetsService } from '../../services/assets.service';
@@ -17,6 +17,8 @@ import { SearchResultsComponent } from './search-results/search-results.componen
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchFormComponent implements OnInit {
+  @Input() hamburgerOpen = false;
+  
   network = '';
   assets: object = {};
   isSearching = false;