Skip to content

Commit 59bf5ff

Browse files
hikalkanhikalkan
committed
Move right sidebar to it's own component.
1 parent 7297d18 commit 59bf5ff

File tree

4 files changed

+161
-146
lines changed

4 files changed

+161
-146
lines changed

‎angular/src/app/app.component.html

Lines changed: 1 addition & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -32,156 +32,12 @@
3232
<!-- #Top Bar -->
3333

3434
<section>
35-
<!-- Left Sidebar -->
3635
<aside id="leftsidebar" class="sidebar">
3736
<sidebar-user-area></sidebar-user-area>
3837
<sidebar-nav></sidebar-nav>
3938
<sidebar-footer></sidebar-footer>
4039
</aside>
41-
<!-- #END# Left Sidebar -->
42-
<!-- Right Sidebar -->
43-
<aside id="rightsidebar" class="right-sidebar">
44-
<ul class="nav nav-tabs tab-nav-right" role="tablist">
45-
<li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
46-
<li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
47-
</ul>
48-
<div class="tab-content">
49-
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
50-
<ul class="demo-choose-skin">
51-
<li data-theme="red" class="active">
52-
<div class="red"></div>
53-
<span>Red</span>
54-
</li>
55-
<li data-theme="pink">
56-
<div class="pink"></div>
57-
<span>Pink</span>
58-
</li>
59-
<li data-theme="purple">
60-
<div class="purple"></div>
61-
<span>Purple</span>
62-
</li>
63-
<li data-theme="deep-purple">
64-
<div class="deep-purple"></div>
65-
<span>Deep Purple</span>
66-
</li>
67-
<li data-theme="indigo">
68-
<div class="indigo"></div>
69-
<span>Indigo</span>
70-
</li>
71-
<li data-theme="blue">
72-
<div class="blue"></div>
73-
<span>Blue</span>
74-
</li>
75-
<li data-theme="light-blue">
76-
<div class="light-blue"></div>
77-
<span>Light Blue</span>
78-
</li>
79-
<li data-theme="cyan">
80-
<div class="cyan"></div>
81-
<span>Cyan</span>
82-
</li>
83-
<li data-theme="teal">
84-
<div class="teal"></div>
85-
<span>Teal</span>
86-
</li>
87-
<li data-theme="green">
88-
<div class="green"></div>
89-
<span>Green</span>
90-
</li>
91-
<li data-theme="light-green">
92-
<div class="light-green"></div>
93-
<span>Light Green</span>
94-
</li>
95-
<li data-theme="lime">
96-
<div class="lime"></div>
97-
<span>Lime</span>
98-
</li>
99-
<li data-theme="yellow">
100-
<div class="yellow"></div>
101-
<span>Yellow</span>
102-
</li>
103-
<li data-theme="amber">
104-
<div class="amber"></div>
105-
<span>Amber</span>
106-
</li>
107-
<li data-theme="orange">
108-
<div class="orange"></div>
109-
<span>Orange</span>
110-
</li>
111-
<li data-theme="deep-orange">
112-
<div class="deep-orange"></div>
113-
<span>Deep Orange</span>
114-
</li>
115-
<li data-theme="brown">
116-
<div class="brown"></div>
117-
<span>Brown</span>
118-
</li>
119-
<li data-theme="grey">
120-
<div class="grey"></div>
121-
<span>Grey</span>
122-
</li>
123-
<li data-theme="blue-grey">
124-
<div class="blue-grey"></div>
125-
<span>Blue Grey</span>
126-
</li>
127-
<li data-theme="black">
128-
<div class="black"></div>
129-
<span>Black</span>
130-
</li>
131-
</ul>
132-
</div>
133-
<div role="tabpanel" class="tab-pane fade" id="settings">
134-
<div class="demo-settings">
135-
<p>GENERAL SETTINGS</p>
136-
<ul class="setting-list">
137-
<li>
138-
<span>Report Panel Usage</span>
139-
<div class="switch">
140-
<label><input type="checkbox" checked><span class="lever"></span></label>
141-
</div>
142-
</li>
143-
<li>
144-
<span>Email Redirect</span>
145-
<div class="switch">
146-
<label><input type="checkbox"><span class="lever"></span></label>
147-
</div>
148-
</li>
149-
</ul>
150-
<p>SYSTEM SETTINGS</p>
151-
<ul class="setting-list">
152-
<li>
153-
<span>Notifications</span>
154-
<div class="switch">
155-
<label><input type="checkbox" checked><span class="lever"></span></label>
156-
</div>
157-
</li>
158-
<li>
159-
<span>Auto Updates</span>
160-
<div class="switch">
161-
<label><input type="checkbox" checked><span class="lever"></span></label>
162-
</div>
163-
</li>
164-
</ul>
165-
<p>ACCOUNT SETTINGS</p>
166-
<ul class="setting-list">
167-
<li>
168-
<span>Offline</span>
169-
<div class="switch">
170-
<label><input type="checkbox"><span class="lever"></span></label>
171-
</div>
172-
</li>
173-
<li>
174-
<span>Location Permission</span>
175-
<div class="switch">
176-
<label><input type="checkbox" checked><span class="lever"></span></label>
177-
</div>
178-
</li>
179-
</ul>
180-
</div>
181-
</div>
182-
</div>
183-
</aside>
184-
<!-- #END# Right Sidebar -->
40+
<right-sidebar></right-sidebar>
18541
</section>
18642

18743

‎angular/src/app/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { TopBarLanguageSwitchComponent } from '@app/layout/topbar-languageswitch
2323
import { SideBarUserAreaComponent } from '@app/layout/sidebar-user-area.component';
2424
import { SideBarNavComponent } from '@app/layout/sidebar-nav.component';
2525
import { SideBarFooterComponent } from '@app/layout/sidebar-footer.component';
26+
import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
2627

2728
@NgModule({
2829
declarations: [
@@ -36,7 +37,8 @@ import { SideBarFooterComponent } from '@app/layout/sidebar-footer.component';
3637
TopBarLanguageSwitchComponent,
3738
SideBarUserAreaComponent,
3839
SideBarNavComponent,
39-
SideBarFooterComponent
40+
SideBarFooterComponent,
41+
RightSideBarComponent
4042
],
4143
imports: [
4244
CommonModule,

‎angular/src/app/layout/right-sidebar.component.html

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<aside id="rightsidebar" class="right-sidebar">
2+
<ul class="nav nav-tabs tab-nav-right" role="tablist">
3+
<li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
4+
<li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
5+
</ul>
6+
<div class="tab-content">
7+
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
8+
<ul class="demo-choose-skin">
9+
<li data-theme="red" class="active">
10+
<div class="red"></div>
11+
<span>Red</span>
12+
</li>
13+
<li data-theme="pink">
14+
<div class="pink"></div>
15+
<span>Pink</span>
16+
</li>
17+
<li data-theme="purple">
18+
<div class="purple"></div>
19+
<span>Purple</span>
20+
</li>
21+
<li data-theme="deep-purple">
22+
<div class="deep-purple"></div>
23+
<span>Deep Purple</span>
24+
</li>
25+
<li data-theme="indigo">
26+
<div class="indigo"></div>
27+
<span>Indigo</span>
28+
</li>
29+
<li data-theme="blue">
30+
<div class="blue"></div>
31+
<span>Blue</span>
32+
</li>
33+
<li data-theme="light-blue">
34+
<div class="light-blue"></div>
35+
<span>Light Blue</span>
36+
</li>
37+
<li data-theme="cyan">
38+
<div class="cyan"></div>
39+
<span>Cyan</span>
40+
</li>
41+
<li data-theme="teal">
42+
<div class="teal"></div>
43+
<span>Teal</span>
44+
</li>
45+
<li data-theme="green">
46+
<div class="green"></div>
47+
<span>Green</span>
48+
</li>
49+
<li data-theme="light-green">
50+
<div class="light-green"></div>
51+
<span>Light Green</span>
52+
</li>
53+
<li data-theme="lime">
54+
<div class="lime"></div>
55+
<span>Lime</span>
56+
</li>
57+
<li data-theme="yellow">
58+
<div class="yellow"></div>
59+
<span>Yellow</span>
60+
</li>
61+
<li data-theme="amber">
62+
<div class="amber"></div>
63+
<span>Amber</span>
64+
</li>
65+
<li data-theme="orange">
66+
<div class="orange"></div>
67+
<span>Orange</span>
68+
</li>
69+
<li data-theme="deep-orange">
70+
<div class="deep-orange"></div>
71+
<span>Deep Orange</span>
72+
</li>
73+
<li data-theme="brown">
74+
<div class="brown"></div>
75+
<span>Brown</span>
76+
</li>
77+
<li data-theme="grey">
78+
<div class="grey"></div>
79+
<span>Grey</span>
80+
</li>
81+
<li data-theme="blue-grey">
82+
<div class="blue-grey"></div>
83+
<span>Blue Grey</span>
84+
</li>
85+
<li data-theme="black">
86+
<div class="black"></div>
87+
<span>Black</span>
88+
</li>
89+
</ul>
90+
</div>
91+
<div role="tabpanel" class="tab-pane fade" id="settings">
92+
<div class="demo-settings">
93+
<p>GENERAL SETTINGS</p>
94+
<ul class="setting-list">
95+
<li>
96+
<span>Report Panel Usage</span>
97+
<div class="switch">
98+
<label><input type="checkbox" checked><span class="lever"></span></label>
99+
</div>
100+
</li>
101+
<li>
102+
<span>Email Redirect</span>
103+
<div class="switch">
104+
<label><input type="checkbox"><span class="lever"></span></label>
105+
</div>
106+
</li>
107+
</ul>
108+
<p>SYSTEM SETTINGS</p>
109+
<ul class="setting-list">
110+
<li>
111+
<span>Notifications</span>
112+
<div class="switch">
113+
<label><input type="checkbox" checked><span class="lever"></span></label>
114+
</div>
115+
</li>
116+
<li>
117+
<span>Auto Updates</span>
118+
<div class="switch">
119+
<label><input type="checkbox" checked><span class="lever"></span></label>
120+
</div>
121+
</li>
122+
</ul>
123+
<p>ACCOUNT SETTINGS</p>
124+
<ul class="setting-list">
125+
<li>
126+
<span>Offline</span>
127+
<div class="switch">
128+
<label><input type="checkbox"><span class="lever"></span></label>
129+
</div>
130+
</li>
131+
<li>
132+
<span>Location Permission</span>
133+
<div class="switch">
134+
<label><input type="checkbox" checked><span class="lever"></span></label>
135+
</div>
136+
</li>
137+
</ul>
138+
</div>
139+
</div>
140+
</div>
141+
</aside>

‎angular/src/app/layout/right-sidebar.component.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, Injector, ViewEncapsulation } from '@angular/core';
2+
import { AppComponentBase } from '@shared/app-component-base';
3+
4+
@Component({
5+
templateUrl: './right-sidebar.component.html',
6+
selector: 'right-sidebar',
7+
encapsulation: ViewEncapsulation.None
8+
})
9+
export class RightSideBarComponent extends AppComponentBase {
10+
11+
constructor(
12+
injector: Injector
13+
) {
14+
super(injector);
15+
}
16+
}

0 commit comments

Comments
 (0)