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

@@ -119,81 +119,7 @@
  </ng-template>
  </ng-container>
 
- <div class="m-proChannelTopbar_menu m-dropdown">
- <a
- class="m-proChannelTopbarMenu__Anchor"
- (click)="toggleMenu()"
- >
- <i class="material-icons">menu</i>
- </a>
-
- <ul
- class="m-dropdown__list m-proChannelTopbarMenu__dropdown mdl-shadow--3dp"
- [hidden]="!isMenuOpen"
- >
- <ng-container *ngIf="collapseNavItems">
- <li
- class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
- (click)="closeMenu()"
- >
- <a
- [routerLink]="feedRouterLink" routerLinkActive="active" i18n>
- Feed
- </a>
- </li>
- <li
- class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="videosRouterLink" routerLinkActive="active" i18n>
- Videos
- </a>
- </li>
-
- <li
- class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="imagesRouterLink" routerLinkActive="active" i18n>
- Images
- </a>
- </li>
-
- <li
- class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="articlesRouterLink" routerLinkActive="active" i18n>
- Articles
- </a>
- </li>
-
- <li
- class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="groupsRouterLink" routerLinkActive="active" i18n>
- Groups
- </a>
- </li>
-
- <li
- class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
- (click)="closeMenu()"
- >
- <a (click)="wire()" routerLinkActive="active">
- Wire
- </a>
- </li>
- </ng-container>
- </ul>
- </div>
-
- <div
- class="minds-bg-overlay"
- (click)="closeMenu()"
- [hidden]="!isMenuOpen"
- ></div>
+ <m-pro__hamburger-menu></m-pro__hamburger-menu>
  </div>
 
  <div class="m-proChannel__body">

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

@@ -13,6 +13,12 @@ m-pro--channel {
  background-blend-mode: overlay;
  background-color: var(--m-pro--transparent-background-color) !important;
 
+ m-pro__hamburger-menu {
+ @media screen and (min-width: ($max-mobile + 1px)) {
+ display: none;
+ }
+ }
+
  m-blog-view.m-blog {
  color: var(--m-pro--text-color);
 
@@ -42,7 +48,7 @@ m-pro--channel {
  }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: $max-mobile) {
  .m-pro--channel {
  .m-proChannelTopbar__SearchBox {
  display: none;
@@ -149,41 +155,6 @@ m-pro--channel {
  }
  }
 
- .m-proChannelTopbar_menu.m-dropdown {
- display: inline-block;
- position: relative;
- cursor: pointer;
-
- @media screen and (min-width: 1000px) {
- display: none;
- }
-
- .m-proChannelTopbarMenu__dropdown {
- list-style: none;
- margin: 34px 0 0;
- @include m-theme() {
- background-color: themed($m-white);
- color: themed($m-grey-700);
- }
-
- li.proChannelTopbarMenuDropdown__item {
- &:hover {
- @include m-theme() {
- background-color: rgba(themed('m-grey-50'), 0.5);
- }
- }
-
- a {
- color: #555 !important;
- }
-
- i {
- color: #555 !important;
- }
- }
- }
- }
-
  .m-proChannelTopbar__subscribe {
  appearance: none;
  font-size: 12px;
@@ -234,6 +205,11 @@ m-pro--channel {
  grid-row: 2 / span 1;
  grid-column: 1 / span 12;
  padding: 0 32px;
+
+ @media screen and (max-width: $max-mobile) {
+ grid-row: 2 / span 2;
+ margin-bottom: 24px;
+ }
  }
 
  .m-proChannel__footer {
@@ -242,13 +218,8 @@ m-pro--channel {
  width: 80%;
  margin: 0 auto;
 
- @media screen and (max-width: 480px) {
- margin-top: 8px;
- margin-bottom: 8px;
-
- .m-pro--channel-footer > * {
- padding: 4px;
- }
+ @media screen and (max-width: $max-mobile) {
+ display: none;
  }
  }
 

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

@@ -22,7 +22,6 @@ import { SignupModalService } from '../../../modules/modals/signup/service';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
 import { ProUnsubscribeModalComponent } from './unsubscribe-modal/modal.component';
 import { OverlayModalComponent } from '../../../common/components/overlay-modal/overlay-modal.component';
-import { WireCreatorComponent } from '../../wire/creator/creator.component';
 
 @Component({
  providers: [ProChannelService, OverlayModalService],
@@ -47,8 +46,6 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
 
  params$: Subscription;
 
- isMenuOpen: boolean = false;
-
  channel$: Subscription;
 
  subscribersCount: number;
@@ -247,11 +244,7 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  }
 
  wire() {
- this.modalService
- .create(WireCreatorComponent, this.channelService.currentChannel, {
- onComplete: () => {},
- })
- .present();
+ this.channelService.wire();
  }
 
  @HostBinding('style.backgroundImage') get backgroundImageCssValue() {
@@ -274,14 +267,6 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  this.collapseNavItems = window.innerWidth <= 992;
  }
 
- toggleMenu() {
- this.isMenuOpen = !this.isMenuOpen;
- }
-
- closeMenu() {
- this.isMenuOpen = false;
- }
-
  search(): Promise<boolean> {
  return this.router.navigate(
  this.channelService.getRouterLink('all', { query: this.query })

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

@@ -7,6 +7,7 @@ import normalizeUrn from '../../../helpers/normalize-urn';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
 import { Session } from '../../../services/session';
 import { ActivatedRoute } from '@angular/router';
+import { WireCreatorComponent } from '../../wire/creator/creator.component';
 
 export type RouterLinkToType =
  | 'home'
@@ -19,6 +20,12 @@ export type RouterLinkToType =
  | 'donate'
  | 'login';
 
+
+export interface NavItems {
+ label: string;
+ onClick: () => void
+}
+
 @Injectable()
 export class ProChannelService {
  currentChannel: MindsUser;
@@ -27,11 +34,14 @@ export class ProChannelService {
 
  protected featuredContent: Array<any> | null;
 
+ protected menuNavItems: Array<NavItems> = [];
+
  constructor(
  protected client: Client,
  protected entitiesService: EntitiesService,
  protected session: Session,
- protected route: ActivatedRoute
+ protected route: ActivatedRoute,
+ protected modalService: OverlayModalService,
  ) {}
 
  async load(id: string) {
@@ -264,4 +274,30 @@ export class ProChannelService {
  console.error(e);
  }
  }
+
+ wire() {
+ this.modalService
+ .create(WireCreatorComponent, this.currentChannel, {
+ onComplete: () => {},
+ })
+ .present();
+ }
+
+ pushMenuNavItems(navItems: Array<NavItems>, clean?: boolean) {
+ if (clean) {
+ this.destroyMenuNavItems();
+ }
+
+ this.menuNavItems = this.menuNavItems.concat(navItems);
+ return this;
+ }
+
+ destroyMenuNavItems() {
+ this.menuNavItems = [];
+ return this;
+ }
+
+ getMenuNavItems(): Array<NavItems> {
+ return this.menuNavItems;
+ }
 }

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

+<a
+ class="m-pro__hamburger-menu__trigger"
+ (click)="toggleMenu()"
+>
+ <i class="material-icons">menu</i>
+</a>
+
+<div class="m-pro__hamburger-menu__menu">
+ <a
+ class="m-pro__hamburger-menu__close"
+ (click)="closeMenu()"
+ >
+ <i class="material-icons">close</i>
+ </a>
+
+ <ul>
+ <li class="m-pro__hamburger-menu-menu__logo" *ngIf="channel">
+ <img
+ [src]="channel.pro_settings.logo_image"
+ [routerLink]="homeRouterLink"
+ />
+ </li>
+
+ <li>
+ <a
+ [routerLink]="feedRouterLink"
+ (click)="closeMenu()"
+ i18n
+ >Feed</a>
+ </li>
+
+ <li>
+ <a
+ [routerLink]="videosRouterLink"
+ (click)="closeMenu()"
+ i18n
+ >Videos</a>
+ </li>
+
+ <li>
+ <a
+ [routerLink]="imagesRouterLink"
+ (click)="closeMenu()"
+ i18n
+ >Images</a>
+ </li>
+
+ <li>
+ <a
+ [routerLink]="articlesRouterLink"
+ (click)="closeMenu()"
+ i18n
+ >Articles</a>
+ </li>
+
+ <li>
+ <a
+ [routerLink]="groupsRouterLink"
+ (click)="closeMenu()"
+ i18n
+ >Groups</a>
+ </li>
+
+ <li>
+ <a (click)="wire(); closeMenu()" routerLinkActive="active"
+ >Wire</a>
+ </li>
+
+ <li class="m-pro__hamburger-menu-menu__spacer"></li>
+
+ <li *ngFor="let item of items">
+ <a
+ (click)="item.onClick(); closeMenu()"
+ >{{ item.label }}</a>
+ </li>
+
+ </ul>
+</div>

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

+m-pro__hamburger-menu {
+ position: relative;
+
+ .m-pro__hamburger-menu__menu {
+ right: -110%;
+ visibility: hidden;
+
+ position: fixed;
+ width: 95vw;
+ z-index: 999999999;
+ top: 0;
+ bottom: 0;
+ background: var(--m-pro--plain-background-color);
+ color: var(--m-pro--text-color);
+ box-sizing: border-box;
+ transition: right 0.3s ease-in;
+
+ body.hamburger-menu--open & {
+ right: 0;
+ visibility: visible;
+ }
+
+ .m-pro__hamburger-menu__close {
+ position: absolute;
+ top: 30px;
+ right: 40px;
+ padding: 8px;
+ z-index: 9999;
+ }
+
+ > ul {
+ position: absolute;
+ padding: 0 16px 16px;
+ list-style: none;
+ margin: 0;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ box-sizing: border-box;
+
+ > li {
+ margin: 0;
+ padding: 0;
+ display: block;
+ font-size: 18px;
+ line-height: 1.25;
+ text-transform: uppercase;
+ font-weight: 700;
+ letter-spacing: 1px;
+
+ &.m-pro__hamburger-menu-menu__logo {
+ > img {
+ width: auto;
+ height: 100px;
+ margin-left: -4px;
+ }
+ }
+
+ &.m-pro__hamburger-menu-menu__spacer {
+ height: 0;
+ border-top: 1px solid var(--m-pro--text-color);
+ margin: 16px 0;
+ }
+
+ > a {
+ font: inherit;
+ text-decoration: none;
+ padding: 12px 0;
+ display: block;
+ }
+ }
+ }
+ }
+}
+
+body.hamburger-menu--open {
+ overflow: hidden;
+}

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

+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ProChannelService } from '../channel.service';
+
+@Component({
+ selector: 'm-pro__hamburger-menu',
+ templateUrl: 'hamburger-menu.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProHamburgerMenu {
+ constructor(
+ protected service: ProChannelService
+ ) { }
+
+ toggleMenu() {
+ if (document.body) {
+ if (document.body.classList.contains('hamburger-menu--open')) {
+ document.body.classList.remove('hamburger-menu--open');
+ } else {
+ document.body.classList.add('hamburger-menu--open');
+ }
+ }
+ }
+
+ closeMenu() {
+ if (document.body && document.body.classList.contains('hamburger-menu--open')) {
+ document.body.classList.remove('hamburger-menu--open');
+ }
+ }
+
+ get homeRouterLink() {
+ return this.service.getRouterLink('home');
+ }
+
+ get feedRouterLink() {
+ return this.service.getRouterLink('feed');
+ }
+
+ get videosRouterLink() {
+ return this.service.getRouterLink('videos');
+ }
+
+ get imagesRouterLink() {
+ return this.service.getRouterLink('images');
+ }
+
+ get articlesRouterLink() {
+ return this.service.getRouterLink('articles');
+ }
+
+ get groupsRouterLink() {
+ return this.service.getRouterLink('groups');
+ }
+
+ wire() {
+ this.service.wire();
+ }
+
+ get items() {
+ return this.service.getMenuNavItems();
+ }
+
+ get channel() {
+ return this.service.currentChannel;
+ }
+}

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

 .m-pro--channel-home {
  m-pro--channel--categories {
  margin: 16px 0 32px;
+
+ @media screen and (max-width: $max-mobile) {
+ display: none;
+ }
  }
 
  .m-pro--channel-home--section {

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

 import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
- Component,
+ Component, OnDestroy,
  OnInit,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import { ProChannelService } from '../channel.service';
+import { NavItems, ProChannelService } from '../channel.service';
 import { OverlayModalService } from '../../../../services/ux/overlay-modal';
 
 @Component({
@@ -14,7 +14,7 @@ import { OverlayModalService } from '../../../../services/ux/overlay-modal';
  changeDetection: ChangeDetectionStrategy.Default,
  templateUrl: 'home.component.html',
 })
-export class ProChannelHomeComponent implements OnInit {
+export class ProChannelHomeComponent implements OnInit, OnDestroy {
  inProgress: boolean = false;
 
  featuredContent: Array<any> = [];
@@ -35,6 +35,11 @@ export class ProChannelHomeComponent implements OnInit {
 
  ngOnInit() {
  this.load();
+ this.setMenuNavItems();
+ }
+
+ ngOnDestroy() {
+ this.channelService.destroyMenuNavItems();
  }
 
  async load() {
@@ -69,6 +74,18 @@ export class ProChannelHomeComponent implements OnInit {
  this.detectChanges();
  }
 
+ setMenuNavItems() {
+ const tags = this.channelService.currentChannel.pro_settings.tag_list.concat([]);
+ const navItems: Array<NavItems> = tags.map(tag => ({
+ label: tag.label,
+ onClick: () => {
+ this.navigateToCategory(tag.tag)
+ }
+ }));
+
+ this.channelService.pushMenuNavItems(navItems, true);
+ }
+
  getCategoryRoute(tag) {
  if (!this.channelService.currentChannel || !tag) {
  return [];

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

@@ -9,7 +9,7 @@ m-pro--channel-list {
  margin: 16px 0 32px;
 
  @media screen and (max-width: $max-mobile) {
- margin: 8px;
+ display: none;
  }
  }
 
@@ -61,6 +61,7 @@ m-pro--channel-list {
  cursor: pointer;
  text-align: center;
  font-weight: 300;
+ box-sizing: border-box;
  color: var(--m-pro--text-color);
  background-color: var(--m-pro--transparent-background-color);
 

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

@@ -9,7 +9,7 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { FeedsService } from '../../../../common/services/feeds.service';
-import { ProChannelService, RouterLinkToType } from '../channel.service';
+import { NavItems, ProChannelService, RouterLinkToType } from '../channel.service';
 import { OverlayModalService } from '../../../../services/ux/overlay-modal';
 
 @Component({
@@ -79,6 +79,7 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  this.selectedHashtag = params['hashtag'] || 'all';
 
  this.load(true);
+ this.setMenuNavItems();
  });
  }
 
@@ -86,6 +87,8 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  if (this.params$) {
  this.params$.unsubscribe();
  }
+
+ this.channelService.destroyMenuNavItems();
  }
 
  async load(refresh: boolean = false) {
@@ -122,6 +125,18 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  }
  }
 
+ setMenuNavItems() {
+ const tags = this.channelService.currentChannel.pro_settings.tag_list.concat([]);
+ const navItems: Array<NavItems> = tags.map(tag => ({
+ label: tag.label,
+ onClick: () => {
+ this.selectHashtag(tag.tag)
+ }
+ }));
+
+ this.channelService.pushMenuNavItems(navItems, true);
+ }
+
  get entities$() {
  return this.feedsService.feed;
  }

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

@@ -29,6 +29,7 @@ import { MediaEditComponent } from "../media/edit/edit.component";
 import { BlogViewInfinite } from "../blogs/view/infinite";
 import { BlogEdit } from "../blogs/edit/edit";
 import { CanDeactivateGuardService } from "../../services/can-deactivate-guard";
+import { ProHamburgerMenu } from './channel/hamburger-menu/hamburger-menu.component';
 
 const routes: Routes = [
  {
@@ -142,6 +143,7 @@ export const STANDALONE_ROUTES = [
  ProChannelFooterComponent,
  ProGroupTileComponent,
  ProUnsubscribeModalComponent,
+ ProHamburgerMenu,
  ],
  exports: [ProChannelComponent],
  entryComponents: [