Pages UI
Search…
v5.0.1 - Pages Angular
Directives
Forms
Service
Sidebar
Pages Sidebar
Importing
First import it to your app module or any submodule as you wish
1
import { SidebarComponent } from './@pages/components/sidebar/sidebar.component';
2
import { SharedModule } from './@pages/components/shared.module';
3
@NgModule({
4
declarations : [SidebarComponent,...]
5
imports: [SharedModule,...]
6
})
7
export class AppModule(){}
Copied!
Example Menu
Use the appropriate regions and depends on pg-menu-items for showing the menu links
HTML
Typescript
1
<pg-sidebar>
2
<ng-template #sideBarOverlay>
3
<div class="row">
4
<div class="col-xs-6 no-padding">
5
<a href="javascript:void(0)" class="p-l-40"><img src="assets/img/demo/social_app.svg" alt="socail">
6
</a>
7
</div>
8
<div class="col-xs-6 no-padding">
9
<a href="javascript:void(0)" class="p-l-10"><img src="assets/img/demo/email_app.svg" alt="socail">
10
</a>
11
</div>
12
</div>
13
<div class="row">
14
<div class="col-xs-6 m-t-20 no-padding">
15
<a href="javascript:void(0)" class="p-l-40"><img src="assets/img/demo/calendar_app.svg" alt="socail">
16
</a>
17
</div>
18
<div class="col-xs-6 m-t-20 no-padding">
19
<a href="javascript:void(0)" class="p-l-10"><img src="assets/img/demo/add_more.svg" alt="socail">
20
</a>
21
</div>
22
</div>
23
</ng-template>
24
<ng-template #sideBarHeader>
25
<img src="assets/img/logo_white.png" alt="logo" class="brand" pgRetina src1x="assets/img/logo_white.png" src2x="assets/img/logo_white_2x.png" width="78" height="22">
26
<div class="sidebar-header-controls">
27
<button type="button" class="btn btn-xs sidebar-slide-toggle btn-link m-l-20 hidden-md-down" [class.active]="_menuDrawerOpen" (click)="toggleMenuDrawer()"><i class="fa fa-angle-down fs-16"></i>
28
</button>
29
<button type="button" class="btn btn-link hidden-md-down" data-toggle-pin="sidebar" (click)="toggleMenuPin()"><i class="fa fs-12"></i>
30
</button>
31
</div>
32
</ng-template>
33
<ng-template #menuItems>
34
<pg-menu-items [Items]="menuLinks">
35
</pg-menu-items>
36
</ng-template>
37
</pg-sidebar>
Copied!
1
menuLinks = [
2
{
3
label:"Dashboard",
4
details:"12 New Updates",
5
routerLink:"/",
6
iconType:"pg",
7
iconName:"home",
8
thumbNailClass:"bg-success"
9
},
10
{
11
label:"Email",
12
details:"234 New Emails",
13
routerLink:"email/list",
14
iconType:"pg",
15
iconName:"mail"
16
},
17
{
18
label:"Social",
19
routerLink:"social",
20
iconType:"pg",
21
iconName:"social"
22
},
23
{
24
label:"Builder",
25
routerLink:"builder",
26
iconType:"pg",
27
iconName:"layouts"
28
},
29
{
30
label:"Layouts",
31
iconType:"pg",
32
iconName:"layouts2",
33
toggle:"close",
34
submenu:[
35
{
36
label:"Default",
37
routerLink:"layouts/default",
38
iconType:"letter",
39
iconName:"dl",
40
},
41
{
42
label:"Secondary",
43
routerLink:"layouts/secondary",
44
iconType:"letter",
45
iconName:"sl",
46
},
47
{
48
label:"Boxed",
49
routerLink:"layouts/boxed",
50
iconType:"letter",
51
iconName:"bl",
52
}
53
]
54
},
55
{
56
label:"UI Elements",
57
iconType:"letter",
58
iconName:"Ui",
59
toggle:"close",
60
submenu:[
61
{
62
label:"Color",
63
routerLink:"ui/buttons",
64
iconType:"letter",
65
iconName:"c",
66
},
67
{
68
label:"Typography",
69
routerLink:"ui/typography",
70
iconType:"letter",
71
iconName:"t",
72
},
73
{
74
label:"Icons",
75
routerLink:"ui/icons",
76
iconType:"letter",
77
iconName:"i",
78
},
79
{
80
label:"Buttons",
81
routerLink:"ui/buttons",
82
iconType:"letter",
83
iconName:"b",
84
},
85
{
86
label:"Notifications",
87
routerLink:"ui/notifications",
88
iconType:"letter",
89
iconName:"n",
90
},
91
{
92
label:"Progress & Activity",
93
routerLink:"ui/progress",
94
iconType:"letter",
95
iconName:"pa",
96
},
97
{
98
label:"Tabs & Accordians",
99
routerLink:"ui/tabs",
100
iconType:"letter",
101
iconName:"a",
102
},
103
{
104
label:"Sliders",
105
routerLink:"ui/sliders",
106
iconType:"letter",
107
iconName:"s",
108
},
109
{
110
label:"Treeview",
111
routerLink:"ui/tree",
112
iconType:"letter",
113
iconName:"tv",
114
}
115
]
116
},
117
{
118
label:"Forms",
119
iconType:"pg",
120
iconName:"form",
121
toggle:"close",
122
submenu:[
123
{
124
label:"Form Elements",
125
routerLink:"forms/elements",
126
iconType:"letter",
127
iconName:"fe",
128
},
129
{
130
label:"Form Layouts",
131
routerLink:"forms/layouts",
132
iconType:"letter",
133
iconName:"fl",
134
},
135
{
136
label:"Form Wizard",
137
routerLink:"forms/wizard",
138
iconType:"letter",
139
iconName:"fq",
140
}
141
]
142
},
143
{
144
label:"Cards",
145
routerLink:"cards",
146
iconType:"pg",
147
iconName:"grid"
148
},
149
{
150
label:"Views",
151
routerLink:"views",
152
iconType:"pg",
153
iconName:"ui"
154
},
155
{
156
label:"Tables",
157
iconType:"pg",
158
iconName:"tables",
159
toggle:"close",
160
submenu:[
161
{
162
label:"Basic Tables",
163
routerLink:"tables/basic",
164
iconType:"letter",
165
iconName:"bt",
166
},
167
{
168
label:"Advance Tables",
169
routerLink:"tables/advance",
170
iconType:"letter",
171
iconName:"dt",
172
}
173
]
174
},
175
{
176
label:"Maps",
177
iconType:"pg",
178
iconName:"map",
179
toggle:"close",
180
submenu:[
181
{
182
label:"Google Maps",
183
routerLink:"tables/basic",
184
iconType:"letter",
185
iconName:"gm",
186
},
187
{
188
label:"Vector Maps",
189
routerLink:"tables/data",
190
iconType:"letter",
191
iconName:"vm",
192
}
193
]
194
},
195
{
196
label:"Charts",
197
routerLink:"charts",
198
iconType:"pg",
199
iconName:"charts"
200
},
201
{
202
label:"Extra",
203
iconType:"pg",
204
iconName:"bag",
205
toggle:"close",
206
submenu:[
207
{
208
label:"Invoice",
209
routerLink:"extra/invoice",
210
iconType:"letter",
211
iconName:"in",
212
},
213
{
214
label:"404 Page",
215
routerLink:"tables/data",
216
iconType:"letter",
217
iconName:"pg",
218
},
219
{
220
label:"500 Page",
221
routerLink:"tables/data",
222
iconType:"letter",
223
iconName:"pg",
224
},
225
{
226
label:"Login",
227
routerLink:"session/login",
228
iconType:"letter",
229
iconName:"l",
230
},
231
{
232
label:"Register",
233
routerLink:"session/register",
234
iconType:"letter",
235
iconName:"re",
236
},
237
{
238
label:"Lockscreen",
239
routerLink:"session/lock",
240
iconType:"letter",
241
iconName:"ls",
242
},
243
{
244
label:"Gallery",
245
routerLink:"extra/gallery",
246
iconType:"letter",
247
iconName:"gl",
248
},
249
{
250
label:"Timeline",
251
routerLink:"extra/timeline",
252
iconType:"letter",
253
iconName:"t",
254
}
255
]
256
},
257
{
258
label:"Docs",
259
routerLink:"http://pages.revox.io/dashboard/2.2.0/docs/",
260
targe:"_blank",
261
iconType:"pg",
262
iconName:"note"
263
},
264
{
265
label:"Changelog",
266
externalLink:"http://changelog.pages.revox.io/",
267
targe:"_blank",
268
iconType:"letter",
269
iconName:"Cl"
270
},
271
];
Copied!
Last modified 4yr ago
Copy link