fixed sidebar set-off

src/app/+admin/admin-sidebar/admin-sidebar.component.html

@@ -1,4 +1,4 @@
-<nav  @slideHorizontal class="navbar navbar-dark bg-dark p-0"
+<nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
      value: ((menuCollapsed | async) ? 'collapsed' : 'expanded'),

src/app/+admin/admin-sidebar/admin-sidebar.component.scss

@@ -3,7 +3,6 @@
 $icon-z-index: 10;
 
 :host {
-    position: sticky;
     left: 0;
     top: 0;
     height: 100vh;
@@ -51,8 +50,8 @@ $icon-z-index: 10;
                         padding-bottom: $spacer;
                     }
                     .shortcut-icon {
-                        padding-left: $spacer;
+                        padding-left: $icon-padding;
-                        padding-right: $spacer;
+                        padding-right: $icon-padding;
                     }
                     .shortcut-icon, .icon-wrapper {
                         background-color: inherit;

src/app/+admin/admin-sidebar/admin-sidebar.component.ts

@@ -8,6 +8,7 @@ import { MenuComponent } from '../../shared/menu/menu.component';
 import { TextSectionTypeModel } from '../../shared/menu/models/section-types/text.model';
 import { LinkSectionTypeModel } from '../../shared/menu/models/section-types/link.model';
 import { AuthService } from '../../core/auth/auth.service';
+import { first } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-admin-sidebar',
@@ -39,6 +40,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
           this.menuService.showMenu(this.menuID);
         }
       });
+    this.menuCollapsed.pipe(first())
+      .subscribe((collapsed: boolean) => {
+        this.sidebarOpen = !collapsed;
+        this.sidebarClosed = collapsed;
+      })
   }
 
   createMenu() {

src/app/app.component.html

@@ -1,22 +1,22 @@
 <div class="outer-wrapper">
-  <ds-admin-sidebar></ds-admin-sidebar>
+    <ds-admin-sidebar></ds-admin-sidebar>
+    <div class="inner-wrapper"  [@slideSidebarMargin]="{
+     value: ((hasAdminSidebar | async) ? 'expanded' : 'collapsed'),
+     params: {collapsedSidebarWidth: (collapsedSidebarWidth | async)}
+    }">
+        <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
 
-  <div class="inner-wrapper">
+        <ds-notifications-board
-    <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
+                [options]="config.notifications">
+        </ds-notifications-board>
 
-    <ds-notifications-board
+        <main class="main-content">
-      [options]="config.notifications">
+            <div class="container" *ngIf="isLoading">
-    </ds-notifications-board>
+                <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
+            </div>
+            <router-outlet></router-outlet>
+        </main>
 
-    <main class="main-content">
+        <ds-footer></ds-footer>
-      <div class="container" *ngIf="isLoading">
+    </div>
-        <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
-      </div>
-      <router-outlet></router-outlet>
-    </main>
-
-    <ds-footer></ds-footer>
-  </div>
 </div>
-
-

src/app/app.component.scss

@@ -11,8 +11,8 @@ html {
 body {
   overflow-x: hidden;
 }
-// Sticky Footer
 
+// Sticky Footer
 .outer-wrapper {
   display: flex;
   margin: 0;
@@ -39,5 +39,7 @@ ds-header-navbar-wrapper {
 }
 
 ds-admin-sidebar {
+  position: absolute;
   z-index: $sidebar-z-index;
 }
+

src/app/app.component.ts

@@ -25,16 +25,23 @@ import { AuthService } from './core/auth/auth.service';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 import variables from '../styles/_exposed_variables.scss';
 import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { MenuService } from './shared/menu/menu.service';
+import { MenuID } from './shared/menu/initial-menus-state';
+import { Observable } from 'rxjs/internal/Observable';
+import { slideSidebarMargin } from './shared/animations/slide';
 
 @Component({
   selector: 'ds-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  animations: [slideSidebarMargin]
 })
 export class AppComponent implements OnInit, AfterViewInit {
   isLoading = true;
+  hasAdminSidebar: Observable<boolean>;
+  collapsedSidebarWidth: Observable<string>;
 
   constructor(
     @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
@@ -45,7 +52,8 @@ export class AppComponent implements OnInit, AfterViewInit {
     private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
     private authService: AuthService,
     private router: Router,
-    private cssService: CSSVariableService
+    private cssService: CSSVariableService,
+    private menuService: MenuService
   ) {
     // this language will be used as a fallback when a translation isn't found in the current language
     translate.setDefaultLang('en');
@@ -72,6 +80,9 @@ export class AppComponent implements OnInit, AfterViewInit {
       first(),
       filter((authenticated) => !authenticated)
     ).subscribe((authenticated) => this.authService.checkAuthenticationToken());
+    this.hasAdminSidebar = this.menuService.isMenuVisible(MenuID.ADMIN);
+
+    this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth');
   }
 
   private storeCSSVariables() {

src/app/shared/animations/slide.ts

@@ -58,3 +58,9 @@ export const slideSidebar = trigger('slideSidebar', [
       ]
     ))
 ]);
+
+export const slideSidebarMargin = trigger('slideSidebarMargin', [
+  state('collapsed', style({ marginLeft: 0 })),
+  state('expanded', style({ marginLeft: '{{ collapsedSidebarWidth }}' }), { params: { collapsedSidebarWidth: '*' } }),
+  transition('collapsed <=> expanded', [animate('200ms')]),
+]);

src/app/shared/menu/initial-menus-state.ts

@@ -13,7 +13,7 @@ export const initialMenusState: MenusState = {
   [MenuID.ADMIN]:
     {
       id: MenuID.ADMIN,
-      collapsed: false,
+      collapsed: true,
       visible: false,
       sections: {},
       sectionToSubsectionIndex: {}

src/styles/_bootstrap_variables.scss

@@ -1,7 +1,13 @@
+/** Help Variables **/
+$fa-fixed-width: 1.25rem;
+$icon-padding: 1rem;
+$collapsed-sidebar-width: calculatePx($fa-fixed-width + (2 * $icon-padding));
 /* Fonts */
 $fa-font-path: "../assets/fonts";
 /* Images */
 $image-path: "../assets/images";
+
+/** Bootstrap Variables **/
 /* Colors */
 $gray-base: #000 !default;
 $gray-900: lighten($gray-base, 13.5%) !default; // #222
@@ -10,6 +16,7 @@ $gray-700: lighten($gray-base, 46.6%) !default; // #777
 $gray-600: lighten($gray-base, 73.3%) !default; // #bbb
 $gray-100: lighten($gray-base, 93.5%) !default; // #eee
 
+
 /* Reassign color vars to semantic color scheme */
 $blue:      #2B4E72 !default;
 $green: #94BA65 !default;
@@ -37,3 +44,12 @@ $navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3C
 $navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
 
 $enable-shadows: true !default;
+
+$grid-breakpoints: (
+        xs: 0,
+        sm: (576px - $collapsed-sidebar-width),
+        md: (768px - $collapsed-sidebar-width),
+        lg: (992px - $collapsed-sidebar-width),
+        xl: (1200px - $collapsed-sidebar-width)
+) !default;
+

src/styles/_exposed_variables.scss

@@ -7,4 +7,5 @@
     lgMin: map-get($grid-breakpoints, lg);
     smMin: map-get($grid-breakpoints, sm);
     adminSidebarActiveBg: $admin-sidebar-active-bg;
+    collapsedSidebarWidth: $collapsed-sidebar-width;
 }

src/styles/_functions.scss

@@ -3,10 +3,16 @@
     @return $remSize;
 }
 
+
 @function strip-unit($number) {
     @if type-of($number) == 'number' and not unitless($number) {
         @return $number / ($number * 0 + 1);
     }
-
     @return $number;
 }
+
+
+@function calculatePx($size) {
+    $pxSize: strip-unit($size) * 16px;
+    @return $pxSize;
+}

src/styles/_variables.scss

@@ -1,5 +1,5 @@
-@import 'bootstrap_variables.scss';
-@import '../../node_modules/bootstrap/scss/functions.scss';
-@import '../../node_modules/bootstrap/scss/variables.scss';
 @import '_functions.scss';
+@import '../../node_modules/bootstrap/scss/functions.scss';
+@import 'bootstrap_variables.scss';
+@import '../../node_modules/bootstrap/scss/variables.scss';
 @import 'custom_variables.scss';