layout - parte 2

Author: sergiohidalgocaceres

ambulance/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start:max": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve",
     "start:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --open",
     "build": "ng build",
     "test": "ng test",

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

@@ -1,10 +1,45 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PageLoginComponent } from './core/presentation/pages/page-login/page-login.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: 'auth',
+    component: PageLoginComponent,
+  },
+  {
+    path: 'dashboard',
+    loadChildren: () =>
+      import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
+  },
+  {
+    path: 'medics',
+    loadChildren: () =>
+      import('./medics/medics.module').then((m) => m.MedicsModule),
+  },
+  {
+    path: 'users',
+    loadChildren: () =>
+      import('./users/users.module').then((m) => m.UsersModule),
+  },
+  {
+    path: 'drivers',
+    loadChildren: () =>
+      import('./drivers/drivers.module').then((m) => m.DriversModule),
+  },
+  {
+    path: 'histories',
+    loadChildren: () =>
+      import('./histories/histories.module').then((m) => m.HistoriesModule),
+  },
+  {
+    path: '**',
+    redirectTo: 'auth',
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

ambulance/src/app/app.component.css

@@ -8,3 +8,15 @@ mat-sidenav {
   width: 280px;
   background-color: rgb(45, 50, 62);
 }
+
+.logo {
+  padding: 0 24px;
+  background-color: rgb(30, 33, 41);
+  color: hsla(0, 0%, 100%, 0.7) !important;
+}
+
+.logo h3 {
+  line-height: 64px;
+  margin: 0;
+  padding: 0;
+}

ambulance/src/app/app.component.html

@@ -1,6 +1,13 @@
 <mat-sidenav-container>
-  <mat-sidenav opened="true" mode="side">Menu</mat-sidenav>
+  <mat-sidenav opened="true" mode="side">
+    <div class="logo" fxLayout fxLayoutGap="20px" fxLayoutAlign="start center">
+      <mat-icon svgIcon="logo"></mat-icon>
+      <h3>Sistema de historias</h3>
+    </div>
+    <amb-menu></amb-menu>
+  </mat-sidenav>
   <mat-sidenav-content>
     <amb-header></amb-header>
+    <router-outlet></router-outlet>
   </mat-sidenav-content>
 </mat-sidenav-container>

ambulance/src/app/app.module.ts

@@ -7,17 +7,22 @@ import { LoginComponent } from './login.component';
 import { ItemComponent } from './item/item.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CoreModule } from './core/core.module';
-import { MatSidenavModule } from '@angular/material/sidenav';
+import { IconService } from './shared/services/icon.service';
+import { HttpClientModule } from '@angular/common/http';
+import { SharedModule } from './shared/shared.module';
 @NgModule({
   declarations: [AppComponent, LoginComponent, ItemComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MatSidenavModule,
+    HttpClientModule,
+    SharedModule,
     CoreModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  constructor(private readonly iconService: IconService) {}
+}

ambulance/src/app/core/core.module.ts

@@ -6,17 +6,23 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatMenuModule } from '@angular/material/menu';
+import { MenuComponent } from './presentation/views/menu/menu.component';
+import { MatListModule } from '@angular/material/list';
+import { PageLoginComponent } from './presentation/pages/page-login/page-login.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
-  declarations: [HeaderComponent],
+  declarations: [HeaderComponent, MenuComponent, PageLoginComponent],
   imports: [
     CommonModule,
     MatToolbarModule,
     MatButtonModule,
     MatIconModule,
     FlexLayoutModule,
     MatMenuModule,
+    MatListModule,
+    RouterModule,
   ],
-  exports: [HeaderComponent],
+  exports: [HeaderComponent, MenuComponent, PageLoginComponent],
 })
 export class CoreModule {}

ambulance/src/app/core/presentation/pages/page-login/page-login.component.css

@@ -0,0 +1 @@
+<p>page-login works!</p>

ambulance/src/app/core/presentation/pages/page-login/page-login.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'amb-page-login',
+  templateUrl: './page-login.component.html',
+  styleUrls: ['./page-login.component.css']
+})
+export class PageLoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

ambulance/src/app/core/presentation/pages/page-login/page-login.component.ts

@@ -0,0 +1,25 @@
+mat-nav-list {
+  width: 95%;
+}
+
+mat-list-item {
+  transition: 0.2s all;
+  border-radius: 0 24px 24px 0;
+}
+
+mat-list-item:hover {
+  background-color: #039be5 !important;
+}
+
+.activeLink {
+  background-color: #039be5 !important;
+}
+
+a,
+a:link,
+a:visited,
+a:active {
+  color: white;
+  font-size: 14px;
+  font-family: muliregular;
+}