src/app/app.component.scss

 @import 'defaults';
 @import 'themes';
+@import 'foundation/grid-values.scss';
 
 html,
 body {
@@ -38,6 +39,15 @@ m-app {
       grid-gap: 0;
 
       height: 100%;
+
+      @media screen and (max-width: $m-grid-max-tablet) {
+        grid-template-columns: 71px 5fr 4fr;
+      }
+
+      @media screen and(max-width: $m-grid-max-mobile) {
+        display: flex;
+        flex-direction: column;
+      }
     }
   }
 

src/app/common/common.module.ts

@@ -146,6 +146,7 @@ import { HorizontalFeedService } from './services/horizontal-feed.service';
 import { FormInputCheckboxComponent } from './components/forms/checkbox/checkbox.component';
 import { AttachmentPasteDirective } from './directives/paste/attachment-paste.directive';
 import { V3TopbarComponent } from './layout/v3-topbar/v3-topbar.component';
+import { SidebarNavigationService } from './layout/sidebar/navigation.service';
 
 const routes: Routes = [
   {
@@ -462,11 +463,15 @@ const routes: Routes = [
       deps: [Title, Meta, SiteService, Location, ConfigsService],
     },
     MediaProxyService,
-    V2TopbarService,
+    SidebarNavigationService,
     {
       provide: V2TopbarService,
       useFactory: V2TopbarService._,
     },
+    {
+      provide: SidebarNavigationService,
+      useFactory: SidebarNavigationService._,
+    },
     {
       provide: SidebarMarkersService,
       useFactory: SidebarMarkersService._,

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

@@ -13,6 +13,7 @@ export class TooltipComponent {
   @Input() anchor: 'top' | 'bottom' | 'right' | 'left';
   @Input() iconClass;
   @Input() useParentPosition: boolean = false;
+  @Input() enabled: boolean = true;
 
   hidden: boolean = true;
   offsetTop: number = 0;
@@ -22,6 +23,10 @@ export class TooltipComponent {
   constructor(private element: ElementRef) {}
 
   setHidden(value: boolean) {
+    if (!value && !this.enabled) {
+      return;
+    }
+
     this.hidden = value;
 
     if (!this.hidden && this.useParentPosition) {

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

-<nav>
-  <ul>
-    <li>
-      <a
-        class="m-sidebar--navigation--item"
-        [routerLink]="['/newsfeed/subscriptions']"
-        [routerLinkActive]="'m-sidebar--navigation--item-active'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        [title]="'Newsfeed'"
-      >
-        <i class="material-icons">check</i>
-
-        <span class="m-sidebar--navigation--text" i18n>Newsfeed</span>
+<div
+  class="m-sidebarNavigation__overlay"
+  [class.m-sidebarNavigation--opened]="isOpened"
+  (click)="toggle()"
+></div>
+<div
+  class="m-sidebar--navigation"
+  [class.m-sidebarNavigation--slide]="isMobile"
+  [class.m-sidebarNavigation--opened]="isOpened"
+>
+  <nav>
+    <div class="m-sidebarNavigation__top">
+      <a routerLink="/" title="Home" i18n-title *ngIf="isMobile">
+        <img [src]="cdnAssetsUrl + 'assets/logos/bulb.svg'" />
       </a>
-    </li>
 
-    <li>
-      <a
-        class="m-sidebar--navigation--item"
-        [routerLink]="['/newsfeed/global/top']"
-        [routerLinkActive]="'m-sidebar--navigation--item-active'"
-        [routerLinkActiveOptions]="{ exact: true }"
-        [title]="'Discover'"
-      >
-        <i class="material-icons">check</i>
+      <i class="material-icons" (click)="toggle()">close</i>
+    </div>
+    <ul>
+      <li>
+        <a
+          class="m-sidebar--navigation--item"
+          [routerLink]="['/newsfeed/subscriptions']"
+          [routerLinkActive]="'m-sidebar--navigation--item-active'"
+          [routerLinkActiveOptions]="{ exact: true }"
+          (click)="toggle()"
+        >
+          <m-tooltip
+            icon="check"
+            i18n="@@COMMON__NEWSFEED"
+            [enabled]="!isDesktop && !isMobile"
+          >
+            Newsfeed
+          </m-tooltip>
 
-        <span class="m-sidebar--navigation--text" i18n>Discover</span>
-      </a>
-    </li>
+          <span
+            class="m-sidebar--navigation--text"
+            *ngIf="isDesktop || isMobile"
+            i18n
+          >
+            Newsfeed
+          </span>
+        </a>
+      </li>
 
-    <li>
-      <a
-        class="m-sidebar--navigation--item"
-        [routerLink]="['/wallet']"
-        [routerLinkActive]="'m-sidebar--navigation--item-active'"
-        [title]="'Wallet'"
-      >
-        <i class="material-icons">check</i>
+      <li>
+        <a
+          class="m-sidebar--navigation--item"
+          [routerLink]="['/newsfeed/global/top']"
+          [routerLinkActive]="'m-sidebar--navigation--item-active'"
+          [routerLinkActiveOptions]="{ exact: true }"
+          (click)="toggle()"
+        >
+          <m-tooltip
+            icon="check"
+            i18n="@@COMMON__DISCOVER"
+            [enabled]="!isDesktop && !isMobile"
+          >
+            Discover
+          </m-tooltip>
 
-        <span class="m-sidebar--navigation--text" i18n>Wallet</span>
-      </a>
-    </li>
+          <span
+            class="m-sidebar--navigation--text"
+            *ngIf="isDesktop || isMobile"
+            i18n
+          >
+            Discover
+          </span>
+        </a>
+      </li>
 
-    <li>
-      <a
-        class="m-sidebar--navigation--item"
-        [routerLink]="['/' + user.username]"
-        [routerLinkActive]="'m-sidebar--navigation--item-active'"
-        [title]="'Profile'"
-      >
-        <i class="material-icons">check</i>
+      <li>
+        <a
+          class="m-sidebar--navigation--item"
+          [routerLink]="['/wallet']"
+          [routerLinkActive]="'m-sidebar--navigation--item-active'"
+          (click)="toggle()"
+        >
+          <m-tooltip
+            icon="check"
+            i18n="@@COMMON__WALLET"
+            [enabled]="!isDesktop && !isMobile"
+          >
+            Wallet
+          </m-tooltip>
 
-        <span class="m-sidebar--navigation--text" i18n>Profile</span>
-      </a>
-    </li>
+          <span
+            class="m-sidebar--navigation--text"
+            *ngIf="isDesktop || isMobile"
+            i18n
+          >
+            Wallet
+          </span>
+        </a>
+      </li>
 
-    <li>
-      <a
-        class="m-sidebar--navigation--item"
-        [routerLink]="['/analytics']"
-        [routerLinkActive]="'m-sidebar--navigation--item-active'"
-        [title]="'Analytics'"
-      >
-        <i class="material-icons">check</i>
+      <li>
+        <a
+          class="m-sidebar--navigation--item"
+          [routerLink]="['/' + user.username]"
+          [routerLinkActive]="'m-sidebar--navigation--item-active'"
+          (click)="toggle()"
+        >
+          <m-tooltip
+            icon="check"
+            i18n="@@COMMON__PROFILE"
+            [enabled]="!isDesktop && !isMobile"
+          >
+            Profile
+          </m-tooltip>
 
-        <span class="m-sidebar--navigation--text" i18n>Analytics</span>
-      </a>
-    </li>
+          <span
+            class="m-sidebar--navigation--text"
+            *ngIf="isDesktop || isMobile"
+            i18n
+          >
+            Profile
+          </span>
+        </a>
+      </li>
 
-    <li>
-      <a
-        class="m-sidebar--navigation--item"
-        [routerLink]="['/settings']"
-        [routerLinkActive]="'m-sidebar--navigation--item-active'"
-        [title]="'Settings'"
-      >
-        <i class="material-icons">check</i>
+      <li>
+        <a
+          class="m-sidebar--navigation--item"
+          [routerLink]="['/analytics']"
+          [routerLinkActive]="'m-sidebar--navigation--item-active'"
+          (click)="toggle()"
+        >
+          <m-tooltip
+            icon="check"
+            i18n="@@COMMON__ANALYTICS"
+            [enabled]="!isDesktop && !isMobile"
+          >
+            Analytics
+          </m-tooltip>
+          <span
+            class="m-sidebar--navigation--text"
+            *ngIf="isDesktop || isMobile"
+            i18n
+          >
+            Analytics
+          </span>
+        </a>
+      </li>
 
-        <span class="m-sidebar--navigation--text" i18n>Settings</span>
-      </a>
-    </li>
-  </ul>
-</nav>
-<h5 i18n>
-  Groups
-</h5>
-<ng-template dynamic-host></ng-template>
+      <li>
+        <a
+          class="m-sidebar--navigation--item"
+          [routerLink]="['/settings']"
+          [routerLinkActive]="'m-sidebar--navigation--item-active'"
+          (click)="toggle()"
+        >
+          <m-tooltip
+            icon="check"
+            i18n="@@COMMON__SETTINGS"
+            [enabled]="!isDesktop && !isMobile"
+          >
+            Settings
+          </m-tooltip>
+
+          <span
+            class="m-sidebar--navigation--text"
+            *ngIf="isDesktop || isMobile"
+            i18n
+          >
+            Settings
+          </span>
+        </a>
+      </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 {
-  grid-area: nav;
-
-  padding-top: 8px !important;
-  padding-left: 33.3%;
-  min-width: 0;
-
-  @include m-theme() {
-    background-color: themed($m-body-bg);
-    border-right: 1px solid themed($m-grey-400);
+  display: contents;
+
+  .m-sidebarNavigation__overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    background-color: transparent;
+    transition: background-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    &.m-sidebarNavigation--opened {
+      z-index: 999998;
+      @include m-theme() {
+        background-color: rgba(themed($m-grey-700), 0.2);
+      }
+    }
   }
 
-  nav {
-    //min-height: 100vh;
-    //height: 100%;
-  }
+  .m-sidebar--navigation {
+    grid-area: nav;
 
-  ul {
-    list-style: none;
-    padding: 0;
-  }
+    padding-top: 8px !important;
+    padding-left: 33.3%;
+    min-width: 0;
+    box-sizing: border-box;
 
-  h5 {
-    font-size: 11px;
-    line-height: 30px;
-    letter-spacing: 1.83px;
-    text-transform: uppercase;
     @include m-theme() {
-      color: rgba(themed($m-black), 0.3);
+      background-color: themed($m-body-bg);
+      border-right: 1px solid themed($m-grey-400);
     }
-  }
 
-  m-group--sidebar-markers {
-    .m-groupSidebarMarkers__list {
-      margin: 0;
+    &.m-sidebarNavigation--slide {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: -316px;
+      width: 316px;
+      max-width: 79vw;
+      z-index: 999999;
       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;
 
+      transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+      &.m-sidebarNavigation--opened {
+        transform: translateX(316px);
+      }
+
+      .m-sidebarNavigation__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        box-sizing: border-box;
+
+        height: 65px;
+
+        padding: 0 24px;
+
+        @include m-theme() {
+          border-bottom: 1px solid themed($m-primary-border);
+        }
+
+        a > img {
+          height: 36px;
+          cursor: pointer;
+        }
+
+        i.material-icons {
+          cursor: pointer;
           @include m-theme() {
-            color: themed($m-black);
+            color: themed($m-second-text-color);
           }
+        }
+      }
 
-          m-tooltip {
-            vertical-align: middle;
-            margin-right: 21px;
+      ul {
+        padding: 37px 35px 0;
 
-            img {
-              width: 27px;
-              height: 27px;
+        .m-sidebar--navigation--item {
+          margin: 4px 0;
+        }
+
+        &.m-groupSidebarMarkers__list {
+          padding: 0 35px 35px !important;
+        }
+      }
+
+      h5 {
+        padding: 0 35px;
+      }
+    }
+
+    nav {
+      //min-height: 100vh;
+      //height: 100%;
+    }
+
+    ul {
+      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);
+                }
+              }
             }
 
-            i.material-icons {
-              font-size: 20px;
-              width: 27px;
-              height: 27px;
+            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;
+        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;
+          .m-infinite-scroll-manual {
+            font-size: 10px;
+            padding: 2px;
+            background-color: transparent !important;
+            transform: rotate(0) !important;
+            text-align: left;
+          }
         }
       }
     }
   }
-}
 
-.m-sidebar--navigation--item {
-  display: flex;
-  //flex-direction: column;
-  align-items: center;
-  text-decoration: none;
-  font-family: 'Roboto', Helvetica, sans-serif;
-  margin: 15px 0;
-  font-weight: bold;
-
-  font-size: 17px;
-  line-height: 44px;
-  @include m-theme() {
-    color: themed($m-navigation-item);
-  }
-
-  &.m-sidebar--navigation--item-active {
+  .m-sidebar--navigation--item {
+    display: flex;
+    //flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    font-family: 'Roboto', Helvetica, sans-serif;
+    margin: 15px 0;
     font-weight: bold;
+
+    font-size: 17px;
+    line-height: 44px;
     @include m-theme() {
-      color: themed($m-black);
+      color: themed($m-navigation-item);
     }
-  }
 
-  i.material-icons {
-    //font-size:17px;
-    //line-height:44px;
-    margin-right: 30px;
-  }
+    &.m-sidebar--navigation--item-active {
+      font-weight: bold;
+      @include m-theme() {
+        color: themed($m-black);
+      }
+    }
 
-  span {
-    //text-transform: uppercase;
-    //font-size: 8px;
-    //letter-spacing: 1.25px;
-    //padding-top: 4px;
+    i.material-icons {
+      //font-size:17px;
+      //line-height:44px;
+      margin-right: 30px;
+    }
+
+    span {
+      //text-transform: uppercase;
+      //font-size: 8px;
+      //letter-spacing: 1.25px;
+      //padding-top: 4px;
+    }
   }
 }

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

 import {
   Component,
   ComponentFactoryResolver,
+  HostListener,
+  Inject,
   OnInit,
+  PLATFORM_ID,
   ViewChild,
 } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 
 import { Navigation as NavigationService } from '../../../services/navigation';
 import { Session } from '../../../services/session';
 import { GroupsSidebarMarkersComponent } from '../../../modules/groups/sidebar-markers/sidebar-markers.component';
 import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
+import { SidebarNavigationService } from './navigation.service';
+import { ConfigsService } from '../../services/configs.service';
 
 @Component({
   selector: 'm-sidebar--navigation',
   templateUrl: 'navigation.component.html',
 })
 export class SidebarNavigationComponent implements OnInit {
+  readonly cdnAssetsUrl: string;
+
   @ViewChild(DynamicHostDirective, { static: true }) host: DynamicHostDirective;
 
   user;
@@ -22,12 +30,27 @@ export class SidebarNavigationComponent implements OnInit {
   componentRef;
   componentInstance: GroupsSidebarMarkersComponent;
 
+  isDesktop: boolean = true;
+
+  isMobile: boolean = false;
+
+  isOpened: boolean = false;
+
   constructor(
     public navigation: NavigationService,
     public session: Session,
-    private _componentFactoryResolver: ComponentFactoryResolver
+    private service: SidebarNavigationService,
+    protected configs: ConfigsService,
+    private _componentFactoryResolver: ComponentFactoryResolver,
+    @Inject(PLATFORM_ID) private platformId: Object
   ) {
+    this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
+    this.service.setContainer(this);
     this.getUser();
+
+    if (isPlatformBrowser(this.platformId)) {
+      this.onResize();
+    }
   }
 
   ngOnInit() {
@@ -50,4 +73,20 @@ export class SidebarNavigationComponent implements OnInit {
     this.componentInstance = this.componentRef.instance;
     this.componentInstance.showLabels = true;
   }
+
+  toggle() {
+    if (this.isMobile) {
+      this.isOpened = !this.isOpened;
+    }
+  }
+
+  @HostListener('window:resize')
+  onResize() {
+    this.isDesktop = window.innerWidth > 900;
+    this.isMobile = window.innerWidth <= 540;
+
+    if (!this.isMobile) {
+      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) {
+    this.container = container;
+  }
+
+  toggle() {
+    if (this.container) {
+      this.container.toggle();
+    }
+  }
+}

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

-<ng-template #navLinks>
-  <a
-    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
-    routerLink="/newsfeed/subscriptions"
-    routerLinkActive="m-v3-topbarNav__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>
-  </a>
-
-  <a
-    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
-    routerLink="/newsfeed/global"
-    routerLinkActive="m-v3-topbarNav__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>
-  </a>
-
-  <a
-    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
-    routerLink="/wallet"
-    routerLinkActive="m-v3-topbarNav__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>
-  </a>
+<ng-template #searchBar>
+  <div class="m-v3-topbar__SearchBox">
+    <ng-content select="[search]"></ng-content>
+  </div>
 </ng-template>
 
 <div class="m-v3-topbar__Top">
@@ -45,6 +13,7 @@
           routerLink="/"
           title="Home"
           i18n-title
+          *ngIf="!isMobile; else hamburgerMenu"
         >
           <img
             [src]="cdnAssetsUrl + 'assets/logos/bulb.svg'"
@@ -53,10 +22,18 @@
             (mouseleave)="mouseLeave()"
           />
         </a>
+
+        <ng-template #hamburgerMenu>
+          <div class="m-v3-topbarNav__Item" (click)="toggleSidebarNav()">
+            <i class="material-icons">menu</i>
+          </div>
+        </ng-template>
       </nav>
     </div>
 
-    <div class="m-v3topbar__middleColumn">
+    <div class="m-v3Topbar__spacer" *ngIf="isMobile"></div>
+
+    <div class="m-v3topbar__middleColumn" *ngIf="!isMobile">
       <!--      <a-->
       <!--        class="m-v3-topbar__Avatar"-->
       <!--        *ngIf="getCurrentUser()"-->
@@ -68,14 +45,14 @@
       <!--          [editMode]="false"-->
       <!--        ></minds-avatar>-->
       <!--      </a>-->
-      <ng-container *ngIf="getCurrentUser()">
-        <div class="m-v3-topbar__SearchBox">
-          <ng-content select="[search]"></ng-content>
-        </div>
-      </ng-container>
+      <ng-container *ngTemplateOutlet="searchBar"></ng-container>
     </div>
 
     <div class="m-v3topbar__rightColumn">
+      <ng-container *ngIf="isMobile && getCurrentUser()">
+        <ng-container *ngTemplateOutlet="searchBar"></ng-container>
+      </ng-container>
+
       <!-- edit -->
 
       <!-- notifications -->
@@ -90,7 +67,41 @@
 </div>
 
 <div class="m-v3-topbar__Bottom">
-  <ng-container *ngTemplateOutlet="navLinks"></ng-container>
+  <a
+    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
+    routerLink="/newsfeed/subscriptions"
+    routerLinkActive="m-v3-topbarNav__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>
+  </a>
+
+  <a
+    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
+    routerLink="/newsfeed/global"
+    routerLinkActive="m-v3-topbarNav__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>
+  </a>
+
+  <a
+    class="m-v3-topbarNav__Item m-v3-topbarNav__RouterNav"
+    routerLink="/wallet"
+    routerLinkActive="m-v3-topbarNav__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>
+  </a>
 </div>
 
 <div class="m-v3-topbar__NotificationsToaster">

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

@@ -3,11 +3,23 @@ m-v3-topbar {
     grid-gap: 0;
     grid-template-columns: 3fr 5fr 4fr;
 
+    @media screen and (max-width: $m-grid-max-tablet) {
+      grid-template-columns: 71px 5fr 4fr;
+    }
+    @media screen and(max-width: $m-grid-max-mobile) {
+      display: flex;
+    }
+
     &,
     & > * {
       height: 75px;
     }
 
+    .m-v3Topbar__spacer {
+      flex-grow: 1;
+      opacity: 0;
+    }
+
     .m-v3topbar__leftColumn {
       margin-left: 33.3%;
       grid-column: 1 / span 1;
@@ -15,6 +27,10 @@ m-v3-topbar {
 
       display: flex;
       align-items: center;
+
+      @media screen and(max-width: $m-grid-max-mobile) {
+        margin-left: 23px;
+      }
     }
 
     .m-v3topbar__middleColumn {
@@ -29,10 +45,12 @@ m-v3-topbar {
       min-width: 0;
     }
 
-    .m-v3topbar__leftColumn,
-    .m-v3topbar__middleColumn {
-      @include m-theme() {
-        border-right: 1px solid themed($m-grey-400);
+    @media screen and(min-width: $m-grid-max-mobile) {
+      .m-v3topbar__leftColumn,
+      .m-v3topbar__middleColumn {
+        @include m-theme() {
+          border-right: 1px solid themed($m-grey-400);
+        }
       }
     }
   }
@@ -75,6 +93,15 @@ m-v3-topbar {
       > .mdl-textfield {
         width: 100%;
 
+        @media screen and(max-width: $m-grid-max-mobile) {
+          width: 20px;
+          transition: width ease-in-out 0.2s;
+
+          &.is-focused {
+            width: 270px;
+          }
+        }
+
         input {
           border: 0;
           font-size: 16px;
@@ -233,7 +260,7 @@ m-v3-topbar {
 
 .m-v3-topbarNavItem__Logo {
   margin: 0 8px 0 0;
-  padding: 0 12px;
+  padding: 0;
   //height: 62px;
   box-sizing: border-box;
   border: 0;

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

@@ -2,8 +2,11 @@ import {
   ChangeDetectorRef,
   Component,
   ComponentFactoryResolver,
+  HostListener,
+  Inject,
   OnDestroy,
   OnInit,
+  PLATFORM_ID,
   ViewChild,
 } from '@angular/core';
 import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
@@ -11,6 +14,8 @@ import { NotificationsToasterComponent } from '../../../modules/notifications/to
 import { Session } from '../../../services/session';
 import { ThemeService } from '../../services/theme.service';
 import { ConfigsService } from '../../services/configs.service';
+import { isPlatformBrowser } from '@angular/common';
+import { SidebarNavigationService } from '../sidebar/navigation.service';
 
 @Component({
   selector: 'm-v3-topbar',
@@ -27,14 +32,22 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
   componentRef;
   componentInstance: NotificationsToasterComponent;
 
+  isMobile: boolean = false;
+
   constructor(
+    protected sidebarService: SidebarNavigationService,
     protected themeService: ThemeService,
     protected configs: ConfigsService,
     protected session: Session,
     protected cd: ChangeDetectorRef,
-    protected componentFactoryResolver: ComponentFactoryResolver
+    protected componentFactoryResolver: ComponentFactoryResolver,
+    @Inject(PLATFORM_ID) private platformId: Object
   ) {
     this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
+
+    if (isPlatformBrowser(this.platformId)) {
+      this.onResize();
+    }
   }
 
   ngOnInit() {
@@ -81,6 +94,15 @@ export class V3TopbarComponent implements OnInit, OnDestroy {
     clearTimeout(this.timeout);
   }
 
+  toggleSidebarNav() {
+    this.sidebarService.toggle();
+  }
+
+  @HostListener('window:resize')
+  onResize() {
+    this.isMobile = window.innerWidth <= 540;
+  }
+
   ngOnDestroy() {
     if (this.timeout) {
       clearTimeout(this.timeout);

src/app/common/services/theme.service.ts

-import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import {
+  Inject,
+  Injectable,
+  PLATFORM_ID,
+  Renderer2,
+  RendererFactory2,
+} from '@angular/core';
 import { Client } from '../../services/api/client';
 import { Session } from '../../services/session';
 import { Storage } from '../../services/storage';
 import { BehaviorSubject, Subscription } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
 
 @Injectable()
 export class ThemeService {
@@ -16,7 +23,8 @@ export class ThemeService {
     private rendererFactory: RendererFactory2,
     private client: Client,
     private session: Session,
-    private storage: Storage
+    private storage: Storage,
+    private platformId: Object
   ) {
     this.renderer = rendererFactory.createRenderer(null, null);
   }
@@ -25,9 +33,16 @@ export class ThemeService {
     rendererFactory: RendererFactory2,
     client: Client,
     session: Session,
-    storage: Storage
+    storage: Storage,
+    platformId: Object
   ) {
-    return new ThemeService(rendererFactory, client, session, storage);
+    return new ThemeService(
+      rendererFactory,
+      client,
+      session,
+      storage,
+      platformId
+    );
   }
 
   // TODO after release of MacOS 10.14.4
@@ -92,13 +107,15 @@ export class ThemeService {
       this.renderer.removeClass(document.body, 'm-theme__dark');
       this.renderer.addClass(document.body, 'm-theme__light');
     }
-    //this.clearTransitions();
+    this.clearTransitions();
   }
 
   clearTransitions() {
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => {
-      this.renderer.removeClass(document.body, 'm-theme-in-transition');
-    }, 1000);
+    if (isPlatformBrowser(this.platformId)) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.renderer.removeClass(document.body, 'm-theme-in-transition');
+      }, 1000);
+    }
   }
 }

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

 <ul class="m-groupSidebarMarkers__list m-scroll__thin" #list>
   <li style="display:flex">
-    <a [routerLink]="['/groups/create']">
+    <a
+      class="m-groupSidebarMarkers__newGroup"
+      [routerLink]="['/groups/create']"
+    >
       <m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
         <i class="material-icons" m-tooltip--anchor>add</i>
         <span i18n="@@M__COMMON__NEW_GROUP">New group</span>
@@ -15,6 +18,28 @@
     </a>
   </li>
 
+  <li *ngIf="!inProgress && groups && groups.length > 0">
+    <a
+      class="m-groupSidebarMarkers__discoverGroups"
+      [routerLink]="[
+        '/newsfeed/global/top',
+        { period: '12h', type: 'groups', all: 1 }
+      ]"
+    >
+      <m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
+        <i class="material-icons" m-tooltip--anchor>people</i>
+        <span i18n="@@M__COMMON__DISCOVER_GROUPS">Discover Groups</span>
+
+        <ng-container i18n="@@M__COMMON__DISCOVER_GROUPS">
+          Discover Groups
+        </ng-container>
+      </m-tooltip>
+      <ng-container i18n="@@M__COMMON__DISCOVER_GROUPS" *ngIf="showLabels">
+        Discover Groups
+      </ng-container>
+    </a>
+  </li>
+
   <li *ngFor="let group of groups" [class.has-marker]="group.hasMarker">
     <a [routerLink]="['/groups/profile', group.guid]">
       <m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
@@ -45,29 +70,18 @@
         />
         <span>Noname</span>
 
-        <ng-container>
+        <ng-container
+          i18n="@@M__COMMON__JOIN_SOME_GROUPS_TO_POPULATE_THIS_SIDEBAR"
+        >
           Join some groups to populate this sidebar
         </ng-container>
       </m-tooltip>
-    </a>
-  </li>
-
-  <li *ngIf="!inProgress && groups && groups.length > 0">
-    <a
-      [routerLink]="[
-        '/newsfeed/global/top',
-        { period: '12h', type: 'groups', all: 1 }
-      ]"
-    >
-      <!-- todo: TEST IT -->
-      <m-tooltip [anchor]="tooltipsAnchor" [useParentPosition]="true">
-        <i class="material-icons" m-tooltip--anchor>people</i>
-        <span>Find a Group</span>
-
-        <ng-container>
-          Find a Group
-        </ng-container>
-      </m-tooltip>
+      <ng-container
+        i18n="@@M__COMMON__JOIN_SOME_GROUPS_TO_POPULATE_THIS_SIDEBAR"
+        *ngIf="showLabels"
+      >
+        Join some groups to populate this sidebar
+      </ng-container>
     </a>
   </li>
 

src/app/services/providers.ts

-import { NgZone, RendererFactory2, PLATFORM_ID } from '@angular/core';
+import { NgZone, RendererFactory2, PLATFORM_ID, Inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
 import { TransferState } from '@angular/platform-browser';
@@ -230,7 +230,7 @@ export const MINDS_PROVIDERS: any[] = [
   {
     provide: ThemeService,
     useFactory: ThemeService._,
-    deps: [RendererFactory2, Client, Session, Storage],
+    deps: [RendererFactory2, Client, Session, Storage, PLATFORM_ID],
   },
   DiagnosticsService,
   AuthService,

src/stylesheets/themes.scss

@@ -84,9 +84,16 @@ $messenger: #0084ff;
 $twitter: #03b3ee;
 $whatsapp: #25d366;
 $linkedin: #0071a1;
+
 $navigation-item: #aeb0b8;
 $navigation-item-hover: #a6a6a6;
 
+$second-text-color: #7d7d82;
+$second-text-color-dark: #aeb0b8;
+
+$primary-border: #dce2e4;
+$primary-border-dark: #404a4e;
+
 // Theme maps
 // e.g. m-grey-100 in light mode will become m-grey-900 in dark mode
 $themes: (
@@ -146,6 +153,8 @@ $themes: (
     m-linkedin: $linkedin,
     m-navigation-item: $navigation-item,
     m-navigation-item-hover: $navigation-item-hover,
+    m-second-text-color: $second-text-color,
+    m-primary-border: $primary-border,
   ),
   dark: (
     m-grey-950: lighten($grey-50, $percent),
@@ -203,6 +212,8 @@ $themes: (
     m-linkedin: $linkedin,
     m-navigation-item: lighten($navigation-item, $percent),
     m-navigation-item-hover: lighten($navigation-item-hover, $percent),
+    m-second-text-color: $second-text-color-dark,
+    m-primary-border: $primary-border-dark,
   ),
 );
 
@@ -269,3 +280,7 @@ $m-linkedin: 'm-linkedin';
 
 $m-navigation-item: 'm-navigation-item';
 $m-navigation-item-hover: 'm-navigation-item-hover';
+
+$m-second-text-color: 'm-second-text-color';
+
+$m-primary-border: 'm-primary-border';