SideBar- Navegacion entre login y sidebar por mejorar

ItsasoAguirre · Jan 19, 2020 · a34331f · a34331f
1 parent 8e746e4
commit a34331f
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 24 deletions.
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -4,7 +4,7 @@
 <section id="wrapper" class="login-register login-sidebar" style="background-image:url(../assets/images/background/login-register.jpg);">
     <div class="login-box card">
         <div class="card-body">
-            <form class="form-horizontal form-material" id="loginform" action="index.html">
+            <form class="form-horizontal form-material" (ngSubmit)="ingresar()">
                 <a href="javascript:void(0)" class="text-center db"><img src="../assets/images/logo-icon.png" alt="Home" /><br/><img src="../assets/images/logo-text.png" alt="Home" /></a>
                 <div class="form-group m-t-40">
                     <div class="col-xs-12">

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+declare function init_plugins();
 
 @Component({
   selector: 'app-login',
@@ -7,9 +10,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor( public router: Router) { }
 
   ngOnInit() {
+    init_plugins();
   }
 
-}
+  ingresar() {
+    this.router.navigate(['/dashboard']);
+
+  }
+}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+// declare function init_plugins();
+
 @Component({
   selector: 'app-pages',
   templateUrl: './pages.component.html',
@@ -10,6 +12,18 @@ export class PagesComponent implements OnInit {
   constructor() { }
 
   ngOnInit() {
+    // deprecated
+    // $(document).ready(() => {
+    //   const trees: any = $('[data-widget="tree"]');
+    //   trees.tree();
+    // });
+
+    // $(document).on('ready', () => {
+    //   const trees: any = $('[data-widget="tree"]');
+    //   trees.tree();
+    // });
+
+    // init_plugins();
   }
 
 }
diff --git a/src/app/services/shared/sidebar.service.ts b/src/app/services/shared/sidebar.service.ts
@@ -5,5 +5,16 @@ import { Injectable } from '@angular/core';
 })
 export class SidebarService {
 
+  menu: any = [
+    {
+      titulo: 'Principal',
+      icono: 'mdi mdi-gauge',
+      subMenu: [
+        {titulo: 'Dashboard', url: '/dashboard', icono: 'mdi mdi-gauge'},
+        {titulo: 'ProgressBar', url: '/progress', icono: 'mdi mdi-gauge'},
+        {titulo: 'Gráficas', url: '/graficas1', icono: 'mdi mdi-gauge'}
+      ]
+    }
+  ];
   constructor() { }
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -1,4 +1,7 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { RouterModule } from '@angular/router';
 
 import { NopagefoundComponent } from './nopagefound/nopagefound.component';
 import { HeaderComponent } from './header/header.component';
@@ -8,6 +11,10 @@ import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 
 
 @NgModule({
+  imports: [
+    CommonModule,
+    RouterModule
+  ],
   declarations: [
     NopagefoundComponent,
     HeaderComponent,

diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html
@@ -5,25 +5,22 @@
     <div class="scroll-sidebar">
         <!-- Sidebar navigation-->
         <nav class="sidebar-nav">
-            <ul id="sidebarnav">
+            <ul id="sidebarnav" data-widget="tree">
                 <li class="user-profile">
                     <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><img src="../assets/images/users/profile.png" alt="user" /><span class="hide-menu">Steave Jobs </span></a>
                     <ul aria-expanded="false" class="collapse">
-                        <li><a href="javascript:void()">My Profile </a></li>
-                        <li><a href="javascript:void()">My Balance</a></li>
-                        <li><a href="javascript:void()">Inbox</a></li>
-                        <li><a href="javascript:void()">Account Setting</a></li>
-                        <li><a href="javascript:void()">Logout</a></li>
+                        <li><a>My Profile </a></li>
+                        <li><a>My Balance</a></li>
+                        <li><a>Inbox</a></li>
+                        <li><a [routerLink]="['/account-settings']" routerLinkActive="active">Account Setting</a></li>
+                        <li><a routerLink="/login">Logout</a></li>
                     </ul>
                 </li>
                 <li class="nav-devider"></li>
                 <li class="nav-small-cap">PERSONAL</li>
-                <li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">Dashboard <span class="label label-rouded label-themecolor pull-right">4</span></span></a>
+                <li *ngFor="let menu of sidebarService.menu"> <a class="has-arrow waves-effect waves-dark" aria-expanded="false"><i [class]="menu.icono"></i><span class="hide-menu">{{menu.titulo}} <span class="label label-rouded label-themecolor pull-right">{{menu.subMenu.length}}</span></span></a>
                     <ul aria-expanded="false" class="collapse">
-                        <li><a href="index.html">Minimal </a></li>
-                        <li><a href="index2.html">Analytical</a></li>
-                        <li><a href="index3.html">Demographical</a></li>
-                        <li><a href="index4.html">Modern</a></li>
+                        <li *ngFor="let submenu of menu.subMenu"><a routerLinkActive="active" [routerLink]="[submenu.url]">{{submenu.titulo}} </a></li>
                     </ul>
                 </li>
 

diff --git a/src/app/shared/sidebar/sidebar.component.ts b/src/app/shared/sidebar/sidebar.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SidebarService } from '../../services/service.index';
 
 @Component({
   selector: 'app-sidebar',
@@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {
 
-  constructor() { }
+  constructor( public sidebarService: SidebarService) { }
 
   ngOnInit() {
   }

diff --git a/src/assets/js/custom.js b/src/assets/js/custom.js
@@ -4,13 +4,14 @@ Author: Wrappixel
 Email: [email protected]
 File: js
 */
+
 $(function() {
     "use strict";
     $(function() {
         $(".preloader").fadeOut();
     });
     jQuery(document).on('click', '.mega-dropdown', function(e) {
-        e.stopPropagation()
+        e.stopPropagation();
     });
     // ============================================================== 
     // This is for the top header part and sidebar part
@@ -46,12 +47,12 @@ $(function() {
             $("body").trigger("resize");
             $("body").removeClass("mini-sidebar");
             $('.navbar-brand span').show();
-            
+
         } else {
             $("body").trigger("resize");
             $("body").addClass("mini-sidebar");
             $('.navbar-brand span').hide();
-            
+
         }
     });
 
@@ -100,14 +101,14 @@ $(function() {
     //tooltip
     // ============================================================== 
     $(function() {
-        $('[data-toggle="tooltip"]').tooltip()
-    })
+        $('[data-toggle="tooltip"]').tooltip();
+    });
     // ============================================================== 
     //Popover
     // ============================================================== 
     $(function() {
-        $('[data-toggle="popover"]').popover()
-    })
+        $('[data-toggle="popover"]').popover();
+    });
     // ============================================================== 
     // Sidebarmenu
     // ============================================================== 
@@ -119,7 +120,7 @@ $(function() {
     // Perfact scrollbar
     // ============================================================== 
     $('.scroll-sidebar, .right-side-panel, .message-center, .right-sidebar').perfectScrollbar();
-    
+
     // ============================================================== 
     // Resize all elements
     // ============================================================== 
@@ -131,7 +132,7 @@ $(function() {
         $(this).toggleClass("task-done");
     });
 
-    
+
 
     // ============================================================== 
     // Collapsable cards