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

fix(header): header responsive

Browse source
This commit is contained in:
Mikhail Hryb 2017-09-11 11:44:04 +03:00 • committed by KostyaDanovsky
parent 5f30c69416
commit 56c1ea5628
2 changed files with 66 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/app/@theme/components/header/header.component.html
View file

@ -1,16 +1,20 @@
<div class="header-container" <div class="header-container"
[class.left]="position === 'normal'" [class.left]="position === 'normal'"
[class.right]="position === 'inverse'"> [class.right]="position === 'inverse'">
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a> <div class="logo-containter">
<div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div> <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
<label class="theme-switch"> <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
<span class="light">Light</span> </div>
<div class="switch"> <div class="switcher-container">
<input type="checkbox" (change)="toggleTheme(theme.checked)" #theme> <label class="theme-switch">
<span class="slider"></span> <span class="light">Light</span>
</div> <div class="switch">
<span class="cosmic">Cosmic</span> <input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
</label> <span class="slider"></span>
</div>
<span class="cosmic">Cosmic</span>
</label>
</div>
</div> </div>
<nb-actions <nb-actions
@ -22,9 +26,9 @@
<nb-action> <nb-action>
<nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user> <nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action> </nb-action>
<nb-action disabled icon="nb-notifications"></nb-action> <nb-action class="action-item" disabled icon="nb-notifications"></nb-action>
<nb-action icon="nb-email"></nb-action> <nb-action class="action-item" icon="nb-email"></nb-action>
<nb-action> <nb-action class="action-item">
<nb-search type="rotate-layout"></nb-search> <nb-search type="rotate-layout"></nb-search>
</nb-action> </nb-action>
</nb-actions> </nb-actions>

50
src/app/@theme/components/header/header.component.scss
View file

@ -1,5 +1,7 @@
@import '../../styles/themes'; @import '../../styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/hero-buttons'; @import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@include nb-install-component() { @include nb-install-component() {
display: flex; display: flex;
@ -7,6 +9,8 @@
width: 100%; width: 100%;
.left { .left {
display: flex;
width: 100%;
order: 0; order: 0;
flex-direction: row; flex-direction: row;
} }
@ -15,9 +19,26 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.logo-containter {
display: flex;
align-items: center;
}
.switcher-container {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
}
.action-item {
display: block;
}
.header-container { .header-container {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%;
.navigation { .navigation {
padding-right: nb-theme(padding); padding-right: nb-theme(padding);
@ -37,7 +58,6 @@
} }
.theme-switch { .theme-switch {
margin: 0 6rem;
width: 12rem; width: 12rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -116,6 +136,7 @@
} }
.toggle-layout /deep/ a { .toggle-layout /deep/ a {
display: block;
text-decoration: none; text-decoration: none;
line-height: 1; line-height: 1;
@ -129,5 +150,32 @@
} }
} }
} }
nb-user /deep/ .user-name {
display: block;
}
@include media-breakpoint-down(md) {
.action-item {
display: none;
}
}
@include media-breakpoint-down(sm) {
nb-user /deep/ .user-name {
display: none;
}
}
@include media-breakpoint-down(xs) {
.toggle-layout {
display: none;
}
.switcher-container {
display: none;
}
}
} }