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..f18df58e5 100644 --- a/src/lib/css/layout.scss +++ b/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-"] { 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..625b7be59 100644 --- a/src/lib/layout/main.component.ts +++ b/src/lib/layout/main.component.ts @@ -1,4 +1,5 @@ -import { Component, Input, ElementRef, AfterViewInit, HostListener, Renderer2, ViewChild } from '@angular/core'; +import { Component, Input, ElementRef, AfterViewInit, HostListener, Renderer2, ViewChild, ContentChildren, QueryList } from '@angular/core'; +import { PlexMininavComponent } from './../mininav/mininav.component'; @Component({ selector: 'plex-layout-main', @@ -6,22 +7,24 @@ import { Component, Input, ElementRef, AfterViewInit, HostListener, Renderer2, V
-
- -
+
+ +
+
`, }) export class PlexLayoutMainComponent implements AfterViewInit { @ViewChild('content', { read: ElementRef, static: false }) content: ElementRef; + @ContentChildren(PlexMininavComponent) mininav: QueryList; @Input() type = ''; - constructor(private render: Renderer2) { - } + constructor(private render: Renderer2) { } ngAfterViewInit() { this.checkScroll(); + this.checkMininav(); } checkScroll() { @@ -37,4 +40,10 @@ export class PlexLayoutMainComponent implements AfterViewInit { this.checkScroll(); } + // detecta mininav y modica display a 'grid' + checkMininav() { + if (this.mininav.length > 0) { + this.render.addClass(this.content.nativeElement, 'mininav'); + } + } } diff --git a/src/lib/layout/sidebar.component.ts b/src/lib/layout/sidebar.component.ts index 7055935f7..4dcf4deb7 100644 --- a/src/lib/layout/sidebar.component.ts +++ b/src/lib/layout/sidebar.component.ts @@ -1,5 +1,5 @@ import { Component, Input, ElementRef, HostListener, OnInit, AfterViewInit, ViewChild, Renderer2, ContentChildren, QueryList, ChangeDetectorRef } from '@angular/core'; -import { PlexListComponent } from '../item-list/list.component'; +import { PlexMininavComponent } from './../mininav/mininav.component'; @Component({ selector: 'plex-layout-sidebar', @@ -8,13 +8,16 @@ import { PlexListComponent } from '../item-list/list.component';
- + +
`, }) export class PlexLayoutSidebarComponent implements OnInit, AfterViewInit { @ViewChild('content', { read: ElementRef, static: false }) content: ElementRef; + @ContentChildren(PlexMininavComponent) mininav: QueryList; + @Input() type = ''; constructor(private render: Renderer2, private ref: ChangeDetectorRef) { @@ -22,11 +25,11 @@ export class PlexLayoutSidebarComponent implements OnInit, AfterViewInit { ngOnInit() { this.checkScroll(); - } ngAfterViewInit(): void { this.ref.detectChanges(); + this.checkMininav(); } checkScroll() { @@ -42,4 +45,11 @@ export class PlexLayoutSidebarComponent implements OnInit, AfterViewInit { onResize() { this.checkScroll(); } + + // detecta mininav y modica display a 'grid' + checkMininav() { + if (this.mininav.length > 0) { + this.render.addClass(this.content.nativeElement, 'mininav'); + } + } } 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..75c7bb5a0 --- /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]', // tslint:disable-line + 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";