Navbar toggle button should be right aligned if right navbar selected

Navbar classes actually moved to the navbar from fuse-sidebar
Search icon color

src/@fuse/components/search-bar/search-bar.component.html

@@ -17,7 +17,7 @@
 
         <button mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
                 aria-label="Collapse Search Bar">
-            <mat-icon class="s-24">close</mat-icon>
+            <mat-icon class="secondary-text s-24">close</mat-icon>
         </button>
 
     </div>

src/app/layout/components/navbar/navbar.component.html

@@ -9,12 +9,12 @@
                 <span class="logo-text">FUSE</span>
             </div>
 
-            <button mat-icon-button class="toggle-button-navbar"
+            <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-button-navbar"
+            <button mat-icon-button class="toggle-sidebar-opened"
                     (click)="toggleSidebarOpened()" fxHide.gt-md>
                 <mat-icon>arrow_back</mat-icon>
             </button>

src/app/layout/components/navbar/navbar.component.scss

@@ -1,28 +1,5 @@
 @import "src/@fuse/scss/fuse";
 
-body {
-
-    &.fuse-sidebar-folded {
-
-        .content-wrapper {
-
-            &:last-child {
-                padding-left: 64px !important;
-            }
-
-            &:first-child {
-                padding-right: 64px !important;
-            }
-
-            &:first-child:last-child {
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-            }
-
-        }
-    }
-}
-
 fuse-sidebar {
 
     &.folded:not(.unfolded) {
@@ -89,16 +66,14 @@ navbar {
             flex: 1;
         }
     }
-}
 
-.top-navbar + #wrapper {
+    &.right-navbar {
 
-    & > .left-navbar {
+        .toggle-sidebar-opened {
-        display: none !important;
 
-        @include media-breakpoint-down(md) {
+            mat-icon {
-            display: flex !important;
+                transform: rotate(180deg);
+            }
         }
     }
 }
-

src/app/layout/components/toolbar/toolbar.component.html

@@ -6,13 +6,12 @@
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-icon-button class="toggle-button-navbar"
+            <button mat-icon-button class="navbar-toggle-button"
-                    *ngIf="!noNav"
+                    *ngIf="!hiddenNavbar && !rightNavbar" (click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
-                    (click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
+                <mat-icon class="secondary-text">menu</mat-icon>
-                <mat-icon>menu</mat-icon>
             </button>
 
-            <div class="toolbar-separator" fxHide.gt-md></div>
+            <div class="toolbar-separator" *ngIf="!hiddenNavbar && !rightNavbar" fxHide.gt-md></div>
 
             <div fxLayout="row" fxLayoutAlign="start center" *ngIf="horizontalNav">
                 <div class="logo ml-16">
@@ -97,6 +96,13 @@
                 <mat-icon class="icon">format_list_bulleted</mat-icon>
             </button>
 
+            <div class="toolbar-separator" *ngIf="!hiddenNavbar && rightNavbar" fxHide fxShow.gt-xs></div>
+
+            <button mat-icon-button class="navbar-toggle-button"
+                    *ngIf="!hiddenNavbar && rightNavbar" (click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
+                <mat-icon class="secondary-text">menu</mat-icon>
+            </button>
+
         </div>
 
     </div>

src/app/layout/components/toolbar/toolbar.component.scss

@@ -45,7 +45,7 @@
         }
     }
 
-    .toggle-button-navbar {
+    .navbar-toggle-button {
         min-width: 56px;
         height: 56px;
     }

src/app/layout/components/toolbar/toolbar.component.ts

@@ -18,9 +18,10 @@ import { navigation } from 'app/navigation/navigation';
 
 export class ToolbarComponent implements OnInit, OnDestroy
 {
-    horizontalNav: boolean;
+    horizontalNavbar: boolean;
+    rightNavbar: boolean;
+    hiddenNavbar: boolean;
     languages: any;
-    noNav: boolean;
     navigation: any;
     selectedLanguage: any;
     showLoadingBar: boolean;
@@ -123,8 +124,9 @@ export class ToolbarComponent implements OnInit, OnDestroy
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((settings) => {
-                this.horizontalNav = settings.layout.navbar.position === 'top';
+                this.horizontalNavbar = settings.layout.navbar.position === 'top';
-                this.noNav = settings.layout.navbar.position === 'none';
+                this.rightNavbar = settings.layout.navbar.position === 'right';
+                this.hiddenNavbar = settings.layout.navbar.hidden === true;
             });
 
         // Set the selected language from default languages

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -82,8 +82,8 @@
 <!-- TOP NAVBAR -->
 <ng-template #topNavbar>
     <navbar layout="horizontal"
-            class="top-navbar" fxHide fxShow.gt-md
+            class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
-            [ngClass]="fuseConfig.layout.navbar.background"
+            fxHide fxShow.gt-md
             *ngIf="!fuseConfig.layout.navbar.hidden">
     </navbar>
 </ng-template>
@@ -93,9 +93,8 @@
 <ng-template #leftNavbar>
     <fuse-sidebar [name]="'navbar'"
                   [folded]="fuseConfig.layout.navbar.folded"
-                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar layout="vertical"></navbar>
+        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->

src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html

@@ -96,9 +96,8 @@
     <fuse-sidebar [name]="'navbar'"
                   [folded]="fuseConfig.layout.navbar.folded"
                   [lockedOpen]="'gt-md'"
-                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar layout="vertical"></navbar>
+        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -108,9 +107,8 @@
     <fuse-sidebar [name]="'navbar'" position="right"
                   [folded]="fuseConfig.layout.navbar.folded"
                   [lockedOpen]="'gt-md'"
-                  class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar layout="vertical"></navbar>
+        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html

@@ -96,9 +96,8 @@
     <fuse-sidebar [name]="'navbar'"
                   [folded]="fuseConfig.layout.navbar.folded"
                   [lockedOpen]="'gt-md'"
-                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar layout="vertical"></navbar>
+        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -108,9 +107,8 @@
     <fuse-sidebar [name]="'navbar'" position="right"
                   [folded]="fuseConfig.layout.navbar.folded"
                   [lockedOpen]="'gt-md'"
-                  class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar layout="vertical"></navbar>
+        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -82,9 +82,8 @@
     <fuse-sidebar [name]="'navbar'"
                   [folded]="fuseConfig.layout.navbar.folded"
                   [lockedOpen]="'gt-md'"
-                  class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar layout="vertical"></navbar>
+        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -94,9 +93,8 @@
     <fuse-sidebar [name]="'navbar'" position="right"
                   [folded]="fuseConfig.layout.navbar.folded"
                   [lockedOpen]="'gt-md'"
-                  class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar layout="vertical"></navbar>
+        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->