src/app/common/common.module.ts

@@ -111,6 +111,7 @@ import { DndModule } from 'ngx-drag-drop';
 import { SiteService } from './services/site.service';
 import { MarketingComponent } from './components/marketing/marketing.component';
 import { MarketingFooterComponent } from './components/marketing/footer.component';
+import { ToggleComponent } from './components/toggle/toggle.component';
 
 @NgModule({
   imports: [
@@ -209,6 +210,7 @@ import { MarketingFooterComponent } from './components/marketing/footer.componen
     FeaturedContentComponent,
     PosterDateSelectorComponent,
     DraggableListComponent,
+    ToggleComponent,
     MarketingComponent,
     MarketingFooterComponent,
   ],
@@ -298,6 +300,7 @@ import { MarketingFooterComponent } from './components/marketing/footer.componen
     PosterDateSelectorComponent,
     ChannelModeSelectorComponent,
     DraggableListComponent,
+    ToggleComponent,
     MarketingComponent,
   ],
   providers: [

src/app/common/components/marketing/footer.component.html

@@ -7,49 +7,53 @@
 
       <ul>
         <li>
-          <a href="" i18n>
+          <a href="#" i18n>
             Company
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="#" i18n>
             Mission
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="#" i18n>
             Features
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/mobile" i18n>
             Mobile
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/jobs" i18n>
             Careers
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="#" i18n>
             Investors
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/blog/minds" i18n>
             Blog
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a
+            href="https://cdn-assets.minds.com/front/dist/assets/whitepapers/03_27_18_Minds%20Whitepaper%20V0.1.pdf"
+            target="_blank"
+            i18n
+          >
             Whitepaper
           </a>
         </li>
@@ -63,49 +67,49 @@
 
       <ul>
         <li>
-          <a href="" i18n>
+          <a routerLink="/upgrades" i18n>
             Upgrade
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/token" i18n>
             Token
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/plus" i18n>
             Plus
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/pro" i18n>
             Pro
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="#" i18n>
             Nodes
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
-            Ads
+          <a routerLink="/boost" i18n>
+            Boost
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="#" i18n>
             Payments
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="#" i18n>
             Store
           </a>
         </li>
@@ -119,31 +123,31 @@
 
       <ul>
         <li>
-          <a href="" i18n>
+          <a href="https://developers.minds.com" target="_blank" i18n>
             Documentation
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/groups/profile/365903183068794880" i18n>
             Community
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="https://gitlab.com/minds" target="_blank" i18n>
             Code
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/canary" i18n>
             Canary
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/branding" i18n>
             Branding
           </a>
         </li>
@@ -157,31 +161,31 @@
 
       <ul>
         <li>
-          <a href="" i18n>
+          <a routerLink="/help" i18n>
             Help Desk
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/groups/profile/100000000000000681" i18n>
             Community
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/localization" i18n>
             Languages
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a href="https://status.minds.com" target="_blank" i18n>
             Status
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/p/contact" i18n>
             Contact
           </a>
         </li>
@@ -204,25 +208,25 @@
     >
       <ul class="m-marketingFooter__inlineList">
         <li>
-          <a href="" i18n>
+          <a routerLink="/p/terms" i18n>
             Terms of Service
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/p/privacy" i18n>
             Privacy Policy
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/content-policy" i18n>
             Content Policy
           </a>
         </li>
 
         <li>
-          <a href="" i18n>
+          <a routerLink="/p/dmca" i18n>
             DMCA
           </a>
         </li>

src/app/common/components/toggle/toggle.component.html

+<div class="m-toggle__track"></div>
+<div
+  class="m-toggle__switch"
+  [class.m-toggle__switch--left]="mModel === leftValue"
+  [class.m-toggle__switch--right]="mModel === rightValue"
+></div>

src/app/common/components/toggle/toggle.component.scss

+m-toggle {
+  position: relative;
+  display: inline-block;
+  width: 27px;
+  height: 19px;
+  margin: 0 0.35em;
+  cursor: pointer;
+
+  .m-toggle__track {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 10px;
+    z-index: 1;
+    transform: translateY(-50%);
+    border-radius: 6px;
+
+    @include m-theme() {
+      background: themed($m-grey-100);
+    }
+  }
+
+  .m-toggle__switch {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 19px;
+    height: 19px;
+    z-index: 2;
+    transform: translateX(-50%);
+    border-radius: 50%;
+
+    @include m-theme() {
+      background: themed($m-grey-100);
+      box-shadow: 1px 1px 1px -1px rgba(themed($m-black), 0.3);
+    }
+
+    &.m-toggle__switch--left,
+    &.m-toggle__switch--right {
+      transform: none;
+
+      @include m-theme() {
+        background: themed($m-blue);
+      }
+    }
+
+    &.m-toggle__switch--left {
+      left: 0;
+      right: auto;
+    }
+
+    &.m-toggle__switch--right {
+      right: 0;
+      left: auto;
+    }
+  }
+}

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

+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Component({
+  selector: 'm-toggle',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'toggle.component.html',
+})
+export class ToggleComponent {
+  @Input('leftValue') leftValue: any;
+
+  @Input('rightValue') rightValue: any;
+
+  @Input('mModel') mModel: any;
+
+  @Output('mModelChange') mModelChange: EventEmitter<any> = new EventEmitter<
+    any
+  >();
+
+  @HostListener('click') toggle() {
+    if (this.mModel === this.leftValue) {
+      this.mModelChange.emit(this.rightValue);
+    } else {
+      this.mModelChange.emit(this.leftValue);
+    }
+  }
+}

src/app/modules/upgrades/upgrade-options.component.html

@@ -5,12 +5,24 @@
     <div class="m-upgradesUpgradeOptionsHeader__toggleContainer">
       <div class="m-upgradesUpgradeOptionsHeader__toggle">
         <span class="">Yearly</span>
-        <!-- TODO: left/right toggle -->
+        <span
+          ><m-toggle
+            [(mModel)]="interval"
+            leftValue="yearly"
+            rightValue="monthly"
+          ></m-toggle
+        ></span>
         <span class="">Monthly</span>
       </div>
       <div class="m-upgradesUpgradeOptionsHeader__toggle">
         <span class="">USD</span>
-        <!-- TODO: left/right toggle -->
+        <span
+          ><m-toggle
+            [(mModel)]="currency"
+            leftValue="usd"
+            rightValue="tokens"
+          ></m-toggle
+        ></span>
         <span class="">Tokens</span>
       </div>
     </div>

src/app/modules/upgrades/upgrade-options.component.scss

@@ -21,6 +21,10 @@ m-upgrades__upgradeOptions {
       align-items: center;
 
       .m-upgradesUpgradeOptionsHeader__toggle {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: stretch;
         margin-right: 50px;
 
         &:last-child {

src/app/modules/upgrades/upgrade-options.component.ts

@@ -5,4 +5,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'upgrade-options.component.html',
 })
-export class UpgradeOptionsComponent {}
+export class UpgradeOptionsComponent {
+  interval: string = 'yearly';
+  currency: string = 'tokens';
+}