(feat): Hamburger menu with footer

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

@@ -23,7 +23,8 @@ export type RouterLinkToType =
 
 export interface NavItems {
  label: string;
- onClick: () => void
+ onClick: () => void;
+ isActive: () => boolean;
 }
 
 @Injectable()

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

@@ -16,14 +16,15 @@
  <ul>
  <li class="m-pro__hamburger-menu-menu__logo" *ngIf="channel">
  <img
- [src]="channel.pro_settings.logo_image"
  [routerLink]="homeRouterLink"
+ [src]="channel.pro_settings.logo_image"
  />
  </li>
 
  <li>
  <a
  [routerLink]="feedRouterLink"
+ routerLinkActive="m-pro__hamburger-menu-menu__item--active"
  (click)="closeMenu()"
  i18n
  >Feed</a>
@@ -32,6 +33,7 @@
  <li>
  <a
  [routerLink]="videosRouterLink"
+ routerLinkActive="m-pro__hamburger-menu-menu__item--active"
  (click)="closeMenu()"
  i18n
  >Videos</a>
@@ -40,6 +42,7 @@
  <li>
  <a
  [routerLink]="imagesRouterLink"
+ routerLinkActive="m-pro__hamburger-menu-menu__item--active"
  (click)="closeMenu()"
  i18n
  >Images</a>
@@ -48,6 +51,7 @@
  <li>
  <a
  [routerLink]="articlesRouterLink"
+ routerLinkActive="m-pro__hamburger-menu-menu__item--active"
  (click)="closeMenu()"
  i18n
  >Articles</a>
@@ -56,23 +60,31 @@
  <li>
  <a
  [routerLink]="groupsRouterLink"
+ routerLinkActive="m-pro__hamburger-menu-menu__item--active"
  (click)="closeMenu()"
  i18n
  >Groups</a>
  </li>
 
  <li>
- <a (click)="wire(); closeMenu()" routerLinkActive="active"
- >Wire</a>
+ <a (click)="wire(); closeMenu()">
+ Wire
+ </a>
  </li>
 
  <li class="m-pro__hamburger-menu-menu__spacer"></li>
 
  <li *ngFor="let item of items">
  <a
+ [class.m-pro__hamburger-menu-menu__item--active]="item.isActive()"
  (click)="item.onClick(); closeMenu()"
  >{{ item.label }}</a>
  </li>
 
+ <li class="m-pro__hamburger-menu-menu__spacer"></li>
  </ul>
+
+ <m-pro--channel-footer
+ (click)="closeMenu()"
+ ></m-pro--channel-footer>
 </div>

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

@@ -14,6 +14,7 @@ m-pro__hamburger-menu {
  color: var(--m-pro--text-color);
  box-sizing: border-box;
  transition: right 0.3s ease-in;
+ overflow: auto;
 
  body.hamburger-menu--open & {
  right: 0;
@@ -29,16 +30,13 @@ m-pro__hamburger-menu {
  }
 
  > ul {
- position: absolute;
- padding: 0 16px 16px;
+ padding: 0 16px;
  list-style: none;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
- height: 100%;
- overflow-x: hidden;
- overflow-y: auto;
+ height: auto;
  box-sizing: border-box;
 
  > li {
@@ -74,6 +72,11 @@ m-pro__hamburger-menu {
  }
  }
  }
+
+ m-pro--channel-footer {
+ display: block;
+ padding: 0 16px;
+ }
 }
 
 body.hamburger-menu--open {

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

@@ -80,7 +80,10 @@ export class ProChannelHomeComponent implements OnInit, OnDestroy {
  label: tag.label,
  onClick: () => {
  this.navigateToCategory(tag.tag)
- }
+ },
+ isActive: () => {
+ return false;
+ },
  }));
 
  this.channelService.pushMenuNavItems(navItems, true);

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

@@ -127,11 +127,17 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
  setMenuNavItems() {
  const tags = this.channelService.currentChannel.pro_settings.tag_list.concat([]);
+
+ tags.unshift({ label: 'All', tag: 'all', selected: false });
+
  const navItems: Array<NavItems> = tags.map(tag => ({
  label: tag.label,
  onClick: () => {
  this.selectHashtag(tag.tag)
- }
+ },
+ isActive: () => {
+ return this.selectedHashtag === tag.tag;
+ },
  }));
 
  this.channelService.pushMenuNavItems(navItems, true);