From ea82b9590c88cf208fb60a82d0290fa95e75a4f9 Mon Sep 17 00:00:00 2001 From: Julio Santarelli Date: Wed, 13 Oct 2021 14:28:50 -0300 Subject: [PATCH] =?UTF-8?q?feat(plex-mininav):=20componente=20de=20navegac?= =?UTF-8?q?i=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/demo/app/app.component.ts | 1 + src/demo/app/app.module.ts | 2 + src/demo/app/app.routes.ts | 2 + src/demo/app/mininav/mininav.component.ts | 64 +++++++ src/demo/app/mininav/mininav.html | 149 ++++++++++++++++ src/lib/css/layout.scss | 42 +++++ src/lib/css/plex-mininav.scss | 168 ++++++++++++++++++ src/lib/layout/main.component.ts | 10 +- src/lib/layout/sidebar.component.ts | 5 +- .../mininav-item/mininav-item.component.html | 3 + .../mininav-item/mininav-item.component.ts | 40 +++++ src/lib/mininav/mininav.component.html | 12 ++ src/lib/mininav/mininav.component.ts | 47 +++++ src/lib/module.ts | 6 + src/lib/styles.scss | 1 + 15 files changed, 547 insertions(+), 5 deletions(-) create mode 100644 src/demo/app/mininav/mininav.component.ts create mode 100644 src/demo/app/mininav/mininav.html create mode 100644 src/lib/css/plex-mininav.scss create mode 100644 src/lib/mininav/mininav-item/mininav-item.component.html create mode 100644 src/lib/mininav/mininav-item/mininav-item.component.ts create mode 100644 src/lib/mininav/mininav.component.html create mode 100644 src/lib/mininav/mininav.component.ts diff --git a/src/demo/app/app.component.ts b/src/demo/app/app.component.ts index 4c42253ee..63da14396 100644 --- a/src/demo/app/app.component.ts +++ b/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' }, diff --git a/src/demo/app/app.module.ts b/src/demo/app/app.module.ts index b3164c320..d42ee854b 100644 --- a/src/demo/app/app.module.ts +++ b/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, diff --git a/src/demo/app/app.routes.ts b/src/demo/app/app.routes.ts index 2bf476946..838205801 100644 --- a/src/demo/app/app.routes.ts +++ b/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 }, diff --git a/src/demo/app/mininav/mininav.component.ts b/src/demo/app/mininav/mininav.component.ts new file mode 100644 index 000000000..67f1ae4cb --- /dev/null +++ b/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' + }, + ]; +} diff --git a/src/demo/app/mininav/mininav.html b/src/demo/app/mininav/mininav.html new file mode 100644 index 000000000..65c669bf7 --- /dev/null +++ b/src/demo/app/mininav/mininav.html @@ -0,0 +1,149 @@ + + + + + + +
    +
  • +
    • +
+
    +
  • +
    • +
+ +
+ +
+ Es un recurso de navegación con doble función: +
    +
  • Agrupar/secuenciar información extensa en espacios reducidos a partir de la navegación entre + anclas + (anchors).

    • +
  • Navegación de las diferentes secciones de un módulo (submódulos) a partir de ruteos.
    • +
+
+
+ + + + + + + + +
    +
  • +
    • +
+
    +
  • +
    • +
+ +
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+
+ + \ No newline at end of file diff --git a/src/lib/css/layout.scss b/src/lib/css/layout.scss index c9cc05e03..3b5b3e10d 100644 --- a/src/lib/css/layout.scss +++ b/src/lib/css/layout.scss @@ -66,6 +66,48 @@ plex-layout { } } + // mininav + plex-layout-main { + div.plex-box-content { + 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; + } + + div.plex-content { + grid-column: 2; + grid-row: 1 / -1; + padding-right: .5rem; + } + } + } + + + plex-layout-sidebar { + div.plex-box-content { + 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; + } + + div.plex-content { + grid-column: 2; + grid-row: 1 / -1; + padding-right: .5rem; + } + } + } + &[resizable="true"] > section { > div.row { > div[class*="col-"] { diff --git a/src/lib/css/plex-mininav.scss b/src/lib/css/plex-mininav.scss new file mode 100644 index 000000000..62a20b7b6 --- /dev/null +++ b/src/lib/css/plex-mininav.scss @@ -0,0 +1,168 @@ +@import './variables.scss'; +@import './mixins/_contrast.scss'; + +// Mixins estados +@mixin mininavItemHover { + &:hover, &.selected { + cursor: pointer; + //box-shadow: inset 0 0 0 2px var(--color-base)!important; + background-color: var(--color-baseDark)!important; + filter: brightness(0.85); + } +} + +plex-mininav { + + > section { + --mininavWidth: 55px; + --mininavHeight: 100vh; + --border-color: gray; + + display: flex; + flex-direction: column; + width: var(--mininavWidth); + height: var(--mininavHeight); + background-color: var(--nav-color); + transition: width 900ms ease; + border-right: solid 1px var(--border-color); + color: white; + + nav, ul { + display: flex; + flex-direction: column; + } + + & > nav { + --vHeight: 200px; + height: calc(100vh - var(--vHeight)); + position: fixed; + overflow-x: hidden; + + plex-label > div.plex-label > div > span { + opacity: 0; + white-space: pre; + } + } + + ul { + --color-base: var(--nav-color); + justify-content: space-between; + align-items: flex-start; + margin: 0; + padding: 0; + + background-color: var(--color-base); + + &[sup] { + justify-content: flex-start; + } + + &[inf] { + justify-content: flex-end; + } + + .plex-mininav-item { + + --color-base: var(--nav-color); + --color-baseDark: var(--nav-color); + + width: var(--mininavWidth); + padding: .5rem .5rem .5rem 0; + margin: 0; + list-style: none; + background-color: var(--nav-color)!important; + + @include mininavItemHover; + } + + } + + &.expanded { + --mininavWidth: 200px; + + width: var(--mininavWidth); + > nav { + overflow-x: visible; + plex-label > div.plex-label > div > span { + opacity: 1; + transition: opacity 900ms ease-in; + } + + > ul > plex-mininav-item > li { + width: var(--mininavWidth); + transition: width 900ms ease-in; + } + } + + .nav-resizable-btn-wrapper { + left: calc(var(--mininavWidth) + 16px); + } + } + + /* Botonera sidebar expandible */ + > .nav-resizable-btn-wrapper { + display: none; + flex-direction: row; + justify-content: center; + align-items: center; + position: absolute; + z-index: 1; + left: 71px; + top: calc(50vh - 5rem); + background: $light-grey; + box-shadow: 1px 1px 12px 3px $dark-grey; + width: 2.5rem; + height: 2.5rem; + border-top-right-radius: 25%; + border-bottom-right-radius: 25%; + transform: scale(.6); + cursor: col-resize!important; + opacity: .4; + + &.resizable { + display: flex!important; + transition: all 900ms ease; + } + + &:hover { + opacity: 1; + + hr.divisor { + height: 100vh; + transition: height 1s ease; + border: solid 2px $blue; + left: 0; + } + } + + hr.divisor { + height: 2.5rem; + position: absolute; + } + } + } +} + +plex-layout-sidebar { + plex-mininav { + > section { + --border-color: white; + border-right: solid 1px var(--border-color); + + &.expanded { + --expandedWidth: 200px; + + width: var(--expandedWidth); + overflow-x: visible; + + .nav-resizable-btn-wrapper { + left: var(--expandedWidth); + } + } + + > .nav-resizable-btn-wrapper { + left: 58px; + } + } + } +} \ No newline at end of file diff --git a/src/lib/layout/main.component.ts b/src/lib/layout/main.component.ts index 9d8b3f244..c17e06451 100644 --- a/src/lib/layout/main.component.ts +++ b/src/lib/layout/main.component.ts @@ -7,9 +7,12 @@ import { Component, Input, ElementRef, AfterViewInit, HostListener, Renderer2, V
- -
+ +
+ +
+ `, }) export class PlexLayoutMainComponent implements AfterViewInit { @@ -17,8 +20,7 @@ export class PlexLayoutMainComponent implements AfterViewInit { @Input() type = ''; - constructor(private render: Renderer2) { - } + constructor(private render: Renderer2) { } ngAfterViewInit() { this.checkScroll(); diff --git a/src/lib/layout/sidebar.component.ts b/src/lib/layout/sidebar.component.ts index 7055935f7..1cacf529c 100644 --- a/src/lib/layout/sidebar.component.ts +++ b/src/lib/layout/sidebar.component.ts @@ -8,7 +8,10 @@ import { PlexListComponent } from '../item-list/list.component';
- + +
+ +
`, diff --git a/src/lib/mininav/mininav-item/mininav-item.component.html b/src/lib/mininav/mininav-item/mininav-item.component.html new file mode 100644 index 000000000..e8f294346 --- /dev/null +++ b/src/lib/mininav/mininav-item/mininav-item.component.html @@ -0,0 +1,3 @@ +
  • + +
    • \ No newline at end of file diff --git a/src/lib/mininav/mininav-item/mininav-item.component.ts b/src/lib/mininav/mininav-item/mininav-item.component.ts new file mode 100644 index 000000000..b37254276 --- /dev/null +++ b/src/lib/mininav/mininav-item/mininav-item.component.ts @@ -0,0 +1,40 @@ +import { Component, HostBinding, HostListener, Input } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: '[plex-mininav-item]', + template: ` + + + `, +}) + +export class PlexMininavItemComponent { + @HostBinding('class.plex-mininav-item') estilos = true; + + @Input() titulo; + @Input() subtitulo; + @Input() size; + @Input() color; + @Input() icono; + @Input() target; + @Input() link; + @Input() selected = false; + + constructor( + private router: Router, + ) { } + + @HostListener('click') jumpToId() { + if (this.target) { + const element = document.querySelector('[anchor="' + this.target + '"]'); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + } + } + + if (this.link) { + this.router.navigate([this.link]); + } + } +} diff --git a/src/lib/mininav/mininav.component.html b/src/lib/mininav/mininav.component.html new file mode 100644 index 000000000..0a4d443e6 --- /dev/null +++ b/src/lib/mininav/mininav.component.html @@ -0,0 +1,12 @@ +
    + + +
    + \ No newline at end of file diff --git a/src/lib/mininav/mininav.component.ts b/src/lib/mininav/mininav.component.ts new file mode 100644 index 000000000..1fb870e3c --- /dev/null +++ b/src/lib/mininav/mininav.component.ts @@ -0,0 +1,47 @@ +import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'; + +@Component({ + selector: 'plex-mininav', + template: ` +
    +
    + +
    + + + + +
    + + +     +
    + `, +}) +export class PlexMininavComponent implements OnChanges { + + @Input() color: string; + @Input() vHeight; + @Input() resizable = true; + @Input() expanded: boolean; + @Input() mode: 'filled' | 'outlined' = 'filled'; + + @ViewChild('miniNav', { static: true }) miniNav: ElementRef; + + constructor() { } + + ngOnChanges() { + if (this.color && this.color.length > 0) { + this.miniNav.nativeElement.style.setProperty('--nav-color', this.color); + } + } + + // Resize + expandirMininav() { + this.expanded = !this.expanded; + } +} diff --git a/src/lib/module.ts b/src/lib/module.ts index 8110a1233..561ccf20b 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -61,6 +61,8 @@ import { PreviewDirective } from './visualizador/preview.directive'; import { ResponsiveDirective } from './directives/responsive.directive'; import { SpanDirective } from './directives/span.directive'; import { CaseDirective } from './directives/case.directive'; +import { PlexMininavComponent } from './mininav/mininav.component'; +import { PlexMininavItemComponent } from './mininav/mininav-item/mininav-item.component'; // Third party import { MatCheckboxModule } from '@angular/material/checkbox'; @@ -151,6 +153,8 @@ import { PlexVisualizadorService } from './core/plex-visualizador.service'; PlexTableSortPipe, PlexColumnDirective, PlexSliderComponent, + PlexMininavComponent, + PlexMininavItemComponent, // Directivas AlignDirective, @@ -229,6 +233,8 @@ import { PlexVisualizadorService } from './core/plex-visualizador.service'; PlexTableColumnsComponent, PlexTableSortPipe, PlexSliderComponent, + PlexMininavComponent, + PlexMininavItemComponent, // Directivas AlignDirective, diff --git a/src/lib/styles.scss b/src/lib/styles.scss index f63a4340b..0a3ffe9cf 100644 --- a/src/lib/styles.scss +++ b/src/lib/styles.scss @@ -111,3 +111,4 @@ $mdi-font-path: "~@mdi/font/fonts/"; @import "css/plex-grid"; @import "css/plex-table"; @import "css/plex-slider"; +@import "css/plex-mininav";