feat(settings): redesign setting sidebar (#1982)

Author: V-Ahmetvaliev

src/app/@theme/components/header/header.component.html

@@ -14,7 +14,6 @@
     size="medium"
     [class.right]="position === 'normal'"
     [class.left]="position === 'inverse'">
-    <nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
     <nb-action *nbIsGranted="['view', 'user']" >
       <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
     </nb-action>

src/app/@theme/components/header/header.component.scss

@@ -94,7 +94,7 @@
     }
   }
 
-  .toggle-layout /deep/ a {
+  .toggle-settings /deep/ a {
     display: block;
     text-decoration: none;
     line-height: 1;
@@ -155,15 +155,15 @@
 
   @include media-breakpoint-down(md) {
 
-    nb-action:not(.toggle-layout) {
+    nb-action:not(.toggle-settings) {
       border: none;
     }
 
     .control-item {
       display: none;
     }
 
-    .toggle-layout {
+    .toggle-settings {
       padding: 0;
     }
 
@@ -191,15 +191,15 @@
       }
     }
 
-    .toggle-layout {
+    .toggle-settings {
       display: none;
     }
 
     ngx-theme-switcher {
       display: none;
     }
 
-    nb-action:not(.toggle-layout) {
+    nb-action:not(.toggle-settings) {
       padding: 0;
     }
   }

src/app/@theme/components/index.ts

@@ -7,3 +7,4 @@ export * from './theme-switcher/theme-switcher.component';
 export * from './switcher/switcher.component';
 export * from './layout-direction-switcher/layout-direction-switcher.component';
 export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
+export * from './toggle-settings-button/toggle-settings-button.component';

src/app/@theme/components/theme-settings/theme-settings.component.scss

@@ -2,30 +2,45 @@
 
 @include nb-install-component() {
   h6 {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.875rem;
+    text-align: center;
+    font-weight: bold;
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
   }
 
   .settings-row {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     flex-wrap: wrap;
-
-    width: 90%;
-    margin: 0 0 1rem;
+    width: 100%;
+    margin: 0 0 2.575rem;
 
     a {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      align-items: center;
+      width: 4.15rem;
+      height: 4.15rem;
+      border-radius: nb-theme(radius);
+      background-color: nb-theme(color-white);
+      border: 2px solid transparent;
+      margin: 0.875rem;
       text-decoration: none;
       font-size: 2.25rem;
-
       color: nb-theme(color-fg);
 
       &.selected {
         color: nb-theme(color-success);
+        border-color: nb-theme(color-success);
       }
 
       @include nb-for-theme(cosmic) {
+        box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
+        background-color: #3e367e;
+        border: 2px solid #3e367e;
         &.selected {
           color: nb-theme(link-color);
         }
@@ -39,11 +54,16 @@
 
   .switcher {
     margin-bottom: 1rem;
+    font-size: 1.524rem;
+    width: 12rem;
 
     /deep/ ngx-switcher {
       .switch-label span {
         font-size: 1em;
         font-weight: normal;
+        &.first, &.second {
+          font-size: 1rem;
+        }
       }
 
       .switch {
@@ -56,8 +76,8 @@
         }
 
         input:checked + .slider::before {
-          @include nb-ltr(transform, translateX(1.5rem)!important);
-          @include nb-rtl(transform, translateX(-1.5rem)!important);
+          @include nb-ltr(transform, translateX(1.5em)!important);
+          @include nb-rtl(transform, translateX(-1.5em)!important);
         }
       }
 

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -26,8 +26,10 @@ import { StateService } from '../../../@core/utils';
         <i [attr.class]="sidebar.icon"></i>
       </a>
     </div>
-    <div class="switcher">
-      <ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
+    <div class="settings-row">
+      <div class="switcher">
+        <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
+      </div>
     </div>
   `,
 })

src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss

@@ -0,0 +1,97 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .toggle-settings {
+    position: fixed;
+    top: 50%;
+    height: 8.575rem;
+    width: 8.575rem;
+    border: none;
+    transition: transform 0.3s ease, background-image 0.3s ease;
+    transform: translate(0, -50%);
+    z-index: 998;
+
+    @include nb-ltr() {
+      border-top-left-radius: nb-theme(radius);
+      border-bottom-left-radius: nb-theme(radius);
+      right: 0;
+
+      &.sidebarEnd {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        right: auto;
+        border-top-right-radius: nb-theme(radius);
+        border-bottom-right-radius: nb-theme(radius);
+        left: 0;
+      }
+    }
+
+    @include nb-rtl() {
+      border-top-right-radius: nb-theme(radius);
+      border-bottom-right-radius: nb-theme(radius);
+      left: 0;
+
+      &.sidebarEnd {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        left: auto;
+        border-top-left-radius: nb-theme(radius);
+        border-bottom-left-radius: nb-theme(radius);
+        right: 0;
+      }
+    }
+
+    &.expanded {
+      @include nb-ltr(transform, translate(-19rem, -50%));
+      @include nb-rtl(transform, translate(19rem, -50%));
+
+      &.sidebarEnd {
+        @include nb-rtl(transform, translate(-19rem, -50%));
+        @include nb-ltr(transform, translate(19rem, -50%));
+      }
+    }
+
+    @include nb-for-theme(cosmic) {
+      box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
+      background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%);
+
+      &.expanded {
+        background-image: linear-gradient(to right, #2f296b 0%, #2f296b 100%);
+      }
+    }
+
+    @include nb-for-theme(default) {
+      border: 1px solid #d5dbe0;
+      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
+      background-color: #ffffff;
+    }
+
+    @include nb-for-theme(corporate) {
+      border: 1px solid #d5dbe0;
+      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
+      color: nb-theme(color-danger);
+      background-color: #ffffff;
+    }
+
+    i {
+      font-size: 6rem;
+      color: #ffffff;
+
+      @include nb-for-theme(default) {
+        color: nb-theme(color-danger);
+      }
+
+      @include nb-for-theme(corporate) {
+        color: nb-theme(color-warning);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .toggle-settings {
+      display: none;
+    }
+  }
+}

src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { NbSidebarService } from '@nebular/theme';
+import { StateService } from '../../../@core/utils';
+
+@Component({
+  selector: 'ngx-toggle-settings-button',
+  styleUrls: ['./toggle-settings-button.component.scss'],
+  template: `
+    <button class="toggle-settings"
+            (click)="toggleSettings()"
+            [class.expanded]="expanded"
+            [class.sidebarEnd]="sidebarEnd">
+      <i class="nb-gear"></i>
+    </button>
+  `,
+})
+export class ToggleSettingsButtonComponent {
+
+  sidebarEnd = false;
+  expanded = false;
+
+  constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
+    this.stateService.onSidebarState()
+      .subscribe(({id}) => {
+        this.sidebarEnd = id === 'end';
+      });
+  }
+
+  toggleSettings() {
+    this.sidebarService.toggle(false, 'settings-sidebar');
+    this.expanded = !this.expanded;
+  }
+}

src/app/@theme/layouts/sample/sample.layout.scss

@@ -8,23 +8,25 @@
   }
 
   nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
+    $sidebar-width: 19rem;
 
-    transition: width 0.3s ease;
+    transition: transform 0.3s ease;
     width: $sidebar-width;
     overflow: hidden;
+    @include nb-ltr(transform, translateX(100%));
+    @include nb-rtl(transform, translateX(-100%));
+    &.start {
+      @include nb-ltr(transform, translateX(-100%));
+      @include nb-rtl(transform, translateX(100%));
+    }
 
-    &.collapsed {
-      width: 0;
-
-      /deep/ .main-container {
-        width: 0;
+    &.expanded, &.expanded.start {
+      transform: translateX(0);
+    }
 
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
+    /deep/ .scrollable {
+      width: $sidebar-width;
+      padding: 3.4rem 0.25rem;
     }
 
     /deep/ .main-container {
@@ -106,6 +108,22 @@
     }
 
     /deep/ nb-menu {
+      & > .menu-items {
+        & > .menu-item:first-child {
+          .menu-title {
+            &::after {
+              content: 'new';
+              color: nb-theme(color-white);
+              margin-left: 1rem;
+              background: nb-theme(color-danger);
+              padding: 0 0.5rem;
+              border-radius: nb-theme(radius);
+              font-size: nb-theme(font-size-sm);
+            }
+          }
+        }
+      }
+
       .nb-e-commerce {
         font-size: 2rem;
       }

src/app/@theme/layouts/sample/sample.layout.ts

@@ -9,7 +9,7 @@ import {
   NbThemeService,
 } from '@nebular/theme';
 
-import { StateService } from '../../../@core/utils/state.service';
+import { StateService } from '../../../@core/utils';
 
 // TODO: move layouts into the framework
 @Component({
@@ -57,6 +57,7 @@ import { StateService } from '../../../@core/utils/state.service';
         <ngx-theme-settings></ngx-theme-settings>
       </nb-sidebar>
     </nb-layout>
+    <ngx-toggle-settings-button></ngx-toggle-settings-button>
   `,
 })
 export class SampleLayoutComponent implements OnDestroy {

src/app/@theme/theme.module.ts

@@ -50,6 +50,7 @@ import {
   ThemeSwitcherComponent,
   TinyMCEComponent,
   ThemeSwitcherListComponent,
+  ToggleSettingsButtonComponent,
 } from './components';
 import {
   CapitalizePipe,
@@ -121,6 +122,7 @@ const COMPONENTS = [
   SampleLayoutComponent,
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,
+  ToggleSettingsButtonComponent,
 ];
 
 const ENTRY_COMPONENTS = [

src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss

@@ -21,6 +21,10 @@
     }
   }
 
+  /deep/ .leaflet-top, /deep/ .leaflet-bottom {
+    z-index: 997;
+  }
+
   /deep/ .leaflet-bar {
     box-shadow: none;
   }

src/app/pages/maps/leaflet/leaflet.component.scss

@@ -6,6 +6,10 @@
     padding: 0;
   }
 
+  /deep/ .leaflet-top, /deep/ .leaflet-bottom {
+    z-index: 997;
+  }
+
   /deep/ .leaflet-container {
     width: 100%;
     height: nb-theme(card-height-large);