fix translate module forChild and translate sidebar

Author: Stivin

src/app/app.routing.ts

@@ -4,10 +4,11 @@ import { MetaGuard } from '@ngx-meta/core';
 import { WrapperComponent } from '@shared/layouts/wrapper/wrapper.component';
 
 const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
   {
     path: '', component: WrapperComponent, children: [
       {
-        path: '', loadChildren: './home/home.module#HomeModule',
+        path: 'home', loadChildren: './home/home.module#HomeModule',
         data: {
           // for override default meta
           meta: {

src/app/shared/layouts/footer/footer.component.html

@@ -0,0 +1,7 @@
+<footer>
+    <span class="footer__left">Angular RU Universal Starter</span>
+
+    <a *ngFor="let item of tMe" [href]="item.link" rel="nofollow">
+        <img [src]="item.src" [alt]="item.alt">
+    </a>
+</footer>

src/app/shared/layouts/footer/footer.component.ts

@@ -1,8 +1,22 @@
 import { Component } from '@angular/core';
 
+const T_ME: any[] = [
+  {
+    link: 'https://t.me/angular_ru',
+    src: 'https://camo.githubusercontent.com/cf47bb838e2e27d8bcb46de3a7abb1a74556bb0c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f54656c656772616d5f636861743a2d416e67756c61725f52552d3231366263312e7376673f7374796c653d666c6174',
+    alt: 'Angular-RU'
+  },
+  {
+    link: 'https://t.me/angular_universal_ru',
+    src: 'https://camo.githubusercontent.com/acd09569925bcdadffb848e234e1e4dbb07a6ad9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f54656c656772616d5f636861743a2d416e67756c61725f52555f556e6976657273616c2d3134623130322e7376673f7374796c653d666c6174',
+    alt: 'Angular-RU Universal'
+  },
+];
+
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html'
 })
 export class FooterComponent {
+  public tMe: any[] = T_ME;
 }

src/app/shared/layouts/layouts.module.ts

@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-
-import { TranslatesModule } from '@shared/translates/translates.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { FooterComponent } from './footer/footer.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
@@ -13,7 +12,7 @@ import { WrapperComponent } from './wrapper/wrapper.component';
   imports: [
     CommonModule,
     RouterModule,
-    TranslatesModule
+    TranslateModule.forChild()
   ],
   declarations: [
     FooterComponent,

src/app/shared/layouts/sidebar/sidebar.component.html

@@ -1,7 +1,10 @@
 <nav>
     <ul>
-        <li><a [routerLink]="['']" [routerLinkActive]="['router-link-active']">home</a></li>
-        <li><a [routerLink]="['/mock']" [routerLinkActive]="['router-link-active']">mock</a></li>
-        <li><a [routerLink]="['/back']" [routerLinkActive]="['router-link-active']">back http</a></li>
+        <li *ngFor="let item of links">
+            <a [routerLink]="[item.link]" [routerLinkActive]="['active']">
+                <i class="material-icons">{{ item.icon }}</i>
+                {{ item.name | translate }}
+            </a>
+        </li>
     </ul>
 </nav>

src/app/shared/layouts/sidebar/sidebar.component.ts

@@ -1,8 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+const LINKS: any[] = [
+  { link: '/home', name: 'home', icon: 'home' },
+  { link: '/mock', name: 'mock', icon: 'accessibility' },
+  { link: '/back', name: 'back-http', icon: 'accessibility' },
+];
 
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html'
 })
-export class SidebarComponent {
+export class SidebarComponent implements OnInit {
+  public links: any[];
+
+  ngOnInit() {
+    this.links = LINKS.map(link => {
+      link.name = `sidebar.${link.name}`;
+      return link;
+    });
+  }
 }

src/assets/i18n/en.json

@@ -1,4 +1,9 @@
 {
+  "sidebar": {
+    "home": "Home",
+    "mock": "Mock",
+    "back-http": "Back http"
+  },
   "home": "This is some text in English at home page",
   "mock": "This is some text in English at mock page",
   "back-http": "This is some text in English at back http page"

src/assets/i18n/ru.json

@@ -1,4 +1,9 @@
 {
+  "sidebar": {
+    "home": "Главная",
+    "mock": "Мокап",
+    "back-http": "Http на бэк"
+  },
   "home": "Какой-то текст на русском на домашней странице",
   "mock": "Какой-то текст на русском на мокап странице",
   "back-http": "Какой-то текст на русском на бэк http странице"

src/styles/layouts/_footer.scss

@@ -9,4 +9,15 @@ app-footer {
   font-size: 12px;
   margin: 0 15px;
   overflow: hidden;
+  footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .footer__left {
+      flex: 1;
+    }
+    a {
+      padding: 15px 0 0 10px;
+    }
+  }
 }

src/styles/layouts/_sidebar.scss

@@ -1,5 +1,39 @@
 app-sidebar {
   display: block;
   width: 200px;
-  border-right: 2px solid $color-primary;
+  ul {
+    margin: 0;
+    padding: 0;
+    border-right: 2px solid $color-primary;
+    li {
+      list-style-type: none;
+      a {
+        position: relative;
+        cursor: pointer;
+        display: block;
+        background-color: transparent;
+        color: #212121;
+        height: 48px;
+        line-height: 48px;
+        text-decoration: none;
+        font-weight: 500;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        padding: 0 16px 0 48px;
+        transition: all .3s ease-in-out;
+        &:hover {
+          background-color: #e0e0e0;
+        }
+        &.active {
+          background-color: #e0e0e0;
+        }
+        .material-icons {
+          position: absolute;
+          top: 10px;
+          left: 15px;
+        }
+      }
+    }
+  }
 }