feat(plex-mininav): componente de navegación

src/demo/app/app.component.ts

@@ -43,6 +43,7 @@ export class AppComponent implements OnInit {
             { label: 'Wrapper', icon: 'view-quilt', route: '/wrapper' },
             { label: 'Grid', icon: 'view-grid', route: '/grid' },
             { label: 'Slider', icon: 'interaccion', route: '/slider' },
+            { label: 'Mininav', icon: 'compare', route: '/mininav' },
             { divider: true, },
             { label: 'Directivas', icon: 'sign-direction', route: 'directives' },
             { label: 'Directiva Align', icon: 'vector-difference', route: '/directives/listado-sidebar/align' },

src/demo/app/app.module.ts

@@ -48,6 +48,7 @@ import { WrapperDemoComponent } from './wrapper/wrapper.component';
 import { GridDemoComponent } from './grid/grid.component';
 import { CardDemoComponent } from './card/card.component';
 import { SliderDemoComponent } from './slider/slider.component';
+import { MininavDemoComponent } from './mininav/mininav.component';
 
 // Template
 import { ListadoSidebarComponent } from './templates/listado-sidebar/listado-sidebar';
@@ -119,6 +120,7 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         GridDemoComponent,
         CardDemoComponent,
         SliderDemoComponent,
+        MininavDemoComponent,
         ListadoSidebarComponent,
         SidebarDetalleComponent,
         MainListadoComponent,

src/demo/app/app.routes.ts

@@ -47,6 +47,7 @@ import { AlignDemoComponent } from './directives/componentes/align/align.compone
 import { InternacionComponent } from './templates/modulos/internacion/internacion';
 import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
 import { SliderDemoComponent } from './slider/slider.component';
+import { MininavDemoComponent } from './mininav/mininav.component';
 
 const appRoutes: Routes = [
     { path: 'inicio', component: HomeDemoComponent },
@@ -82,6 +83,7 @@ const appRoutes: Routes = [
     { path: 'grid', component: GridDemoComponent },
     { path: 'card', component: CardDemoComponent },
     { path: 'slider', component: SliderDemoComponent },
+    { path: 'mininav', component: MininavDemoComponent },
     { path: 'templates', component: TemplateInicioComponent },
     { path: 'templates/form', component: TemplateFormComponent },
     { path: 'templates/form-sidebar', component: TemplateBotoneraSidebarComponent },

src/demo/app/mininav/mininav.component.ts

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './mininav.html'
+})
+export class MininavDemoComponent {
+
+
+    menu = [
+        {
+            nombre: 'accordion',
+            icono: 'view-day',
+            link: 'accordion'
+        },
+        {
+            nombre: 'card',
+            icono: 'card-account-details',
+            link: 'card'
+        },
+        {
+            nombre: 'detail',
+            icono: 'account',
+            link: 'detail'
+        },
+        {
+            nombre: 'templates',
+            icono: 'view-grid',
+            link: 'templates'
+        },
+        {
+            nombre: 'wrapper',
+            icono: 'view-quilt',
+            link: 'wrapper'
+        },
+        {
+            nombre: 'grid',
+            icono: 'view-grid',
+            link: 'grid'
+        },
+        {
+            nombre: 'slider',
+            icono: 'interaccion',
+            link: 'slider'
+        },
+    ];
+
+    anchors = [
+        {
+            nombre: 'mi huds',
+            icono: 'paciente',
+            target: 'miHuds'
+        },
+        {
+            nombre: 'mis consultas',
+            icono: 'medico',
+            target: 'misConsultas'
+        },
+        {
+            nombre: 'mis documentos',
+            icono: 'documento',
+            target: 'misDocumentos'
+        },
+    ];
+}

src/demo/app/mininav/mininav.html

@@ -0,0 +1,149 @@
+<plex-layout main="6" resizable="true" [min]="2" [max]="6" [steps]="2">
+    <plex-layout-main>
+        <plex-title main titulo="atributo links"></plex-title>
+
+        <!-- Mininav -->
+        <plex-mininav color="#EA1E79">
+            <ul sup>
+                <li plex-mininav-item *ngFor="let item of menu" titulo="{{ item.nombre }}" link="{{ item.link }}"
+                    icono="{{ item.icono }}">
+                </li>
+            </ul>
+            <ul inf>
+                <li plex-mininav-item titulo="Navegar por ruteo" link="templates" icono="logo-twitter">
+                </li>
+            </ul>
+        </plex-mininav>
+        <section>
+            <plex-title size="sm" titulo="plex-mininav"></plex-title>
+            <h5 class="mt-4">
+                <b>Es un recurso de navegación con doble función:</b>
+                <ul class="mt-2">
+                    <li>Agrupar/secuenciar información extensa en espacios reducidos a partir de la navegación entre
+                        anclas
+                        (anchors).</li><br>
+                    <li>Navegación de las diferentes secciones de un módulo (submódulos) a partir de ruteos.</li>
+                </ul>
+            </h5>
+        </section>
+    </plex-layout-main>
+    <plex-layout-sidebar type="invert">
+
+        <plex-title titulo="atributo target (anchors)" main>
+            <plex-button type="danger" icon="close" size="sm"></plex-button>
+        </plex-title>
+
+        <plex-mininav>
+            <ul sup>
+                <li plex-mininav-item *ngFor="let item of anchors" target="{{ item.target }}" titulo="{{ item.nombre }}"
+                    icono="{{ item.icono }}">
+                </li>
+            </ul>
+            <ul inf>
+                <li plex-mininav-item titulo="" link="accordion" titulo="Navegar por ruteo" icono="logo-youtube">
+                </li>
+            </ul>
+        </plex-mininav>
+        <div>
+            <plex-title anchor="miHuds" size="sm" titulo="mi huds"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title size="sm" titulo="subtitulo 2"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title size="sm" titulo="subtitulo 1"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title size="sm" titulo="subtitulo 2"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title anchor="misConsultas" size="sm" titulo="mis consultas"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title size="sm" titulo="subtitulo 3"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title size="sm" titulo="subtitulo 4"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title size="sm" titulo="subtitulo 5"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+            <plex-title anchor="misDocumentos" size="sm" titulo="mis documentos"></plex-title>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+                Lorem
+                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
+        </div>
+    </plex-layout-sidebar>
+</plex-layout>

src/lib/css/layout.scss

@@ -66,6 +66,45 @@ plex-layout {
         }
     }
 
+        // mininav
+        plex-layout-main {
+            div.plex-box-content.mininav {
+                display: grid;
+                grid-template-columns: auto 1fr;
+                grid-template-rows: min-content 1fr;
+
+                > plex-mininav {
+                    grid-column: 1;
+                    grid-row: 2 / -1;
+                    margin-right: .5rem;
+                }
+
+                *:not(plex-mininav) {
+                    grid-column: 2;
+                    grid-row: 1 / -1;
+                }
+            }
+        }
+
+        plex-layout-sidebar {        
+            div.plex-box-content.mininav {
+                display: grid;
+                grid-template-columns: auto 1fr;
+                grid-template-rows: min-content 1fr;
+
+                > plex-mininav {
+                    grid-column: 1;
+                    grid-row: 2 / -1;
+                    margin-right: .5rem;
+                }
+
+                *:not(plex-mininav) {
+                    grid-column: 2;
+                    grid-row: 1 / -1;
+                }
+            }
+        }
+
     &[resizable="true"] > section {
         > div.row {
             > div[class*="col-"] {