src/app/app.component.html

 <ng-container *ngIf="ready">
   <ng-container *ngIf="!isProDomain">
     <ng-container *ngIf="useNewNavigation; else v2Topbar">
-      <m-v3-topbar>
+      <m-v3topbar>
         <ng-container search>
           <m-search--bar [defaultSizes]="false"></m-search--bar>
         </ng-container>
-      </m-v3-topbar>
+      </m-v3topbar>
     </ng-container>
 
     <ng-template #v2Topbar>
@@ -40,11 +40,7 @@
   </ng-container>
 
   <m-body
-    [class.has-markers-sidebar]="
-      session.isLoggedIn() &&
-      !isProDomain &&
-      !featuresService.has('navigation-2020')
-    "
+    [class.has-markers-sidebar]="hasMarkersSidebar()"
     [class.has-v2-navbar]="featuresService.has('top-feeds')"
     [class.has-v3-navbar]="featuresService.has('navigation-2020')"
     [class.is-pro-domain]="isProDomain"

src/app/app.component.ts

@@ -187,6 +187,14 @@ export class Minds implements OnInit, OnDestroy {
     this.socketsService.setUp();
   }
 
+  hasMarkersSidebar() {
+    return (
+      this.session.isLoggedIn() &&
+      !this.isProDomain &&
+      !this.featuresService.has('navigation-2020')
+    );
+  }
+
   ngOnDestroy() {
     this.loginReferrer.unlisten();
     this.scrollToTop.unlisten();

src/app/common/common.module.ts

@@ -133,7 +133,6 @@ import { FormDescriptorComponent } from './components/form-descriptor/form-descr
 import { FormToastComponent } from './components/form-toast/form-toast.component';
 import { SsoService } from './services/sso.service';
 import { PagesService } from './services/pages.service';
-import { V2TopbarService } from './layout/v2-topbar/v2-topbar.service';
 import { DateDropdownsComponent } from './components/date-dropdowns/date-dropdowns.component';
 import { SidebarMarkersService } from './layout/sidebar/markers.service';
 import { EmailConfirmationComponent } from './components/email-confirmation/email-confirmation.component';
@@ -147,6 +146,7 @@ import { FormInputCheckboxComponent } from './components/forms/checkbox/checkbox
 import { AttachmentPasteDirective } from './directives/paste/attachment-paste.directive';
 import { V3TopbarComponent } from './layout/v3-topbar/v3-topbar.component';
 import { SidebarNavigationService } from './layout/sidebar/navigation.service';
+import { TopbarService } from './layout/topbar.service';
 
 const routes: Routes = [
   {
@@ -464,14 +464,7 @@ const routes: Routes = [
     },
     MediaProxyService,
     SidebarNavigationService,
-    {
-      provide: V2TopbarService,
-      useFactory: V2TopbarService._,
-    },
-    {
-      provide: SidebarNavigationService,
-      useFactory: SidebarNavigationService._,
-    },
+    TopbarService,
     {
       provide: SidebarMarkersService,
       useFactory: SidebarMarkersService._,

src/app/common/components/marketing/marketing.component.ts

@@ -6,7 +6,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { MetaService } from '../../services/meta.service';
-import { V2TopbarService } from '../../layout/v2-topbar/v2-topbar.service';
+import { TopbarService } from '../../layout/topbar.service';
 
 @Component({
   selector: 'm-marketing',
@@ -20,7 +20,7 @@ export class MarketingComponent implements OnInit, OnDestroy {
 
   constructor(
     protected metaService: MetaService,
-    private topbarService: V2TopbarService
+    private navigationService: TopbarService
   ) {}
 
   ngOnInit() {
@@ -28,7 +28,7 @@ export class MarketingComponent implements OnInit, OnDestroy {
       this.metaService.setTitle(this.pageTitle);
     }
 
-    this.topbarService.toggleMarketingPages(
+    this.navigationService.toggleMarketingPages(
       true,
       this.showBottombar,
       this.forceBackground
@@ -36,6 +36,6 @@ export class MarketingComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.topbarService.toggleMarketingPages(false);
+    this.navigationService.toggleMarketingPages(false);
   }
 }

src/app/common/layout/sidebar/navigation.component.html

-<div
-  class="m-sidebarNavigation__overlay"
-  [class.m-sidebarNavigation--opened]="isOpened"
-  (click)="toggle()"
-></div>
+<div class="m-sidebarNavigation__overlay" (click)="toggle()"></div>
 <div
   class="m-sidebar--navigation"
-  [class.m-sidebarNavigation--slide]="isMobile"
-  [class.m-sidebarNavigation--opened]="isOpened"
+  [class.m-sidebarNavigation--slide]="layoutMode === 'phone'"
 >
   <nav>
     <div class="m-sidebarNavigation__top">
-      <a routerLink="/" title="Home" i18n-title *ngIf="isMobile">
+      <a routerLink="/" title="Home" i18n-title>
         <img [src]="cdnAssetsUrl + 'assets/logos/bulb.svg'" />
       </a>
 
@@ -28,14 +23,14 @@
           <m-tooltip
             icon="check"
             i18n="@@COMMON__NEWSFEED"
-            [enabled]="!isDesktop && !isMobile"
+            [enabled]="layoutMode === 'tablet'"
           >
             Newsfeed
           </m-tooltip>
 
           <span
             class="m-sidebar--navigation--text"
-            *ngIf="isDesktop || isMobile"
+            *ngIf="layoutMode !== 'tablet'"
             i18n
           >
             Newsfeed
@@ -54,14 +49,14 @@
           <m-tooltip
             icon="check"
             i18n="@@COMMON__DISCOVER"
-            [enabled]="!isDesktop && !isMobile"
+            [enabled]="layoutMode === 'tablet'"
           >
             Discover
           </m-tooltip>
 
           <span
             class="m-sidebar--navigation--text"
-            *ngIf="isDesktop || isMobile"
+            *ngIf="layoutMode !== 'tablet'"
             i18n
           >
             Discover
@@ -79,14 +74,14 @@
           <m-tooltip
             icon="check"
             i18n="@@COMMON__WALLET"
-            [enabled]="!isDesktop && !isMobile"
+            [enabled]="layoutMode === 'tablet'"
           >
             Wallet
           </m-tooltip>
 
           <span
             class="m-sidebar--navigation--text"
-            *ngIf="isDesktop || isMobile"
+            *ngIf="layoutMode !== 'tablet'"
             i18n
           >
             Wallet
@@ -104,14 +99,14 @@
           <m-tooltip
             icon="check"
             i18n="@@COMMON__PROFILE"
-            [enabled]="!isDesktop && !isMobile"
+            [enabled]="layoutMode === 'tablet'"
           >
             Profile
           </m-tooltip>
 
           <span
             class="m-sidebar--navigation--text"
-            *ngIf="isDesktop || isMobile"
+            *ngIf="layoutMode !== 'tablet'"
             i18n
           >
             Profile
@@ -129,13 +124,13 @@
           <m-tooltip
             icon="check"
             i18n="@@COMMON__ANALYTICS"
-            [enabled]="!isDesktop && !isMobile"
+            [enabled]="layoutMode === 'tablet'"
           >
             Analytics
           </m-tooltip>
           <span
             class="m-sidebar--navigation--text"
-            *ngIf="isDesktop || isMobile"
+            *ngIf="layoutMode !== 'tablet'"
             i18n
           >
             Analytics
@@ -153,14 +148,14 @@
           <m-tooltip
             icon="check"
             i18n="@@COMMON__SETTINGS"
-            [enabled]="!isDesktop && !isMobile"
+            [enabled]="layoutMode === 'tablet'"
           >
             Settings
           </m-tooltip>
 
           <span
             class="m-sidebar--navigation--text"
-            *ngIf="isDesktop || isMobile"
+            *ngIf="layoutMode !== 'tablet'"
             i18n
           >
             Settings
@@ -169,8 +164,6 @@
       </li>
     </ul>
   </nav>
-  <h5 i18n *ngIf="isDesktop || isMobile">
-    Groups
-  </h5>
+
   <ng-template dynamic-host></ng-template>
 </div>

src/app/common/layout/sidebar/navigation.component.scss

 m-sidebar--navigation {
   display: contents;
 
+  &.m-sidebarNavigation--opened {
+    .m-sidebarNavigation__overlay {
+      z-index: 999998;
+
+      @include m-theme() {
+        background-color: rgba(themed($m-grey-700), 0.2);
+      }
+    }
+
+    .m-sidebar--navigation.m-sidebarNavigation--slide {
+      transform: translateX(316px);
+    }
+  }
+
   .m-sidebarNavigation__overlay {
     position: fixed;
     top: 0;
@@ -32,6 +46,10 @@ m-sidebar--navigation {
       border-right: 1px solid themed($m-grey-400);
     }
 
+    .m-sidebarNavigation__top {
+      display: none;
+    }
+
     &.m-sidebarNavigation--slide {
       position: fixed;
       top: 0;
@@ -44,9 +62,9 @@ m-sidebar--navigation {
 
       transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
 
-      &.m-sidebarNavigation--opened {
-        transform: translateX(316px);
-      }
+      //&.m-sidebarNavigation--opened {
+      //  transform: translateX(316px);
+      //}
 
       .m-sidebarNavigation__top {
         display: flex;
@@ -102,93 +120,6 @@ m-sidebar--navigation {
       list-style: none;
       padding: 0;
     }
-
-    h5 {
-      font-size: 11px;
-      line-height: 30px;
-      letter-spacing: 1.83px;
-      text-transform: uppercase;
-      @include m-theme() {
-        color: rgba(themed($m-black), 0.3);
-      }
-    }
-
-    m-group--sidebar-markers {
-      .m-groupSidebarMarkers__list {
-        margin: 0;
-        padding: 0;
-        width: auto !important;
-        height: auto !important;
-        max-width: unset;
-        min-height: unset;
-        box-shadow: unset !important;
-        display: block !important;
-        overflow: unset !important;
-
-        & > li {
-          width: auto;
-          height: auto;
-          border: unset !important;
-
-          a {
-            padding: 8px 0;
-            font-size: 14px;
-            font-weight: normal;
-            line-height: 30px;
-
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow-x: hidden;
-
-            @include m-theme() {
-              color: themed($m-black);
-            }
-
-            &.m-groupSidebarMarkers__newGroup,
-            &.m-groupSidebarMarkers__discoverGroups {
-              @include m-theme() {
-                color: themed($m-grey-200);
-              }
-
-              i.material-icons {
-                @include m-theme() {
-                  color: themed($m-grey-500);
-                }
-              }
-            }
-
-            m-tooltip {
-              vertical-align: middle;
-              margin-right: 21px;
-
-              img {
-                width: 27px;
-                height: 27px;
-              }
-
-              i.material-icons {
-                font-size: 20px;
-                width: 27px;
-                height: 27px;
-              }
-            }
-          }
-        }
-
-        infinite-scroll {
-          padding: 2px 0 !important;
-          width: 48px !important;
-
-          .m-infinite-scroll-manual {
-            font-size: 10px;
-            padding: 2px;
-            background-color: transparent !important;
-            transform: rotate(0) !important;
-            text-align: left;
-          }
-        }
-      }
-    }
   }
 
   .m-sidebar--navigation--item {

src/app/common/layout/sidebar/navigation.component.ts

 import {
   Component,
   ComponentFactoryResolver,
+  HostBinding,
   HostListener,
   Inject,
   OnInit,
@@ -30,10 +31,9 @@ export class SidebarNavigationComponent implements OnInit {
   componentRef;
   componentInstance: GroupsSidebarMarkersComponent;
 
-  isDesktop: boolean = true;
-
-  isMobile: boolean = false;
+  layoutMode: 'phone' | 'tablet' | 'desktop' = 'desktop';
 
+  @HostBinding('class.m-sidebarNavigation--opened')
   isOpened: boolean = false;
 
   constructor(
@@ -47,13 +47,13 @@ export class SidebarNavigationComponent implements OnInit {
     this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
     this.service.setContainer(this);
     this.getUser();
+  }
 
+  ngOnInit() {
     if (isPlatformBrowser(this.platformId)) {
       this.onResize();
     }
-  }
 
-  ngOnInit() {
     this.createGroupsSideBar();
   }
 
@@ -72,20 +72,26 @@ export class SidebarNavigationComponent implements OnInit {
     this.componentRef = viewContainerRef.createComponent(componentFactory);
     this.componentInstance = this.componentRef.instance;
     this.componentInstance.showLabels = true;
+    this.componentInstance.leftSidebar = true;
   }
 
-  toggle() {
-    if (this.isMobile) {
+  toggle(): void {
+    if (this.layoutMode === 'phone') {
       this.isOpened = !this.isOpened;
     }
   }
 
   @HostListener('window:resize')
   onResize() {
-    this.isDesktop = window.innerWidth > 900;
-    this.isMobile = window.innerWidth <= 540;
+    if (window.innerWidth > 900) {
+      this.layoutMode = 'desktop';
+    } else if (window.innerWidth > 540 && window.innerWidth <= 900) {
+      this.layoutMode = 'tablet';
+    } else {
+      this.layoutMode = 'phone';
+    }
 
-    if (!this.isMobile) {
+    if (this.layoutMode !== 'phone') {
       this.isOpened = false;
     }
   }

src/app/common/layout/sidebar/navigation.service.ts

-import { Injectable } from '@angular/core';
 import { SidebarNavigationComponent } from './navigation.component';
 
-@Injectable()
 export class SidebarNavigationService {
   container: SidebarNavigationComponent;
 
-  static _() {
-    return new SidebarNavigationService();
-  }
-
-  setContainer(container: SidebarNavigationComponent) {
+  setContainer(container: SidebarNavigationComponent): void {
     this.container = container;
   }
 
-  toggle() {
+  toggle(): void {
     if (this.container) {
       this.container.toggle();
     }

src/app/common/layout/topbar.service.ts

+import { V2TopbarComponent } from './v2-topbar/v2-topbar.component';
+import { V3TopbarComponent } from './v3-topbar/v3-topbar.component';
+import { FeaturesService } from '../../services/features.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TopbarService {
+  private container: V2TopbarComponent | V3TopbarComponent;
+
+  private useV3Topbar: boolean;
+
+  static _(featuresService: FeaturesService) {
+    return new TopbarService(featuresService);
+  }
+
+  constructor(private featuresService: FeaturesService) {
+    this.useV3Topbar = this.featuresService.has('navigation-2020');
+  }
+
+  setContainer(container: V2TopbarComponent | V3TopbarComponent) {
+    this.container = container;
+
+    return this;
+  }
+
+  toggleMarketingPages(
+    value: boolean,
+    showBottombar: boolean = true,
+    forceBackground: boolean = true
+  ): void {
+    if (this.container) {
+      if (this.useV3Topbar) {
+        this.container.toggleMarketingPages(value, forceBackground);
+      } else {
+        this.container.toggleMarketingPages(
+          value,
+          showBottombar,
+          forceBackground
+        );
+      }
+    }
+  }
+
+  toggleVisibility(visible: boolean): void {
+    if (this.container) {
+      if (this.useV3Topbar) {
+        this.container.toggleVisibility(visible);
+      } else {
+        this.container.toggleVisibility(visible);
+      }
+    }
+  }
+}

src/app/common/layout/v2-topbar/v2-topbar.component.ts

@@ -14,9 +14,8 @@ import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
 import { NotificationsToasterComponent } from '../../../modules/notifications/toaster.component';
 import { ThemeService } from '../../../common/services/theme.service';
 import { ConfigsService } from '../../services/configs.service';
-import { V2TopbarService } from './v2-topbar.service';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Location } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { TopbarService } from '../topbar.service';
 
 @Component({
   selector: 'm-v2-topbar',
@@ -50,7 +49,7 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
     private themeService: ThemeService,
     protected componentFactoryResolver: ComponentFactoryResolver,
     configs: ConfigsService,
-    protected topbarService: V2TopbarService,
+    protected topbarService: TopbarService,
     protected router: Router
   ) {
     this.cdnAssetsUrl = configs.get('cdn_assets_url');

src/app/common/layout/v2-topbar/v2-topbar.service.ts

-import { V2TopbarComponent } from './v2-topbar.component';
-
-export class V2TopbarService {
-  private container: V2TopbarComponent;
-
-  static _() {
-    return new V2TopbarService();
-  }
-
-  setContainer(container: V2TopbarComponent) {
-    this.container = container;
-
-    return this;
-  }
-
-  toggleMarketingPages(
-    value: boolean,
-    showBottombar: boolean = true,
-    forceBackground: boolean = true
-  ) {
-    if (this.container) {
-      this.container.toggleMarketingPages(
-        value,
-        showBottombar,
-        forceBackground
-      );
-    }
-  }
-
-  toggleVisibility(visible: boolean) {
-    this.container.toggleVisibility(visible);
-  }
-}

src/app/common/layout/v3-topbar/v3-topbar.component.html

 <ng-template #searchBar>
-  <div class="m-v3-topbar__SearchBox">
+  <div class="m-v3Topbar__searchBox">
     <ng-content select="[search]"></ng-content>
   </div>
 </ng-template>
 
-<div class="m-v3-topbar__Top">
+<div
+  class="m-v3Topbar__top"
+  [class.m-v3Topbar__marketingPages]="marketingPages"
+  [class.m-v3Topbar__noBackground]="!showBackground"
+  [style.visibility]="showTopbar ? 'visible' : 'hidden'"
+>
   <div class="m-grid">
-    <div class="m-v3topbar__leftColumn">
-      <nav class="m-v3-topbar__Nav">
+    <div class="m-v3Topbar__leftColumn">
+      <nav class="m-v3Topbar__nav">
         <a
-          class="m-v3-topbarNav__Item m-v3-topbarNavItem__Logo"
+          class="m-v3TopbarNav__item m-v3TopbarNavItem__logo"
           routerLink="/"
           title="Home"
           i18n-title
@@ -24,7 +29,7 @@
         </a>
 
         <ng-template #hamburgerMenu>
-          <div class="m-v3-topbarNav__Item" (click)="toggleSidebarNav()">
+          <div class="m-v3TopbarNav__item" (click)="toggleSidebarNav()">
             <i class="material-icons">menu</i>
           </div>
         </ng-template>
@@ -33,12 +38,12 @@
 
     <div class="m-v3Topbar__spacer" *ngIf="isMobile"></div>
 
-    <div class="m-v3topbar__middleColumn" *ngIf="!isMobile">
+    <div class="m-v3Topbar__middleColumn" *ngIf="!isMobile">
       <!--      <a-->
-      <!--        class="m-v3-topbar__Avatar"-->
+      <!--        class="m-v3Topbar__avatar"-->
       <!--        *ngIf="getCurrentUser()"-->
       <!--        [routerLink]="['/', getCurrentUser()?.username]"-->
-      <!--        routerLinkActive="m-v3-topbar__Avatar&#45;&#45;active"-->
+      <!--        routerLinkActive="m-v3Topbar__avatar&#45;&#45;active"-->
       <!--      >-->
       <!--        <minds-avatar-->
       <!--          [object]="getCurrentUser()"-->
@@ -48,7 +53,7 @@
       <ng-container *ngTemplateOutlet="searchBar"></ng-container>
     </div>
 
-    <div class="m-v3topbar__rightColumn">
+    <div class="m-v3Topbar__rightColumn">
       <ng-container *ngIf="isMobile && getCurrentUser()">
         <ng-container *ngTemplateOutlet="searchBar"></ng-container>
       </ng-container>
@@ -59,51 +64,51 @@
 
       <!-- logged in user avatar -->
 
-      <div class="m-v3-topbar__UserMenu" *ngIf="getCurrentUser()">
+      <div class="m-v3Topbar__userMenu" *ngIf="getCurrentUser()">
         <ng-content select="[icons]"></ng-content>
       </div>
     </div>
   </div>
 </div>
 
-<div class="m-v3-topbar__Bottom">
+<div class="m-v3Topbar__bottom">
   <a
-    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
+    class="m-v3TopbarNav__item m-v3TopbarNav__routerNav"
     routerLink="/newsfeed/subscriptions"
-    routerLinkActive="m-v3-topbarNav__Item--active"
+    routerLinkActive="m-v3TopbarNav__item--active"
     title="Newsfeed"
     i18n-title
     data-cy="data-minds-nav-newsfeed-button"
   >
     <i class="material-icons">home</i>
-    <span class="m-v3-topbarNavItem__Text" i18n>Newsfeed</span>
+    <span class="m-v3TopbarNavItem__text" i18n>Newsfeed</span>
   </a>
 
   <a
-    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
+    class="m-v3TopbarNav__item m-v3TopbarNav__routerNav"
     routerLink="/newsfeed/global"
-    routerLinkActive="m-v3-topbarNav__Item--active"
+    routerLinkActive="m-v3TopbarNav__item--active"
     title="Discovery"
     i18n-title
     data-cy="data-minds-nav-discovery-button"
   >
     <i class="material-icons">search</i>
-    <span class="m-v3-topbarNavItem__Text" i18n>Discovery</span>
+    <span class="m-v3TopbarNavItem__text" i18n>Discovery</span>
   </a>
 
   <a
-    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
+    class="m-v3TopbarNav__item m-v3TopbarNav__routerNav"
     routerLink="/wallet"
-    routerLinkActive="m-v3-topbarNav__Item--active"
+    routerLinkActive="m-v3TopbarNav__item--active"
     title="Wallet"
     i18n-title
     data-cy="data-minds-nav-wallet-button"
   >
     <i class="material-icons">account_balance</i>
-    <span class="m-v3-topbarNavItem__Text" i18n>Wallet</span>
+    <span class="m-v3TopbarNavItem__text" i18n>Wallet</span>
   </a>
 </div>
 
-<div class="m-v3-topbar__NotificationsToaster">
+<div class="m-v3Topbar__notificationsToaster">
   <ng-template dynamic-host></ng-template>
 </div>

src/app/common/layout/v3-topbar/v3-topbar.component.scss

-m-v3-topbar {
+m-v3topbar {
   .m-grid {
     grid-gap: 0;
     grid-template-columns: 3fr 5fr 4fr;
@@ -20,7 +20,7 @@ m-v3-topbar {
       opacity: 0;
     }
 
-    .m-v3topbar__leftColumn {
+    .m-v3Topbar__leftColumn {
       margin-left: 33.3%;
       grid-column: 1 / span 1;
       min-width: 0;
@@ -33,12 +33,12 @@ m-v3-topbar {
       }
     }
 
-    .m-v3topbar__middleColumn {
+    .m-v3Topbar__middleColumn {
       grid-column: 2 / span 1;
       min-width: 0;
     }
 
-    .m-v3topbar__rightColumn {
+    .m-v3Topbar__rightColumn {
       grid-column: 3 / span 1;
       display: flex;
       align-items: center;
@@ -46,8 +46,8 @@ m-v3-topbar {
     }
 
     @media screen and(min-width: $m-grid-max-mobile) {
-      .m-v3topbar__leftColumn,
-      .m-v3topbar__middleColumn {
+      .m-v3Topbar__leftColumn,
+      .m-v3Topbar__middleColumn {
         @include m-theme() {
           border-right: 1px solid themed($m-grey-400);
         }
@@ -56,7 +56,7 @@ m-v3-topbar {
   }
 }
 
-.m-v3-topbar__Top {
+.m-v3Topbar__top {
   position: fixed;
   top: 0;
   left: 0;
@@ -81,7 +81,14 @@ m-v3-topbar {
     width: 100%;
   }
 
-  .m-v3-topbar__SearchBox {
+  &.m-v3Topbar__noBackground {
+    @include m-theme() {
+      background-color: transparent;
+      border-bottom: none;
+    }
+  }
+
+  .m-v3Topbar__searchBox {
     width: 100%;
     height: 100%;
     display: flex;
@@ -155,51 +162,7 @@ m-v3-topbar {
   }
 }
 
-.m-v3-topbar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 75px;
-  max-width: 1296px;
-  margin: 0 auto;
-  padding: 0 8px;
-  //padding-right: 46px;
-  box-sizing: border-box;
-
-  @media screen and (min-width: 1296px) {
-    padding: 0 46px 0 0;
-  }
-
-  @media screen and (max-width: 480px) {
-    .m-v3-topbarNav__RouterNav {
-      display: none;
-    }
-
-    .m-v3-topbar__SearchBox {
-      display: none;
-    }
-  }
-}
-
-.m-v3-topbar__Container--left,
-.m-v3-topbar__Container--right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-}
-
-.m-v3-topbar__Container--left {
-  justify-content: flex-start;
-}
-
-.m-v3-topbar__Container--right {
-  justify-content: flex-end;
-}
-
-.m-v3-topbar__Nav {
+.m-v3Topbar__nav {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -210,7 +173,7 @@ m-v3-topbar {
   }
 }
 
-.m-v3-topbarNav__Item {
+.m-v3TopbarNav__item {
   padding: 11px 12px 14px;
   display: flex;
   flex-direction: row;
@@ -221,14 +184,14 @@ m-v3-topbar {
     color: themed($m-grey-800);
   }
 
-  &.m-v3-topbarNav__Item--active {
+  &.m-v3TopbarNav__item--active {
     @include m-theme() {
       color: themed($m-blue);
       border-color: themed($m-blue);
     }
   }
 
-  &.m-v3-topbarNav__Item--no-padding {
+  &.m-v3TopbarNav__item--no-padding {
     padding: 0 12px;
 
     @media screen and (max-width: 480px) {
@@ -258,7 +221,7 @@ m-v3-topbar {
   }
 }
 
-.m-v3-topbarNavItem__Logo {
+.m-v3TopbarNavItem__logo {
   margin: 0 8px 0 0;
   padding: 0;
   //height: 62px;
@@ -272,16 +235,16 @@ m-v3-topbar {
   }
 }
 
-// .m-theme__dark .m-v3-topbarNavItem__Logo,
-// .m-theme__light .m-v3-topbarNavItem__Logo:hover {
+// .m-theme__dark .m-v3TopbarNavItem__logo,
+// .m-theme__light .m-v3TopbarNavItem__logo:hover {
 //   filter: grayscale(100%);
 // }
 //
-// .m-theme__dark .m-v3-topbarNavItem__Logo:hover {
+// .m-theme__dark .m-v3TopbarNavItem__logo:hover {
 //   filter: grayscale(0%);
 // }
 
-.m-v3-topbar__Avatar {
+.m-v3Topbar__avatar {
   cursor: pointer;
 
   @media screen and (max-width: 810px) {
@@ -300,18 +263,18 @@ m-v3-topbar {
     }
   }
 
-  &.m-v3-topbar__Avatar--active .minds-avatar {
+  &.m-v3Topbar__avatar--active .minds-avatar {
     @include m-theme() {
       box-shadow: 0 0 0 2px themed($m-blue);
     }
   }
 }
 
-.m-v3-topbar__UserMenu {
+.m-v3Topbar__userMenu {
   min-width: 80px;
 }
 
-.m-v3-topbar__Container__LoginWrapper {
+.m-v3TopbarContainer__loginWrapper {
   @media screen and (max-width: 480px) {
     // display: none;
   }
@@ -335,7 +298,7 @@ m-v3-topbar {
   }
 }
 
-.m-v3-topbar__Bottom {
+.m-v3Topbar__bottom {
   display: none;
   position: fixed;
   bottom: 0;
@@ -362,13 +325,13 @@ m-v3-topbar {
     display: flex;
   }
 
-  .m-v3-topbarNav__RouterNav {
+  .m-v3TopbarNav__routerNav {
     flex-grow: 1;
     justify-content: center;
   }
 }
 
-.m-v3-topbar__NotificationsToaster {
+.m-v3Topbar__notificationsToaster {
   .m-notifications--toaster {
     z-index: 500;
     right: 65px;

src/app/common/layout/v3-topbar/v3-topbar.component.ts

@@ -16,9 +16,10 @@ import { ThemeService } from '../../services/theme.service';
 import { ConfigsService } from '../../services/configs.service';
 import { isPlatformBrowser } from '@angular/common';
 import { SidebarNavigationService } from '../sidebar/navigation.service';
+import { TopbarService } from '../topbar.service';
 
 @Component({
-  selector: 'm-v3-topbar',
+  selector: 'm-v3topbar',
   templateUrl: 'v3-topbar.component.html',
 })
 export class V3TopbarComponent implements OnInit, OnDestroy {
@@ -32,6 +33,11 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
   componentRef;
   componentInstance: NotificationsToasterComponent;
 
+  showTopbar: boolean = true;
+  forceBackground: boolean = true;
+  showBackground: boolean = true;
+  marketingPages: boolean = false;
+
   isMobile: boolean = false;
 
   constructor(
@@ -41,6 +47,7 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
     protected session: Session,
     protected cd: ChangeDetectorRef,
     protected componentFactoryResolver: ComponentFactoryResolver,
+    protected topbarService: TopbarService,
     @Inject(PLATFORM_ID) private platformId: Object
   ) {
     this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
@@ -53,6 +60,8 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.loadComponent();
     this.session.isLoggedIn(() => this.detectChanges());
+
+    this.topbarService.setContainer(this);
   }
 
   getCurrentUser() {
@@ -98,6 +107,32 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
     this.sidebarService.toggle();
   }
 
+  /**
+   * Marketing pages set this to true in order to change how the topbar looks
+   * @param value
+   * @param forceBackground
+   */
+  toggleMarketingPages(value: boolean, forceBackground: boolean = true) {
+    this.marketingPages = value;
+    this.forceBackground = forceBackground;
+    this.onScroll();
+    this.detectChanges();
+  }
+
+  @HostListener('window:scroll')
+  onScroll() {
+    this.showBackground = this.forceBackground
+      ? true
+      : this.marketingPages
+      ? window.document.body.scrollTop > 52
+      : true;
+  }
+
+  toggleVisibility(visible: boolean) {
+    this.showTopbar = visible;
+    this.detectChanges();
+  }
+
   @HostListener('window:resize')
   onResize() {
     this.isMobile = window.innerWidth <= 540;

src/app/modules/auth/login.component.scss

@@ -5,6 +5,7 @@ m-login {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   position: relative;
+  grid-area: content;
 
   &:not(.m-login__newDesign) {
     @include m-theme() {
@@ -38,6 +39,10 @@ m-login {
   &.m-login__newDesign {
     margin-top: -52px;
 
+    &.m-login__newNavigation {
+      margin-top: -75px;
+    }
+
     &.m-login__iosFallback {
       .m-grid {
         .m-login__wrapper {

src/app/modules/auth/login.component.spec.ts

@@ -35,7 +35,7 @@ import {
 import { FeaturesService } from '../../services/features.service';
 import { featuresServiceMock } from '../../../tests/features-service-mock.spec';
 import { IfFeatureDirective } from '../../common/directives/if-feature.directive';
-import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
+import { TopbarService } from '../../common/layout/topbar.service';
 import { MockService } from '../../utils/mock';
 
 @Component({
@@ -90,7 +90,7 @@ describe('LoginComponent', () => {
         CookieService,
         { provide: COOKIE_OPTIONS, useValue: CookieOptionsProvider },
         { provide: FeaturesService, useValue: featuresServiceMock },
-        { provide: V2TopbarService, useValue: MockService(V2TopbarService) },
+        { provide: TopbarService, useValue: MockService(TopbarService) },
       ],
     }).compileComponents();
   }));

src/app/modules/auth/login.component.ts

@@ -10,8 +10,8 @@ import { LoginReferrerService } from '../../services/login-referrer.service';
 import { OnboardingService } from '../onboarding/onboarding.service';
 import { CookieService } from '../../common/services/cookie.service';
 import { FeaturesService } from '../../services/features.service';
-import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
 import { iOSVersion } from '../../helpers/is-safari';
+import { TopbarService } from '../../common/layout/topbar.service';
 
 @Component({
   selector: 'm-login',
@@ -27,6 +27,8 @@ export class LoginComponent implements OnInit, OnDestroy {
 
   @HostBinding('class.m-login__newDesign')
   newDesign: boolean = false;
+  @HostBinding('class.m-login__newNavigation')
+  newNavigation: boolean = false;
   @HostBinding('class.m-login__iosFallback')
   iosFallback: boolean = false;
 
@@ -46,7 +48,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     private cookieService: CookieService,
     private onboarding: OnboardingService,
     private featuresService: FeaturesService,
-    private topbarService: V2TopbarService
+    private topbarService: TopbarService
   ) {}
 
   ngOnInit() {
@@ -68,6 +70,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
 
     this.newDesign = this.featuresService.has('register_pages-december-2019');
+    this.newNavigation = this.featuresService.has('navigation-2020');
 
     if (this.newDesign) {
       this.topbarService.toggleVisibility(false);

src/app/modules/auth/register.component.spec.ts

@@ -19,7 +19,7 @@ import { MockComponent, MockService } from '../../utils/mock';
 import { FeaturesService } from '../../services/features.service';
 import { featuresServiceMock } from '../../../tests/features-service-mock.spec';
 import { IfFeatureDirective } from '../../common/directives/if-feature.directive';
-import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
+import { TopbarService } from '../../common/layout/topbar.service';
 
 describe('RegisterComponent', () => {
   let comp: RegisterComponent;
@@ -44,7 +44,7 @@ describe('RegisterComponent', () => {
         { provide: SignupModalService, useValue: signupModalServiceMock },
         { provide: LoginReferrerService, useValue: loginReferrerServiceMock },
         { provide: FeaturesService, useValue: featuresServiceMock },
-        { provide: V2TopbarService, useValue: MockService(V2TopbarService) },
+        { provide: TopbarService, useValue: MockService(TopbarService) },
       ],
     }).compileComponents();
   }));

src/app/modules/auth/register.component.ts

@@ -12,10 +12,10 @@ import { OnboardingService } from '../onboarding/onboarding.service';
 import { ConfigsService } from '../../common/services/configs.service';
 import { PagesService } from '../../common/services/pages.service';
 import { FeaturesService } from '../../services/features.service';
-import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
 import { OnboardingV2Service } from '../onboarding-v2/service/onboarding.service';
 import { MetaService } from '../../common/services/meta.service';
 import { iOSVersion } from '../../helpers/is-safari';
+import { TopbarService } from '../../common/layout/topbar.service';
 
 @Component({
   selector: 'm-register',
@@ -54,7 +54,7 @@ export class RegisterComponent implements OnInit, OnDestroy {
     configs: ConfigsService,
     public pagesService: PagesService,
     private featuresService: FeaturesService,
-    private topbarService: V2TopbarService,
+    private topbarService: TopbarService,
     private onboardingService: OnboardingV2Service,
     private metaService: MetaService
   ) {

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

@@ -32,7 +32,7 @@
   </span>
 </div>
 
-<ng-container *mIfFeature="'navigation-2020'; else oldChannel">
+<ng-container *mIfFeature="'navigation-2020'; else v1Channel">
   <div class="m-channel__middleColumn">
     feed goes here
   </div>
@@ -45,7 +45,7 @@
   </div>
 </ng-container>
 
-<ng-template #oldChannel>
+<ng-template #v1Channel>
   <header [hidden]="!isLocked"></header>
 
   <header *ngIf="user" [ngClass]="{ isLocked: isLocked }">

src/app/modules/groups/sidebar-markers/sidebar-markers.component.html

+<h5 i18n *ngIf="leftSidebar && layoutMode !== 'tablet'">
+  Groups
+</h5>
+
 <ul class="m-groupSidebarMarkers__list m-scroll__thin" #list>
   <li style="display:flex">
     <a

src/app/modules/groups/sidebar-markers/sidebar-markers.component.scss

 @import 'defaults';
 
+m-group--sidebar-markers {
+  &.m-groupSidebarMarkers__leftSidebar {
+    h5 {
+      font-size: 11px;
+      line-height: 30px;
+      letter-spacing: 1.83px;
+      text-transform: uppercase;
+      @include m-theme() {
+        color: rgba(themed($m-black), 0.3);
+      }
+    }
+
+    .m-groupSidebarMarkers__list {
+      margin: 0;
+      padding: 0;
+      width: auto !important;
+      height: auto !important;
+      max-width: unset;
+      min-height: unset;
+      box-shadow: unset !important;
+      display: block !important;
+      overflow: unset !important;
+
+      & > li {
+        width: auto;
+        height: auto;
+        border: unset !important;
+
+        a {
+          padding: 8px 0;
+          font-size: 14px;
+          font-weight: normal;
+          line-height: 30px;
+
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow-x: hidden;
+
+          @include m-theme() {
+            color: themed($m-black);
+          }
+
+          &.m-groupSidebarMarkers__newGroup,
+          &.m-groupSidebarMarkers__discoverGroups {
+            @include m-theme() {
+              color: themed($m-grey-200);
+            }
+
+            i.material-icons {
+              @include m-theme() {
+                color: themed($m-grey-500);
+              }
+            }
+          }
+
+          m-tooltip {
+            vertical-align: middle;
+            margin-right: 21px;
+
+            img {
+              width: 27px;
+              height: 27px;
+            }
+
+            i.material-icons {
+              font-size: 20px;
+              width: 27px;
+              height: 27px;
+            }
+          }
+        }
+      }
+
+      infinite-scroll {
+        padding: 2px 0 !important;
+        width: 48px !important;
+
+        .m-infinite-scroll-manual {
+          font-size: 10px;
+          padding: 2px;
+          background-color: transparent !important;
+          transform: rotate(0) !important;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
 .m-groupSidebarMarkers__list {
   display: block;
   margin: auto;

src/app/modules/groups/sidebar-markers/sidebar-markers.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectorRef,
   Component,
   DoCheck,
+  HostBinding,
   HostListener,
   Inject,
   Input,
@@ -26,6 +27,7 @@ import { GroupsService } from '../groups-service';
 export class GroupsSidebarMarkersComponent
   implements OnInit, DoCheck, OnDestroy {
   @Input() showLabels: boolean = false;
+  layoutMode: 'phone' | 'tablet' | 'desktop' = 'desktop';
   inProgress: boolean = false;
   $updateMarker;
   markers = [];
@@ -36,6 +38,9 @@ export class GroupsSidebarMarkersComponent
 
   @ViewChild('list', { static: true }) list;
 
+  @HostBinding('class.m-groupSidebarMarkers__leftSidebar')
+  leftSidebar: boolean = false;
+
   constructor(
     private client: Client,
     public session: Session,
@@ -146,5 +151,13 @@ export class GroupsSidebarMarkersComponent
 
   @HostListener('window:resize') onResize() {
     this.tooltipsAnchor = window.innerWidth <= 992 ? 'top' : 'right';
+
+    if (window.innerWidth > 900) {
+      this.layoutMode = 'desktop';
+    } else if (window.innerWidth > 540 && window.innerWidth <= 900) {
+      this.layoutMode = 'tablet';
+    } else {
+      this.layoutMode = 'phone';
+    }
   }
 }

src/app/modules/legacy/components/cards/activity/activity.html

@@ -400,7 +400,7 @@
   ></m-wire-button>
   <button
     class="m-btn m-btn--action m-btn--slim minds-boost-button"
-    *ngIf="session.getLoggedInUser().guid == activity.owner_guid 
+    *ngIf="session.getLoggedInUser().guid == activity.owner_guid
       && !isScheduled(activity.time_created)"
     id="boost-actions"
     (click)="showBoost()"

src/app/modules/onboarding-v2/page/onboarding.component.ts

@@ -3,9 +3,9 @@ import { Session } from '../../../services/session';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Storage } from '../../../services/storage';
 import { OnboardingV2Service } from '../service/onboarding.service';
-import { V2TopbarService } from '../../../common/layout/v2-topbar/v2-topbar.service';
 import { SidebarMarkersService } from '../../../common/layout/sidebar/markers.service';
 import { iOSVersion } from '../../../helpers/is-safari';
+import { TopbarService } from '../../../common/layout/topbar.service';
 
 @Component({
   selector: 'm-onboarding',
@@ -42,7 +42,7 @@ export class OnboardingComponent implements OnDestroy {
     private storage: Storage,
     private route: ActivatedRoute,
     private onboardingService: OnboardingV2Service,
-    private topbarService: V2TopbarService,
+    private topbarService: TopbarService,
     private sidebarMarkersService: SidebarMarkersService
   ) {
     this.iosFallback = iOSVersion() !== null;