purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Navbar) Finished navbar variants

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-09 21:29:15 +03:00
parent 20d5a68bf3
commit 18009c9275
5 changed files with 153 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/fuse-config/index.ts
View File

@ -17,7 +17,7 @@ export const fuseConfig: FuseConfig = {
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-2'
variant : 'vertical-style-1'
},
toolbar: {
background: 'mat-white-500-bg',

30
src/app/layout/components/navbar/vertical/style-1/style-1.component.html
View File

@ -1,23 +1,41 @@
<div class="navbar-header">
<div class="navbar-header adaptive-border-color">
<div class="top">
<div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
<span class="logo-text">FUSE</span>
</div>
<div class="buttons">
<button mat-icon-button class="toggle-sidebar-folded"
(click)="toggleSidebarFolded()" fxHide.lt-lg>
<mat-icon>menu</mat-icon>
<mat-icon class="secondary-text">menu</mat-icon>
</button>
<button mat-icon-button class="toggle-sidebar-opened"
(click)="toggleSidebarOpened()" fxHide.gt-md>
<mat-icon>arrow_back</mat-icon>
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>
<div class="user" fxLayout="column">
<div class="avatar-container">
<img class="avatar" src="assets/images/avatars/Velazquez.jpg">
<div class="avatar-circle"></div>
</div>
<div class="h3 username mt-32">Charlie Adams</div>
<div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
</div>
</div>
<div class="navbar-content" fusePerfectScrollbar
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

99
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -5,16 +5,47 @@ fuse-sidebar {
&.folded:not(.unfolded) {
.navbar-vertical {
navbar {
navbar-vertical-style-1 {
.navbar-header {
padding: 0 13px;
.top {
padding: 12px 0 0 0;
justify-content: center;
.buttons {
display: none;
}
.logo {
.logo-text {
opacity: 0;
transition: opacity 200ms ease;
.logo-icon {
width: 32px;
height: 32px;
}
}
}
.user {
.avatar-container {
.avatar {
width: 40px;
height: 40px;
}
.avatar-circle {
display: none;
}
}
.username,
.email {
display: none;
}
}
}
}
@ -32,29 +63,62 @@ navbar {
.navbar-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 64px;
min-height: 64px;
padding: 0 16px 0 24px;
flex: 1 0 auto;
background: rgba(0, 0, 0, 0.12);
transition: padding 200ms ease;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1);
.top {
display: flex;
flex: 1 1 auto;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 12px 12px 0 16px;
.logo {
display: flex;
align-items: center;
.logo-icon {
width: 38px;
height: 38px;
width: 24px;
height: 24px;
}
}
.logo-text {
margin-left: 8px;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.4px;
.buttons {
display: flex;
align-items: center;
}
}
.user {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 24px 0;
.avatar-container {
position: relative;
.avatar {
width: 80px;
height: 80px;
margin: 0;
}
.avatar-circle {
position: absolute;
top: -6px;
left: -6px;
width: 92px;
height: 92px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.54);
}
}
}
}
@ -63,7 +127,6 @@ navbar {
flex: 1 1 auto;
overflow-y: auto;
}
}
&.right-navbar {

12
src/app/layout/components/navbar/vertical/style-2/style-2.component.html
View File

@ -1,7 +1,5 @@
<div class="navbar-header">
<div class="navbar-header-top">
<div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
<span class="logo-text">FUSE</span>
@ -17,18 +15,8 @@
<mat-icon>arrow_back</mat-icon>
</button>
</div>
<div class="navbar-header-user">
</div>
</div>
Style 2
<div class="navbar-content" fusePerfectScrollbar
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation layout="vertical"></fuse-navigation>

17
src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
View File

@ -5,11 +5,11 @@ fuse-sidebar {
&.folded:not(.unfolded) {
.navbar-vertical {
navbar {
navbar-vertical-style-2 {
.navbar-header {
.navbar-header-top {
padding: 0 13px;
.logo {
@ -34,8 +34,6 @@ navbar {
height: 100%;
.navbar-header {
.navbar-header-top {
display: flex;
align-items: center;
justify-content: space-between;
@ -43,7 +41,8 @@ navbar {
min-height: 64px;
padding: 0 16px 0 24px;
transition: padding 200ms ease;
border-bottom: 1px solid;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1);
.logo {
display: flex;
@ -63,15 +62,11 @@ navbar {
}
}
.navbar-header-user {
}
}
.navbar-content {
flex: 1 1 auto;
overflow-y: auto;
}
}
&.right-navbar {