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, folded : false,
hidden : false, hidden : false,
position : 'left', position : 'left',
variant : 'vertical-style-2' variant : 'vertical-style-1'
}, },
toolbar: { toolbar: {
background: 'mat-white-500-bg', background: 'mat-white-500-bg',

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

@ -1,23 +1,41 @@
<div class="navbar-header">
<div class="logo"> <div class="navbar-header adaptive-border-color">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
<span class="logo-text">FUSE</span> <div class="top">
<div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
</div>
<div class="buttons">
<button mat-icon-button class="toggle-sidebar-folded"
(click)="toggleSidebarFolded()" fxHide.lt-lg>
<mat-icon class="secondary-text">menu</mat-icon>
</button>
<button mat-icon-button class="toggle-sidebar-opened"
(click)="toggleSidebarOpened()" fxHide.gt-md>
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div> </div>
<button mat-icon-button class="toggle-sidebar-folded" <div class="user" fxLayout="column">
(click)="toggleSidebarFolded()" fxHide.lt-lg>
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="toggle-sidebar-opened" <div class="avatar-container">
(click)="toggleSidebarOpened()" fxHide.gt-md> <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
<mat-icon>arrow_back</mat-icon> <div class="avatar-circle"></div>
</button> </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>
<div class="navbar-content" fusePerfectScrollbar <div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation layout="vertical"></fuse-navigation> <fuse-navigation layout="vertical"></fuse-navigation>
</div> </div>

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

@ -5,16 +5,47 @@ fuse-sidebar {
&.folded:not(.unfolded) { &.folded:not(.unfolded) {
.navbar-vertical { navbar {
.navbar-header { navbar-vertical-style-1 {
padding: 0 13px;
.logo { .navbar-header {
.logo-text { .top {
opacity: 0; padding: 12px 0 0 0;
transition: opacity 200ms ease; justify-content: center;
.buttons {
display: none;
}
.logo {
.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 { .navbar-header {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 64px; flex: 1 0 auto;
min-height: 64px; background: rgba(0, 0, 0, 0.12);
padding: 0 16px 0 24px;
transition: padding 200ms ease; transition: padding 200ms ease;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1);
.logo { .top {
display: flex; display: flex;
flex: 1 1 auto;
width: 100%;
justify-content: space-between;
align-items: center; align-items: center;
padding: 12px 12px 0 16px;
.logo-icon { .logo {
width: 38px; display: flex;
height: 38px; align-items: center;
.logo-icon {
width: 24px;
height: 24px;
}
} }
.logo-text { .buttons {
margin-left: 8px; display: flex;
font-size: 20px; align-items: center;
font-weight: 300; }
letter-spacing: 0.4px; }
.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; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
} }
} }
&.right-navbar { &.right-navbar {
@ -75,4 +138,4 @@ navbar {
} }
} }
} }
} }

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

@ -1,34 +1,22 @@
<div class="navbar-header"> <div class="navbar-header">
<div class="navbar-header-top"> <div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
<div class="logo"> <span class="logo-text">FUSE</span>
<img class="logo-icon" src="assets/images/logos/fuse.svg">
<span class="logo-text">FUSE</span>
</div>
<button mat-icon-button class="toggle-sidebar-folded"
(click)="toggleSidebarFolded()" fxHide.lt-lg>
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="toggle-sidebar-opened"
(click)="toggleSidebarOpened()" fxHide.gt-md>
<mat-icon>arrow_back</mat-icon>
</button>
</div> </div>
<div class="navbar-header-user"> <button mat-icon-button class="toggle-sidebar-folded"
(click)="toggleSidebarFolded()" fxHide.lt-lg>
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="toggle-sidebar-opened"
(click)="toggleSidebarOpened()" fxHide.gt-md>
</div> <mat-icon>arrow_back</mat-icon>
</button>
</div> </div>
Style 2
<div class="navbar-content" fusePerfectScrollbar <div class="navbar-content" fusePerfectScrollbar
[fusePerfectScrollbarOptions]="{suppressScrollX: true}"> [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation layout="vertical"></fuse-navigation> <fuse-navigation layout="vertical"></fuse-navigation>

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

@ -5,11 +5,11 @@ fuse-sidebar {
&.folded:not(.unfolded) { &.folded:not(.unfolded) {
.navbar-vertical { navbar {
.navbar-header { navbar-vertical-style-2 {
.navbar-header-top { .navbar-header {
padding: 0 13px; padding: 0 13px;
.logo { .logo {
@ -34,37 +34,31 @@ navbar {
height: 100%; height: 100%;
.navbar-header { .navbar-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
min-height: 64px;
padding: 0 16px 0 24px;
transition: padding 200ms ease;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1);
.navbar-header-top { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
height: 64px;
min-height: 64px;
padding: 0 16px 0 24px;
transition: padding 200ms ease;
border-bottom: 1px solid;
.logo { .logo-icon {
display: flex; width: 38px;
align-items: center; height: 38px;
.logo-icon {
width: 38px;
height: 38px;
}
.logo-text {
margin-left: 8px;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.4px;
}
} }
}
.navbar-header-user {
.logo-text {
margin-left: 8px;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.4px;
}
} }
} }
@ -72,6 +66,7 @@ navbar {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
} }
} }
&.right-navbar { &.right-navbar {