nav bar & basic layout

dsynth/src/app/app-routing.module.ts

@@ -1,8 +1,12 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import {NgModule} from "@angular/core";
+import {RouterModule, Routes} from "@angular/router";
+import {ContactComponent} from "./contact/contact.component";
 
 
-const routes: Routes = [];
+const routes: Routes = [
+    {path: "", component: ContactComponent},
+    {path: "contact", component: ContactComponent},
+];
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],

dsynth/src/app/app.component.css

@@ -0,0 +1,13 @@
+.large-nav {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .large-nav {
+        display: initial;
+    }
+
+    .small-nav {
+        display: none;
+    }
+}

dsynth/src/app/app.component.html

@@ -1,5 +1,22 @@
 <mat-toolbar color="primary">
 
+    <div class="large-nav">
+        <button mat-button [class.mat-accent]="router.url === '/'" class="nav-title"
+                [routerLink]="''">{{"nav.title" | translate}}</button>
+    </div>
+    <div class="small-nav">
+        <button mat-button [matMenuTriggerFor]="smallNav">
+            <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #smallNav>
+            <button mat-menu-item [class.mat-accent]="router.url === '/'" class="nav-title"
+                    [routerLink]="''">{{"nav.title" | translate}}</button>
+        </mat-menu>
+    </div>
+
+    <span class="spacer"></span>
+
+    <!-- Lang select-->
     <button mat-button [matMenuTriggerFor]="langMenu">
         {{"nav.lang_select" | translate}}
         <mat-icon>arrow_drop_down</mat-icon>
@@ -11,6 +28,6 @@
     </mat-menu>
 </mat-toolbar>
 
-<h1> {{ "nav.test" | translate }}</h1>
-
-<router-outlet></router-outlet>
+<div class="container">
+    <router-outlet></router-outlet>
+</div>

dsynth/src/app/app.component.ts

@@ -1,14 +1,15 @@
-import {Component} from '@angular/core';
+import {Component} from "@angular/core";
 import {TranslateService} from "@ngx-translate/core";
+import {Router} from "@angular/router";
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: []
+    selector: "app-root",
+    templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.css"]
 })
 export class AppComponent {
 
-    constructor(private translate: TranslateService) {
+    constructor(private translate: TranslateService, public router: Router) {
 
         translate.addLangs([
             'en',
@@ -20,8 +21,8 @@ export class AppComponent {
     }
 
     langList: any[] = [
-        {lang: 'fr', display: 'Français'},
         {lang: 'en', display: 'English'},
+        {lang: 'fr', display: 'Français'},
         {lang: 'ru', display: 'Русский'},
     ];
 

dsynth/src/app/app.module.ts

@@ -11,6 +11,8 @@ import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {MatButtonModule} from "@angular/material/button";
 import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
 import {HttpClient, HttpClientModule} from "@angular/common/http";
+import { ContactComponent } from './contact/contact.component';
+import {MatCardModule} from "@angular/material/card";
 
 export function createTranslateLoader(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -18,7 +20,8 @@ export function createTranslateLoader(http: HttpClient) {
 
 @NgModule({
     declarations: [
-        AppComponent
+        AppComponent,
+        ContactComponent
     ],
     imports: [
         BrowserModule,
@@ -37,6 +40,7 @@ export function createTranslateLoader(http: HttpClient) {
                 }
             }
         ),
+        MatCardModule,
     ],
     providers: [],
     bootstrap: [AppComponent]

dsynth/src/app/contact/contact.component.css

@@ -0,0 +1,8 @@
+.example-card {
+    max-width: 400px;
+}
+
+.example-header-image {
+    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+    background-size: cover;
+}

dsynth/src/app/contact/contact.component.html

@@ -0,0 +1,21 @@
+<mat-card class="example-card">
+    <mat-card-header>
+        <div mat-card-avatar class="example-header-image"></div>
+        <mat-card-title> {{ "nav.test" | translate }}</mat-card-title>
+        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+    </mat-card-header>
+    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+    <mat-card-content>
+        <p>
+            The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+            A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+            bred for hunting.
+        </p>
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-button>LIKE</button>
+        <button mat-button>SHARE</button>
+    </mat-card-actions>
+</mat-card>
+
+

dsynth/src/app/contact/contact.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: "app-contact",
+    templateUrl: "./contact.component.html",
+    styleUrls: ["./contact.component.css"]
+})
+export class ContactComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+    }
+
+}

dsynth/src/assets/i18n/en.json

@@ -1,5 +1,7 @@
 {
     "nav": {
+        "title": "dsynth.net",
+        "lang_select": "Language",
         "test": "Hello"
     }
 }

dsynth/src/styles.css

@@ -1,10 +1,55 @@
-/* You can add global styles to this file, and also import other style files */
-
-html, body {
-    height: 100%;
-}
-
 body {
     margin: 0;
     font-family: Roboto, "Helvetica Neue", sans-serif;
+    background: #303030;
 }
+
+.container {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 25px;
+}
+
+@media (min-width: 576px) {
+    .container {
+        max-width: 540px;
+    }
+}
+
+@media (min-width: 768px) {
+    .container {
+        max-width: 720px;
+    }
+}
+
+@media (min-width: 992px) {
+    .container {
+        max-width: 960px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1140px;
+    }
+}
+
+@media (min-width: 1600px) {
+    .container {
+        max-width: 1440px;
+    }
+}
+
+@media (min-width: 2200px) {
+    .container {
+        max-width: 2000px;
+    }
+}
+
+.spacer {
+    flex: 1 1 auto;
+}
+