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

@@ -12,28 +12,34 @@
     <div class="m-proChannelTopbar__SearchBox">
       <div class="mdl-textfield mdl-js-textfield">
         <i class="material-icons">search</i>
-        <input autocomplete="off" class="mdl-textfield__input ng-pristine ng-valid ng-touched" type="text" (keyup)="search()">
+        <input
+          id="search"
+          autocomplete="off"
+          class="mdl-textfield__input ng-pristine ng-valid ng-touched"
+          type="text"
+          (keyup)="search()"
+        >
         <label class="mdl-textfield__label" for="search"></label>
       </div>
     </div>
 
-    <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
-    <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
-    <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
-    <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
-<!--    <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>-->
-    <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
+    <ng-container *ngIf="!collapseNavItems">
+      <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
+      <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
+      <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
+      <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
+      <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
+      <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
+      <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active" *ngIf="!currentUser">Signup / Login</a>
+    </ng-container>
 
-    <ng-container *ngIf="currentUser; else authLink">
+    <ng-container *ngIf="currentUser">
       <a [routerLink]="['/', channel.username]" routerLinkActive="active">
         <minds-avatar [object]="currentUser" [editMode]="false"></minds-avatar>
       </a>
     </ng-container>
-    <ng-template #authLink>
-      <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active">Signup / Login</a>
-    </ng-template>
 
-    <m-pro-user-menu [channelName]="channel.username"></m-pro-user-menu>
+    <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems"></m-pro-user-menu>
   </div>
 
   <div class="m-proChannel__body">

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

@@ -40,10 +40,11 @@ m-pro--channel {
     
       @media screen and (max-width: 1081px) {
         flex-grow: 1;
+        max-width: 300px;
       }
 
       div.mdl-textfield.mdl-js-textfield {
-        width: 180px;
+        width: 100%;
         transition: width ease-in-out .2s;
         padding: 8px 0;
 

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

@@ -3,7 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  HostBinding,
+  HostBinding, HostListener,
   OnDestroy,
   OnInit
 } from '@angular/core';
@@ -33,6 +33,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
   error: string;
 
+  collapseNavItems: boolean;
+
   params$: Subscription;
 
   constructor(
@@ -57,6 +59,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
         this.load();
       }
     });
+
+    this.onResize();
   }
 
   ngOnDestroy() {
@@ -123,6 +127,10 @@ export class ProChannelComponent implements OnInit, OnDestroy {
     return `url(${this.channel.pro_settings.background_image})`;
   }
 
+  @HostListener('window:resize') onResize() {
+    this.collapseNavItems = window.innerWidth <= 992 ? true : false;
+  }
+
   get currentUser() {
     if (!this.session.isLoggedIn()) {
       return null;

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

+m-pro--channel-donate {
+  h1 {
+    font-size: 72px;
+    font-weight: 600;
+    margin: 0 0 0.4em;
+  }
+}

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

@@ -2,6 +2,49 @@
   <a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
 
   <ul class="m-dropdown__list m-pro-user-menu__Dropdown mdl-shadow--3dp" [hidden]="!isOpen">
+    <ng-container *ngIf="showNavItems">
+      <li
+        class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+        (click)="closeMenu()"
+      >
+        <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
+      </li>
+
+      <li
+        class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+        (click)="closeMenu()"
+      >
+        <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
+      </li>
+
+      <li
+        class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+        (click)="closeMenu()"
+      >
+        <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
+      </li>
+
+      <li
+        class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+        (click)="closeMenu()"
+      >
+        <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
+      </li>
+
+      <li
+        class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+        (click)="closeMenu()"
+      >
+        <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
+      </li>
+
+      <li
+        class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+        (click)="closeMenu()"
+      >
+        <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
+      </li>
+    </ng-container>
     <li
       class="m-dropdownList__item m-pro-user-menuDropdown__Item"
       (click)="closeMenu()"
@@ -24,4 +67,4 @@
   </ul>
 </div>
 
-<div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isOpen"></div>
\ No newline at end of file
+<div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isOpen"></div>

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

 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Input } from "@angular/core";
 import { Session } from "../../../../services/session";
 import { ThemeService } from "../../../../common/services/theme.service";
+import { ProChannelService } from "../channel.service";
 
 @Component({
   selector: 'm-pro-user-menu',
@@ -11,8 +12,18 @@ export class ProUserMenuComponent implements OnInit {
   isOpen: boolean = false;
 
   @Input() channelName: string;
-  
-  constructor(protected session: Session, protected cd: ChangeDetectorRef, private themeService: ThemeService) {
+  @Input() showNavItems: boolean;
+
+  get channel() {
+    return this.channelService.currentChannel;
+  }
+
+  constructor(
+    public channelService: ProChannelService,
+    protected session: Session,
+    protected cd: ChangeDetectorRef,
+    private themeService: ThemeService,
+  ) {
   }
 
   getCurrentUser() {