mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-07 01:58:50 +01:00
sidebar -> baSidebar
This commit is contained in:
nixa
parent
fd8f21aaff
commit
b534eafbd0
6 changed files with 31 additions and 33 deletions
110
src/app/theme/components/baSidebar/baSidebar.component.ts
Normal file
110
src/app/theme/components/baSidebar/baSidebar.component.ts
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
|
||||
import {Router} from '@angular/router-deprecated';
|
||||
|
||||
import {AppState} from '../../../app.state';
|
||||
import {layoutSizes} from '../../../theme';
|
||||
import {BaSidebarService} from './baSidebar.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-sidebar',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./sidebar.scss')],
|
||||
template: require('./sidebar.html'),
|
||||
providers: [BaSidebarService]
|
||||
})
|
||||
export class BaSidebar {
|
||||
|
||||
public menuItems:Array<any>;
|
||||
public menuHeight:number;
|
||||
public isMenuCollapsed:boolean;
|
||||
|
||||
public showHoverElem:boolean;
|
||||
public hoverElemHeight:number;
|
||||
public hoverElemTop:number;
|
||||
|
||||
public outOfArea:number = -200;
|
||||
|
||||
public isMenuShouldCollapsed:boolean = false;
|
||||
|
||||
constructor(private _elementRef:ElementRef,
|
||||
private _router:Router,
|
||||
private _sidebarService:BaSidebarService,
|
||||
private _state:AppState) {
|
||||
|
||||
this.menuItems = this._sidebarService.getMenuItems();
|
||||
this._router.root.subscribe((path) => this._selectMenuItem(path));
|
||||
}
|
||||
|
||||
public ngOnInit():void {
|
||||
if (this._shouldMenuCollapse()) {
|
||||
this.menuCollapse();
|
||||
}
|
||||
}
|
||||
|
||||
public ngAfterViewInit():void {
|
||||
this.updateSidebarHeight();
|
||||
}
|
||||
|
||||
@HostListener('window:resize')
|
||||
public onWindowResize():void {
|
||||
|
||||
var isMenuShouldCollapsed = this._shouldMenuCollapse();
|
||||
|
||||
if (this.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
|
||||
this.menuCollapseStateChange(isMenuShouldCollapsed);
|
||||
}
|
||||
this.isMenuShouldCollapsed = isMenuShouldCollapsed;
|
||||
this.updateSidebarHeight();
|
||||
}
|
||||
|
||||
public menuExpand():void {
|
||||
this.menuCollapseStateChange(false);
|
||||
}
|
||||
|
||||
public menuCollapse():void {
|
||||
this.menuCollapseStateChange(true);
|
||||
}
|
||||
|
||||
public menuCollapseStateChange(isCollapsed):void {
|
||||
this.isMenuCollapsed = isCollapsed;
|
||||
this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
|
||||
}
|
||||
|
||||
public hoverItem($event):void {
|
||||
this.showHoverElem = true;
|
||||
this.hoverElemHeight = $event.currentTarget.clientHeight;
|
||||
// TODO: get rid of magic 66 constant
|
||||
this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
|
||||
}
|
||||
|
||||
public updateSidebarHeight():void {
|
||||
// TODO: get rid of magic 84 constant
|
||||
this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
|
||||
}
|
||||
|
||||
public toggleSubMenu($event, item):boolean {
|
||||
var submenu = $($event.currentTarget).next();
|
||||
|
||||
if (this.isMenuCollapsed) {
|
||||
this.menuExpand();
|
||||
if (!item.expanded) {
|
||||
item.expanded = !item.expanded;
|
||||
submenu.slideToggle();
|
||||
}
|
||||
} else {
|
||||
item.expanded = !item.expanded;
|
||||
submenu.slideToggle();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private _shouldMenuCollapse():boolean {
|
||||
return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
|
||||
}
|
||||
|
||||
private _selectMenuItem(currentPath = null):void {
|
||||
|
||||
let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems, currentPath);
|
||||
this._state.notifyDataChanged('menu.activeLink', currentMenu);
|
||||
}
|
||||
}
|
||||
45
src/app/theme/components/baSidebar/baSidebar.html
Normal file
45
src/app/theme/components/baSidebar/baSidebar.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
|
||||
<ul class="al-sidebar-list">
|
||||
<li *ngFor="let item of menuItems" class="al-sidebar-list-item"
|
||||
[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">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
</a>
|
||||
|
||||
<a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)"
|
||||
class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
<b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
|
||||
*ngIf="item.subMenu"></b>
|
||||
</a>
|
||||
|
||||
<ul *ngIf="item.subMenu" class="al-sidebar-sublist"
|
||||
[ngClass]="{'slide-right': item.slideRight}">
|
||||
<li *ngFor="let subitem of item.subMenu" class="ba-sidebar-sublist-item"
|
||||
[ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
|
||||
<a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
|
||||
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
|
||||
<b class="fa" *ngIf="subitem.subMenu"
|
||||
[ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
|
||||
</a>
|
||||
<ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
|
||||
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
|
||||
<li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
|
||||
[ngClass]="{selected: subitem.selected}">
|
||||
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[item.component, subitem.component, subSubitem.component]">
|
||||
{{ subSubitem.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a *ngIf="!subitem.subMenu" [routerLink]="[item.component, subitem.component]"
|
||||
(mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
|
||||
{{ subitem.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
|
||||
[ngClass]="{'show-hover-elem': showHoverElem }"></div>
|
||||
</aside>
|
||||
290
src/app/theme/components/baSidebar/baSidebar.scss
Normal file
290
src/app/theme/components/baSidebar/baSidebar.scss
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
@import '../../sass/conf/conf';
|
||||
|
||||
$sidebar-width: 180px;
|
||||
$angle-left: "\f100";
|
||||
$angle-right: "\f101";
|
||||
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
top: $top-height;
|
||||
left: 0;
|
||||
z-index: 904;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
background-color: $sidebar;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.al-sidebar-list {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 18px 0 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist .subitem-submenu-list {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.subitem-submenu-link {
|
||||
.fa {
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-list-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: none;
|
||||
padding: 0;
|
||||
&.selected:not(.with-sub-menu) {
|
||||
background-color: $primary;
|
||||
a.al-sidebar-list-link {
|
||||
color: $sidebar-text;
|
||||
b {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-list-item, .ba-sidebar-sublist-item {
|
||||
&.ba-sidebar-item-expanded {
|
||||
> .al-sidebar-list-link {
|
||||
b {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .al-sidebar-sublist {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.al-sidebar-list-link {
|
||||
display: block;
|
||||
height: 42px;
|
||||
padding-left: 18px;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
line-height: 42px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
b {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
i {
|
||||
margin-right: 18px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
b {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
text-shadow: none;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: $sidebar-text;
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.slimScrollBar, .slimScrollRail {
|
||||
border-radius: 0px !important;
|
||||
width: 4px !important;
|
||||
left: 176px;
|
||||
}
|
||||
|
||||
@mixin layout-collapsed() {
|
||||
.al-main {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.al-footer {
|
||||
padding-left: 83px
|
||||
}
|
||||
}
|
||||
|
||||
@mixin default-sublist() {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: none;
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
> li {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
a {
|
||||
display: block;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
padding-left: 52px;
|
||||
height: auto;
|
||||
line-height: 29px;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&.selected:not(.with-sub-menu) > a {
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
&:hover {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
}
|
||||
|
||||
.sidebar-hover-elem{
|
||||
width: 4px;
|
||||
background: $primary;
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 176px;
|
||||
transition: all 0.5s ease;
|
||||
transition-property: top, height;
|
||||
height: 42px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-select-elem {
|
||||
display: block;
|
||||
top: 94px;
|
||||
}
|
||||
|
||||
@mixin sidebar-collapsed() {
|
||||
.al-sidebar {
|
||||
width: 52px;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 52px;
|
||||
@include bg-translucent-dark(0.8);
|
||||
width: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transition: width 0.5s ease;
|
||||
&.slide-right {
|
||||
width: 135px;
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
min-width: 130px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-hidden() {
|
||||
.al-sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-overlap() {
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
@include bg-translucent-dark(0.75);
|
||||
transition: width 0.5s ease;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
top: auto;
|
||||
left: auto;
|
||||
background: none;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: $sidebar-width - 4;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.menu-collapsed {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $resXS + 1) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (min-width: $resXS) {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@include sidebar-overlap();
|
||||
}
|
||||
|
||||
@media (max-width: $resXS) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-hidden();
|
||||
}
|
||||
.al-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
.al-footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
62
src/app/theme/components/baSidebar/baSidebar.service.ts
Normal file
62
src/app/theme/components/baSidebar/baSidebar.service.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {menuItems} from '../../../app.menu';
|
||||
|
||||
@Injectable()
|
||||
export class BaSidebarService {
|
||||
|
||||
private _router;
|
||||
|
||||
public getMenuItems():Array<Object> {
|
||||
return menuItems;
|
||||
}
|
||||
|
||||
public setRouter(router): BaSidebarService {
|
||||
this._router = router;
|
||||
return this;
|
||||
}
|
||||
|
||||
public selectMenuItem(items:Array<any>, currentPath:string) {
|
||||
let currentMenu;
|
||||
|
||||
let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
|
||||
|
||||
items.forEach((menu: any) => {
|
||||
|
||||
this._selectItem(currentPath, [menu.component], menu);
|
||||
assignCurrent(menu);
|
||||
|
||||
if (menu.subMenu) {
|
||||
menu.subMenu.forEach((subMenu) => {
|
||||
this._selectItem(currentPath, [menu.component, subMenu.component], subMenu, menu);
|
||||
assignCurrent(subMenu);
|
||||
});
|
||||
}
|
||||
});
|
||||
return currentMenu;
|
||||
}
|
||||
|
||||
private _selectItem(currentPath, instructions, item, parentMenu = null) {
|
||||
let route = this._generateRoute(instructions);
|
||||
item.selected = !item.disabled && this._isCurrent(route) && this._resolvePath(route, '') == currentPath;
|
||||
if (parentMenu) {
|
||||
parentMenu.expanded = parentMenu.expanded || item.selected;
|
||||
}
|
||||
}
|
||||
|
||||
private _isCurrent(route) {
|
||||
return route ? this._router.isRouteActive(route) : false;
|
||||
}
|
||||
|
||||
private _generateRoute(instructions) {
|
||||
return instructions.filter(i => typeof i !== 'undefined').length > 0 ? this._router.generate(instructions) : null;
|
||||
}
|
||||
|
||||
private _resolvePath(instruction, collected) {
|
||||
if (instruction !== null) {
|
||||
collected += instruction.urlPath + '/';
|
||||
return this._resolvePath(instruction.child, collected)
|
||||
} else {
|
||||
return collected.slice(0, -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/app/theme/components/baSidebar/index.ts
Normal file
1
src/app/theme/components/baSidebar/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './sidebar.component.ts';
|
||||
Loading…
Add table
Add a link
Reference in a new issue