Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 16:30:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

sidebar menu fixes

Browse source
This commit is contained in:
nixa 2016-05-18 15:02:23 +03:00
parent 2603b8a9d0
commit 612071b97c
4 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/theme/components/pageTop/pageTop.component.ts
View file

@ -14,11 +14,14 @@ import {ScrollPosition} from '../../directives';
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class PageTop { export class PageTop {
isScrolled:Boolean = false; isScrolled:Boolean = false;
isMenuCollapsed:boolean = false; isMenuCollapsed:boolean = false;
constructor(private _state:AppState) { constructor(private _state:AppState) {
this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
this.isMenuCollapsed = isCollapsed;
});
} }
toggleMenu() { toggleMenu() {

16
src/app/theme/components/sidebar/sidebar.component.ts
View file

@ -37,14 +37,20 @@ export class Sidebar {
this._router.root.subscribe((path) => this._selectMenuItem(path)); this._router.root.subscribe((path) => this._selectMenuItem(path));
} }
ngOnInit() {
if (this._shouldMenuCollapse()) {
this.menuCollapse();
}
}
ngAfterViewInit() { ngAfterViewInit() {
this.updateSidebarHeight(); this.updateSidebarHeight();
} }
@HostListener('window:resize', ['$event']) @HostListener('window:resize')
onWindowResize($event) { onWindowResize() {
var isMenuShouldCollapsed = $event.target.innerWidth <= layoutSizes.resWidthCollapseSidebar; var isMenuShouldCollapsed = this._shouldMenuCollapse();
if (this.isMenuShouldCollapsed !== isMenuShouldCollapsed) { if (this.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
this.menuCollapseStateChange(isMenuShouldCollapsed); this.menuCollapseStateChange(isMenuShouldCollapsed);
@ -94,6 +100,10 @@ export class Sidebar {
return false; return false;
} }
private _shouldMenuCollapse() {
return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
}
private _selectMenuItem(currentPath = null) { private _selectMenuItem(currentPath = null) {
let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems, currentPath); let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems, currentPath);

6
src/app/theme/components/sidebar/sidebar.html
View file

@ -1,7 +1,7 @@
<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize> <aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
<ul class="al-sidebar-list"> <ul class="al-sidebar-list">
<li *ngFor="let item of menuItems" class="al-sidebar-list-item" <li *ngFor="let item of menuItems" class="al-sidebar-list-item"
[ngClass]="{'selected': item.selected, 'with-sub-menu': item.subMenu}"> [ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
<a *ngIf="!item.subMenu" [routerLink]="[item.component]" class="al-sidebar-list-link"> <a *ngIf="!item.subMenu" [routerLink]="[item.component]" class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span> <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
@ -15,8 +15,8 @@
</a> </a>
<ul *ngIf="item.subMenu" class="al-sidebar-sublist" <ul *ngIf="item.subMenu" class="al-sidebar-sublist"
[ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}"> [ngClass]="{'slide-right': item.slideRight}">
<li *ngFor="let subitem of item.subMenu" <li *ngFor="let subitem of item.subMenu" class="ba-sidebar-sublist-item"
[ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}"> [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
<a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);" <a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span> class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>

1
src/app/theme/components/sidebar/sidebar.scss
View file

@ -18,6 +18,7 @@ $angle-right: "\f101";
.al-sidebar-list { .al-sidebar-list {
margin: 0; margin: 0;
overflow: hidden;
padding: 18px 0 0 0; padding: 18px 0 0 0;
list-style: none; list-style: none;
} }