Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(header): header responsive

Browse source
This commit is contained in:
Mikhail Hryb 2017-09-14 22:15:08 +03:00 • committed by KostyaDanovsky
parent 4a752483c0
commit b31859e370
2 changed files with 21 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
[class.left]="position === 'normal'" [class.left]="position === 'normal'"
[class.right]="position === 'inverse'"> [class.right]="position === 'inverse'">
<div class="logo-containter"> <div class="logo-containter">
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a> <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
<div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div> <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
</div> </div>
<div class="switcher-container"> <div class="switcher-container">
@ -23,7 +23,7 @@
[class.right]="position === 'normal'" [class.right]="position === 'normal'"
[class.left]="position === 'inverse'"> [class.left]="position === 'inverse'">
<nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action> <nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action>
<nb-action> <nb-action class="">
<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 class="control-item" disabled icon="nb-notifications"></nb-action> <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>

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

@ -43,6 +43,12 @@
.navigation { .navigation {
padding-right: nb-theme(padding); padding-right: nb-theme(padding);
font-size: 2.5rem; font-size: 2.5rem;
text-decoration: none;
i {
display: block;
}
} }
.logo { .logo {
@ -153,9 +159,18 @@
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
nb-action:not(.toggle-layout) {
border: none;
}
.control-item { .control-item {
display: none; display: none;
} }
.toggle-layout {
padding: 0;
}
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
@ -182,6 +197,10 @@
display: none; display: none;
} }
} }
nb-action:not(.toggle-layout) {
padding: 0;
}
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {