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: [