src/app/modules/pro/channel/channel.component.html

@@ -7,21 +7,11 @@
     />
 
     <div class="m-proChannelTopbar__SearchBox">
-      <div class="mdl-textfield mdl-js-textfield">
-        <i class="material-icons search">search</i>
-        <input
-          [(ngModel)]="query"
-          id="search"
-          autocomplete="off"
-          class="mdl-textfield__input ng-pristine ng-valid ng-touched"
-          type="text"
-          (keyup.enter)="search()"
-        />
-        <ng-container *ngIf="query">
-          <i class="material-icons clear" (click)="clearSearch()">close</i>
-        </ng-container>
-        <label class="mdl-textfield__label" for="search"></label>
-      </div>
+      <m-pro__searchBox
+        [(query)]="query"
+        (onSearch)="search()"
+        (onClearSearch)="clearSearch()"
+      ></m-pro__searchBox>
     </div>
 
     <ng-container *ngIf="!collapseNavItems">
@@ -99,7 +89,11 @@
       </ng-template>
     </ng-container>
 
-    <m-pro__hamburger-menu></m-pro__hamburger-menu>
+    <m-pro__hamburger-menu
+      [(query)]="query"
+      (onSearch)="search()"
+      (onClearSearch)="clearSearch()"
+    ></m-pro__hamburger-menu>
   </div>
 
   <div class="m-proChannel__body">

src/app/modules/pro/channel/channel.component.scss

@@ -104,56 +104,6 @@ m-pro--channel {
         flex-grow: 1;
         max-width: 300px;
       }
-
-      div.mdl-textfield.mdl-js-textfield {
-        width: 100%;
-        transition: width ease-in-out 0.2s;
-        padding: 8px 0;
-
-        i.search {
-          position: absolute;
-          margin: 6px;
-          font-size: 20px;
-
-          @include m-theme() {
-            color: themed($m-black);
-          }
-        }
-
-        i.clear {
-          font-size: 16px;
-
-          border-radius: 20px;
-          cursor: pointer;
-          position: absolute;
-          top: 16px;
-          right: 10px;
-
-          @include m-theme() {
-            color: themed($m-black);
-          }
-        }
-
-        input {
-          height: 32px;
-          border-radius: 18px;
-          font-family: Roboto, sans-serif;
-          font-size: 14px;
-          letter-spacing: 0.5px;
-          font-weight: 600;
-          text-rendering: optimizeLegibility;
-          -webkit-font-smoothing: antialiased;
-          padding: 8px 8px 8px 32px;
-          box-sizing: border-box;
-
-          color: var(--m-pro--text-color);
-          background-color: var(--m-pro--transparent-background-color);
-        }
-
-        label {
-          display: none;
-        }
-      }
     }
 
     .m-btn:disabled {

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.html

@@ -79,6 +79,15 @@
       </a>
     </li>
 
+    <li class="m-pro__hamburger-menu-menu__search-box">
+      <m-pro__searchBox
+        [query]="query"
+        (queryChange)="queryChange.emit($event)"
+        (onSearch)="onSearch.emit($event); closeMenu()"
+        (onClearSearch)="onClearSearch.emit($event); closeMenu()"
+      ></m-pro__searchBox>
+    </li>
+
     <li class="m-pro__hamburger-menu-menu__spacer"></li>
 
     <ng-container *ngIf="items && items.length">

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.scss

@@ -69,6 +69,19 @@ m-pro__hamburger-menu {
           }
         }
 
+        &.m-pro__hamburger-menu-menu__search-box {
+          > m-pro__searchbox {
+            width: 100%;
+            display: block;
+            margin: 0 auto 16px;
+
+            .mdl-textfield__input {
+              border: 1px solid var(--m-pro--text-color);
+              border-radius: 6px;
+            }
+          }
+        }
+
         &.m-pro__hamburger-menu-menu__spacer {
           height: 0;
           border-top: 1px solid var(--m-pro--text-color);

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  Input,
   Output,
 } from '@angular/core';
 import { ProChannelService } from '../channel.service';
@@ -13,6 +14,14 @@ import { Session } from '../../../../services/session';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProHamburgerMenu {
+  @Input() query: string = '';
+
+  @Output() queryChange: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output() onSearch: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output() onClearSearch: EventEmitter<void> = new EventEmitter<void>();
+
   constructor(
     protected service: ProChannelService,
     protected session: Session

src/app/modules/pro/channel/search-box/search-box.component.html

+<div class="mdl-textfield mdl-js-textfield m-pro__searchBox">
+  <i class="material-icons search">search</i>
+  <input
+    [ngModel]="query"
+    (ngModelChange)="queryChange.emit($event)"
+    id="search"
+    autocomplete="off"
+    class="mdl-textfield__input ng-pristine ng-valid ng-touched"
+    type="text"
+    (keyup.enter)="onSearch.emit()"
+  />
+  <ng-container *ngIf="query">
+    <i class="material-icons clear" (click)="onClearSearch.emit()">close</i>
+  </ng-container>
+  <label class="mdl-textfield__label" for="search"></label>
+</div>

src/app/modules/pro/channel/search-box/search-box.component.scss

+div.mdl-textfield.mdl-js-textfield.m-pro__searchBox {
+  width: 100%;
+  transition: width ease-in-out 0.2s;
+  padding: 8px 0;
+
+  i.search {
+    position: absolute;
+    margin: 6px;
+    font-size: 20px;
+
+    @include m-theme() {
+      color: themed($m-black);
+    }
+  }
+
+  i.clear {
+    font-size: 16px;
+
+    border-radius: 20px;
+    cursor: pointer;
+    position: absolute;
+    top: 16px;
+    right: 10px;
+
+    @include m-theme() {
+      color: themed($m-black);
+    }
+  }
+
+  input {
+    height: 32px;
+    border-radius: 18px;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    padding: 8px 8px 8px 32px;
+    box-sizing: border-box;
+
+    color: var(--m-pro--text-color);
+    background-color: var(--m-pro--transparent-background-color);
+  }
+
+  label {
+    display: none;
+  }
+}

src/app/modules/pro/channel/search-box/search-box.component.ts

+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Component({
+  selector: 'm-pro__searchBox',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'search-box.component.html',
+})
+export class SearchBoxComponent {
+  @Input() query: string = '';
+
+  @Output() queryChange: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output() onSearch: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output() onClearSearch: EventEmitter<void> = new EventEmitter<void>();
+}

src/app/modules/pro/pro.module.ts

@@ -33,6 +33,7 @@ import { ForgotPasswordComponent } from '../auth/forgot-password/forgot-password
 import { AuthModule } from '../auth/auth.module';
 import { ProHamburgerMenu } from './channel/hamburger-menu/hamburger-menu.component';
 import { SubscribeButtonComponent } from './channel/subscribe-button/subscribe-button.component';
+import { SearchBoxComponent } from './channel/search-box/search-box.component';
 
 const routes: Routes = [
   {
@@ -156,6 +157,7 @@ export const PRO_DOMAIN_ROUTES = [
     ProUnsubscribeModalComponent,
     ProHamburgerMenu,
     SubscribeButtonComponent,
+    SearchBoxComponent,
   ],
   exports: [ProChannelComponent],
   entryComponents: [

src/app/services/api/client.ts

@@ -47,8 +47,11 @@ export class Client {
             return reject(err || new Error('GET error'));
           }
           if (err.status === 401 && err.error.loggedin === false) {
-            localStorage.setItem('redirect', this.location.path());
-            window.location.href = '/login';
+            if (this.location.path() !== '/login') {
+              localStorage.setItem('redirect', this.location.path());
+              window.location.href = '/login';
+            }
+
             return reject(err);
           }
           return reject(err);
@@ -104,8 +107,11 @@ export class Client {
               return reject(err || new Error('POST error'));
             }
             if (err.status === 401 && err.error.loggedin === false) {
-              localStorage.setItem('redirect', this.location.path());
-              window.location.href = '/login';
+              if (this.location.path() !== '/login') {
+                localStorage.setItem('redirect', this.location.path());
+                window.location.href = '/login';
+              }
+
               return reject(err);
             }
             if (err.status !== 200) {
@@ -136,8 +142,11 @@ export class Client {
           },
           err => {
             if (err.status === 401 && err.data().loggedin === false) {
-              localStorage.setItem('redirect', this.location.path());
-              window.location.href = '/login';
+              if (this.location.path() !== '/login') {
+                localStorage.setItem('redirect', this.location.path());
+                window.location.href = '/login';
+              }
+
               return reject(err);
             }
             if (err.status !== 200) {
@@ -164,8 +173,11 @@ export class Client {
           },
           err => {
             if (err.status === 401 && err.error.loggedin === false) {
-              localStorage.setItem('redirect', this.location.path());
-              window.location.href = '/login';
+              if (this.location.path() !== '/login') {
+                localStorage.setItem('redirect', this.location.path());
+                window.location.href = '/login';
+              }
+
               return reject(err);
             }
             if (err.status !== 200) {