Skip to content

Commit b08ddcf

Browse files
author
黄大超
committed
完善左侧菜单
1 parent af96019 commit b08ddcf

File tree

7 files changed

+133
-18
lines changed

7 files changed

+133
-18
lines changed

‎src/app/component/main/main.component.html‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -88,30 +88,78 @@
8888
<nav class="nav-aside bg-black" [class.folded]="app.settings.asideFolded">
8989
<ul class="nav">
9090
<li class="hidden-folded text-muted small">
91-
<span>Navigation</span>
91+
<span>Dashboard</span>
9292
</li>
93-
<li toggleClass="active">
94-
<span class="nav-item">
93+
<li focusClass="focus" routerLinkActive="active">
94+
<span class="nav-item" toggleClass="active">
9595
<span class="pull-right text-muted hidden-folded">
9696
<i class="fa fa-fw fa-angle-right icon-collapsed"></i>
9797
<i class="fa fa-fw fa-angle-down icon-expanded"></i>
9898
</span>
99-
<i class="fa fa-th"></i>
100-
<span class="hidden-folded">Dashboard</span>
99+
<i class="fa fa-truck text-primary"></i><span class="hidden-folded">车辆管理</span>
101100
</span>
102101
<ul class="nav nav-sub">
103-
<li ui-sref-active="active">
104-
<a ui-sref="app.dashboard-v1">
102+
<li>
103+
<a routerLink="/no-content">
105104
<span>Dashboard v1</span>
106105
</a>
107106
</li>
108-
<li ui-sref-active="active">
107+
<li>
109108
<a ui-sref="app.dashboard-v2">
110109
<span>Dashboard v2</span>
111110
</a>
112111
</li>
113112
</ul>
114113
</li>
114+
<li focusClass="focus">
115+
<span class="nav-item" toggleclass="active">
116+
<i class="fa fa-users text-success"></i><span class="hidden-folded">司机管理</span>
117+
</span>
118+
</li>
119+
<li focusClass="focus">
120+
<span class="nav-item" toggleclass="active">
121+
<i class="fa fa-address-card-o text-info"></i><span class="hidden-folded">信息部管理</span>
122+
</span>
123+
</li>
124+
<li class="separator"></li>
125+
<li class="hidden-folded text-muted small">
126+
<span>Management</span>
127+
</li>
128+
<li focusClass="focus" routerLinkActive="active">
129+
<span class="nav-item" toggleClass="active">
130+
<span class="pull-right text-muted hidden-folded">
131+
<i class="fa fa-fw fa-angle-right icon-collapsed"></i>
132+
<i class="fa fa-fw fa-angle-down icon-expanded"></i>
133+
</span>
134+
<i class="fa fa-sitemap text-warning"></i><span class="hidden-folded">部门管理</span>
135+
</span>
136+
<ul class="nav nav-sub">
137+
<li>
138+
<a routerLink="/home">
139+
<span>Dashboard v1</span>
140+
</a>
141+
</li>
142+
<li>
143+
<a ui-sref="app.dashboard-v2">
144+
<span>Dashboard v2</span>
145+
</a>
146+
</li>
147+
</ul>
148+
</li>
149+
<li focusClass="focus">
150+
<span class="nav-item" toggleclass="active">
151+
<i class="fa fa-address-book-o text-danger"></i><span class="hidden-folded">员工管理</span>
152+
</span>
153+
</li>
154+
<li class="separator"></li>
155+
<li class="hidden-folded text-muted small">
156+
<span>About me</span>
157+
</li>
158+
<li focusClass="focus">
159+
<span class="nav-item" toggleclass="active">
160+
<i class="fa fa-user-o text-primary"></i><span class="hidden-folded">我的帐户</span>
161+
</span>
162+
</li>
115163
</ul>
116164
</nav>
117165

‎src/app/component/main/main.component.scss‎

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -183,14 +183,18 @@
183183
bottom: 0;
184184
left: 0;
185185
z-index: 1000;
186-
overflow: hidden;
186+
font-size: 14px;
187187
&.folded {
188188
width: $aside-folded-width;
189189
}
190190

191+
li {
192+
position: relative;
193+
}
194+
191195
> ul.nav {
192196
> li {
193-
padding: 0 10px;
197+
padding: 0 5px;
194198
line-height: $app-aside-nav-height;
195199
> .nav-item {
196200
display: block;
@@ -199,15 +203,24 @@
199203
> i {
200204
width: $app-aside-nav-height;
201205
text-align: center;
206+
font-size: 18px;
202207
}
203208
.icon-expanded {
204209
display: none;
205210
}
206211
}
207212
}
208-
> li.active {
209-
background-color: #131e26;
210-
.nav-sub {
213+
> li.separator {
214+
height: 2px;
215+
margin: 5px 0;
216+
background: $bg-black-dk;
217+
}
218+
> li.active .nav-item, > li > .nav-item:hover {
219+
background: $bg-black-dk;
220+
}
221+
> li > .nav-item.active {
222+
background-color: $bg-black-dk;
223+
& + .nav-sub {
211224
opacity: 1;
212225
margin-left: 0;
213226
height: auto !important;
@@ -222,12 +235,35 @@
222235
}
223236
}
224237

225-
&.folded {
238+
&.folded {
226239
.hidden-folded, .nav-sub {
227240
display: none;
228241
}
229242
> ul > li {
230243
line-height: $app-aside-folded-nav-height;
244+
245+
.nav-item .fa {
246+
width: 50px;
247+
}
248+
}
249+
250+
li.focus {
251+
background-color: $bg-black-dk;
252+
> ul {
253+
display: block !important;
254+
position: absolute;
255+
left: $aside-folded-width;
256+
top: 0;
257+
z-index: 2000;
258+
opacity: 1;
259+
margin-left: 0;
260+
height: auto !important;
261+
overflow: auto;
262+
> li > a {
263+
padding: 0 20px;
264+
display: inline-block;
265+
}
266+
}
231267
}
232268
}
233269
}
@@ -237,9 +273,11 @@
237273
margin-left: -20px;
238274
overflow: hidden;
239275
opacity: 0;
276+
background-color: $bg-black-dk;
240277
transition: all 0.2s ease-in-out 0s;
241278

242279
a {
243-
padding-left: $app-aside-nav-height + 15px;
280+
padding-left: $app-aside-nav-height;
281+
white-space: nowrap;
244282
}
245283
}

‎src/app/component/main/main.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {Component, ViewEncapsulation} from '@angular/core';
2+
import AST_Node = UglifyJS.AST_Node;
23

34
@Component({
45
moduleId : module.id,
@@ -33,6 +34,9 @@ export class MainComponent {
3334
container : false
3435
}
3536
};
37+
activeItem: string;
3638

37-
39+
toggleActiveItem(item: string) {
40+
this.activeItem = item;
41+
}
3842
}

‎src/app/directive/focus-class.directive.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Directive, ElementRef, Input, Renderer, HostListener } from '@angular/core';
2+
3+
@Directive({
4+
selector: '[focusClass]'
5+
})
6+
export class FocusClassDirective {
7+
@Input() focusClass: string;
8+
9+
constructor(private element: ElementRef, private renderer: Renderer) {
10+
}
11+
12+
@HostListener("mouseenter") onMouseenter() {
13+
this.renderer.setElementClass(this.element.nativeElement, this.focusClass, true);
14+
}
15+
16+
@HostListener("mouseleave") onMouseleave() {
17+
this.renderer.setElementClass(this.element.nativeElement, this.focusClass, false);
18+
}
19+
20+
}

‎src/app/directive/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { NgModule } from "@angular/core";
22
import { ToggleClassDirective } from './toggle-class.directive';
3+
import { FocusClassDirective } from './focus-class.directive';
34

45
const DIRECTIVE_MODULES = [
56
ToggleClassDirective,
7+
FocusClassDirective,
68
];
79
@NgModule({
810
declarations: DIRECTIVE_MODULES,

‎src/assets/style/_variables.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,7 @@ $aside-folded-width: 60px !default;
2727

2828
//== Aside Menu
2929
$app-aside-nav-height: 40px !default;
30-
$app-aside-folded-nav-height: 50px !default;
30+
$app-aside-folded-nav-height: 50px !default;
31+
32+
$bg-black: #1c2b36 !default;
33+
$bg-black-dk: #131e26 !default;

‎src/assets/style/app.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ body {
3131

3232
.bg-black {
3333
color: #7793a7;
34-
background-color: #1c2b36;
34+
background-color: $bg-black;
3535
}
3636

3737
.badge {

0 commit comments

Comments
 (0)