+
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
index 3d3579a5..5629ca06 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -9,51 +9,47 @@ fuse-sidebar {
navbar-vertical-style-1 {
- .navbar-wrapper {
+ .navbar-top {
+ padding: 12px 0;
+ justify-content: center;
- .navbar-header {
+ .buttons {
+ display: none;
+ }
- .top {
- padding: 12px 0 0 0;
- justify-content: center;
+ .logo {
- .buttons {
- display: none;
- }
+ .logo-icon {
+ width: 32px;
+ height: 32px;
+ }
+ }
+ }
- .logo {
+ .navbar-scroll-container {
- .logo-icon {
- width: 32px;
- height: 32px;
- }
+ .user {
+ padding: 12px 0;
+
+ .avatar-container {
+ position: relative;
+ top: auto;
+ padding: 0;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
}
}
- .user {
- padding-bottom: 24px;
-
- .avatar-container {
- position: relative;
- top: auto;
- padding: 0;
-
- .avatar {
- width: 40px;
- height: 40px;
- }
- }
-
- .username,
- .email {
- display: none;
- }
+ .username,
+ .email {
+ display: none;
}
}
.navbar-content {
margin-top: 0;
- height: auto !important;
}
}
}
@@ -69,78 +65,65 @@ navbar {
width: 100%;
height: 100%;
- .navbar-wrapper {
- overflow: hidden;
+ .navbar-top {
+ display: flex;
+ flex-direction: row;
+ flex: 1 0 auto;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 12px 12px 20px;
- @include media-breakpoint-down('md') {
- overflow: auto;
+ .logo {
+ display: flex;
+ align-items: center;
+
+ .logo-icon {
+ width: 24px;
+ height: 24px;
+ }
}
- .navbar-header {
+ .buttons {
display: flex;
- flex-direction: column;
align-items: center;
- justify-content: space-between;
- flex: 1 0 auto;
- background: rgba(0, 0, 0, 0.12);
- transition: padding 200ms ease;
+ }
+ }
- .top {
- display: flex;
- flex: 1 1 auto;
- width: 100%;
- justify-content: space-between;
- align-items: center;
- padding: 12px 12px 0 16px;
+ .navbar-scroll-container {
+ overflow-y: auto;
- .logo {
- display: flex;
- align-items: center;
+ background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
+ linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
- .logo-icon {
- width: 24px;
- height: 24px;
- }
- }
+ background-repeat: no-repeat;
+ background-size: 100% 40px, 100% 10px;
+ background-attachment: local, scroll;
- .buttons {
- display: flex;
- align-items: center;
- }
- }
+ .user {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ padding: 24px 0 64px 0;
- .user {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- width: 100%;
- padding: 24px 0 64px 0;
+ .avatar-container {
+ position: absolute;
+ top: 92px;
+ border-radius: 50%;
+ padding: 8px;
- .avatar-container {
- position: absolute;
- top: 92px;
- border-radius: 50%;
- padding: 8px;
-
- .avatar {
- width: 72px;
- height: 72px;
- margin: 0;
- }
+ .avatar {
+ width: 72px;
+ height: 72px;
+ margin: 0;
}
}
}
.navbar-content {
flex: 1 1 auto;
- overflow-y: auto;
- margin-top: 48px;
- height: calc(100vh - 236px);
-
- @include media-breakpoint-down('md') {
- height: auto;
- }
+ margin-top: 32px;
}
}
}
diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html
index a103a281..23c306b7 100644
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/src/app/main/documentation/changelog/changelog.component.html
@@ -38,18 +38,18 @@
Updated Angular Material to 6.3.3
Updated various other packages
Updated Angular material examples
-
Chat Panel sidebar
-
New style variants for the Navbar
-
Added 'foldedChanged' & 'openedChanged' outputs to the FuseSidebar
-
Ability to add custom classes to the navigation items
-
FuseLoadingBarService for showing/hiding the loading bar easily
+
New Chat Panel sidebar
+
(Navbar) New style variants for the Navbar
+
(FuseSidebar) Added 'foldedChanged' & 'openedChanged' outputs
+
(FuseNavigation) Ability to add custom classes to the navigation items
+
(FuseLoadingBarService) New service for showing/hiding the loading bar easily