1. Input: Change default class to flat. 2. Monify icon in sidebar-mobile-toggle. 3. Align mobile sidebar items base on main menu.
This commit is contained in:
parent
259182b7c4
commit
d2543181e7
|
@ -5,10 +5,14 @@
|
|||
</aside>
|
||||
<div class="uk-hidden@m">
|
||||
<div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
|
||||
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
|
||||
<button class="uk-offcanvas-close uk-icon uk-close">
|
||||
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
|
||||
</button>
|
||||
<div class="uk-offcanvas-bar uk-padding-remove">
|
||||
<nav class="uk-navbar uk-background-default" uk-sticky>
|
||||
<div class="uk-navbar-right">
|
||||
<button class="uk-navbar-toggle uk-icon uk-close" (click)="closeOffcanvas()">
|
||||
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<ng-container *ngTemplateOutlet="menu; context: {mobile: true}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -25,7 +29,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
|
||||
<ul #nav class="uk-list uk-nav uk-nav-parent-icon"
|
||||
<ul #nav class="uk-list uk-nav uk-nav-parent-icon" [class.uk-list-large]="mobile"
|
||||
[class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
|
||||
<ng-template ngFor [ngForOf]="items" let-item>
|
||||
<li [class.uk-active]="item.isActive"
|
||||
|
|
|
@ -5,16 +5,16 @@ import {Subscription} from "rxjs";
|
|||
@Component({
|
||||
selector: 'sidebar-mobile-toggle',
|
||||
template: `
|
||||
<a *ngIf="activeSidebarItem" href="#sidebar_offcanvas" class="sidebar_mobile_toggle uk-link-reset uk-width-2-3 uk-flex uk-flex-middle" uk-toggle>
|
||||
<a *ngIf="activeSidebarItem" href="#sidebar_offcanvas" class="sidebar_mobile_toggle uk-link-reset uk-width-3-5 uk-flex uk-flex-middle" uk-toggle>
|
||||
<div *ngIf="activeSidebarItem.icon && (activeSidebarItem.icon.svg || activeSidebarItem.icon.name)" class="uk-width-auto">
|
||||
<icon class="menu-icon" [customClass]="activeSidebarItem.icon.class" [name]="activeSidebarItem.icon.name" ratio="0.9" [svg]="activeSidebarItem.icon.svg" [flex]="true"></icon>
|
||||
<icon class="menu-icon" [customClass]="activeSidebarItem.icon.class" [name]="activeSidebarItem.icon.name" ratio="0.8" [svg]="activeSidebarItem.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-width-expand uk-text-truncate uk-margin-small-left uk-text-bolder">
|
||||
{{activeSidebarItem.name}}
|
||||
<span *ngIf="activeSidebarItem.subItem">- {{activeSidebarItem.subItem.name}}</span>
|
||||
</span>
|
||||
<div class="uk-width-auto uk-margin-small-left">
|
||||
<icon name="arrow_drop_down" ratio="1.5" [flex]="true"></icon>
|
||||
<icon name="arrow_right" ratio="1.4" [flex]="true"></icon>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
|
|
|
@ -219,7 +219,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
public searchControl: UntypedFormControl;
|
||||
public activeElement: BehaviorSubject<ElementRef> = new BehaviorSubject<ElementRef>(null);
|
||||
/** Use modifier's class(es) to change view of your Input */
|
||||
@Input() inputClass: string = 'inner';
|
||||
@Input() inputClass: string = 'flat';
|
||||
/** Icon on the input */
|
||||
@Input() icon: string = null;
|
||||
/** Chip options */
|
||||
|
|
Loading…
Reference in New Issue