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() {