-
+
`,
})
diff --git a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
new file mode 100644
index 0000000000..a872c2c117
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
new file mode 100644
index 0000000000..b44909499f
--- /dev/null
+++ b/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: `
+
+ `,
+})
+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;
+ }
+}
diff --git a/src/app/@theme/layouts/sample/sample.layout.scss b/src/app/@theme/layouts/sample/sample.layout.scss
index 0249988768..ac70a3e3b8 100644
--- a/src/app/@theme/layouts/sample/sample.layout.scss
+++ b/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;
}
diff --git a/src/app/@theme/layouts/sample/sample.layout.ts b/src/app/@theme/layouts/sample/sample.layout.ts
index 297fdec229..22a4275cf2 100644
--- a/src/app/@theme/layouts/sample/sample.layout.ts
+++ b/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';
+
`,
})
export class SampleLayoutComponent implements OnDestroy {
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index 9cba96f3e2..4d967c9e8f 100644
--- a/src/app/@theme/theme.module.ts
+++ b/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 = [
diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
index 2dd905c81f..0361b33f63 100644
--- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
+++ b/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;
}
diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss
index 2d6a821698..5a46781ea2 100644
--- a/src/app/pages/maps/leaflet/leaflet.component.scss
+++ b/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);