fix(daffio): use new sidebar implementation

apps/daffio/src/app/api/api-routing.module.ts

@@ -17,7 +17,7 @@ export const apiRoutes: Routes = [
       reference: DaffioApiListResolver,
     },
     data: {
-      sidebarMode: 'side',
+      sidebarMode: 'side-fixed',
     },
   },
   {
@@ -27,7 +27,7 @@ export const apiRoutes: Routes = [
       doc: DocsResolver,
     },
     data: {
-      sidebarMode: 'side',
+      sidebarMode: 'side-fixed',
     },
   },
 ];

apps/daffio/src/app/core/header/components/header/header.component.scss

@@ -4,6 +4,9 @@
 :host {
   $root: '.daffio-header';
   display: block;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 
   ::ng-deep {
     #{$root}__item {

apps/daffio/src/app/core/sidebar/actions/sidebar.actions.ts

@@ -6,6 +6,7 @@ export enum SidebarActionTypes {
   ToggleSidebarAction = '[Daffio-Sidebar] Toggle Sidebar Action',
   OpenSidebarAction = '[Daffio-Sidebar] Open Sidebar Action',
   CloseSidebarAction = '[Daffio-Sidebar] Close Sidebar Action',
+  SetSidebarVisibilityAction = '[Daffio-Sidebar] Set Sidebar Visibility Action',
   SetSidebarStateAction = '[Daffio-Sidebar] Set Sidebar State Action',
   SetSidebarModeAction = '[Daffio-Sidebar] Set Sidebar Mode Action',
   ResetModeAction = '[Daffio-Sidebar] Reset Mode Action'
@@ -23,10 +24,16 @@ export class CloseSidebar implements Action {
   readonly type = SidebarActionTypes.CloseSidebarAction;
 }
 
+export class SetSidebarVisibility implements Action {
+  readonly type = SidebarActionTypes.SetSidebarVisibilityAction;
+
+  constructor(public payload: boolean){}
+}
+
 export class SetSidebarState implements Action {
   readonly type = SidebarActionTypes.SetSidebarStateAction;
 
-  constructor(public payload: boolean){}
+  constructor(public payload: { mode?: DaffSidebarMode; open?: boolean }){}
 }
 
 export class SetSidebarMode implements Action {
@@ -44,6 +51,7 @@ export type SidebarActions =
     | ToggleSidebar
     | OpenSidebar
     | CloseSidebar
+    | SetSidebarVisibility
     | SetSidebarState
     | SetSidebarMode
     | ResetMode;

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html

@@ -1,8 +1,11 @@
-<daff-sidebar-viewport (backdropClicked)="close()" [mode]="mode$ | async" [opened]="showSidebar$ | async">
-  <daff-sidebar class="daffio-sidebar" (escapePressed)="close()">
+<daff-sidebar-viewport (backdropClicked)="close()">
+  <daff-sidebar class="daffio-sidebar" [mode]="mode$ | async" [open]="showSidebar$ | async" (escapePressed)="close()">
     <button type="button" daff-button class="daffio-sidebar__button">Get Started</button>
 		<daffio-guides-nav-tree [guideList]="sidebarContents$ | async"></daffio-guides-nav-tree>
     <a routerLink="/api">API Index</a>
   </daff-sidebar>
+  <ng-container daff-sidebar-viewport-nav>
+    <ng-content select="[daff-sidebar-viewport-nav]"></ng-content>
+  </ng-container>
   <ng-content></ng-content>
 </daff-sidebar-viewport>

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts

@@ -72,8 +72,8 @@ describe('DaffioSidebarViewportContainer', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should set the `daff-sidebar-viewport` mode to the default initialState (push)', () => {
-    expect(daffSidebarViewport.mode).toEqual('push');
+  it('should set the `daff-sidebar` mode to the default initialState (push)', () => {
+    expect(daffSidebar.mode).toEqual('under');
   });
 
   describe('when the `daff-sidebar-viewport` emits `backdropClicked`', () => {
@@ -124,7 +124,7 @@ describe('DaffioSidebarViewportContainer', () => {
       it('should call store.dispatch with a SetSidebarAction action', () => {
         component.setVisibility(true);
 
-        expect(store.dispatch).toHaveBeenCalledWith(new SetSidebarState(true));
+        expect(store.dispatch).toHaveBeenCalledWith(new SetSidebarState({ open: true }));
       });
     });
   });

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts

@@ -50,6 +50,6 @@ export class DaffioSidebarViewportContainer implements OnInit{
   }
 
   setVisibility(state: boolean) {
-    this.store.dispatch(new SetSidebarState(state));
+    this.store.dispatch(new SetSidebarState({ open: state }));
   }
 }

apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effects.ts

@@ -24,7 +24,10 @@ import {
   tap,
 } from 'rxjs/operators';
 
-import { DaffBreakpoints } from '@daffodil/design';
+import {
+  DaffBreakpoints,
+  DaffSidebarModeEnum,
+} from '@daffodil/design';
 
 import * as SidebarActions from '../actions/sidebar.actions';
 import { computeDeepestSidebarMode } from '../helpers/computeDeepestSidebarMode';
@@ -45,9 +48,9 @@ export class DaffioSidebarRoutingModeEffects {
     map(([action, state]) => {
       const mode = computeDeepestSidebarMode(action.payload.routerState.root);
       if(state.matches && mode){
-        return new SidebarActions.SetSidebarMode(mode);
+        return new SidebarActions.SetSidebarState({ mode, open: mode === DaffSidebarModeEnum.SideFixed ? true : false });
       } else {
-        return new SidebarActions.ResetMode();
+        return new SidebarActions.SetSidebarState({ mode: 'under', open: false });
       }
     }),
   ));

apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.spec.ts

@@ -68,7 +68,7 @@ describe('Sidebar | Sidebar Reducer', () => {
   describe('when SetSidebarState is triggered', () => {
     it('sets showSidebar to actions payload', () => {
       const stubShowSidebar = true;
-      const action = new SetSidebarState(stubShowSidebar);
+      const action = new SetSidebarState({ open: stubShowSidebar });
       const result = reducer(initialState, action);
       expect(result.showSidebar).toEqual(stubShowSidebar);
     });

apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.ts

@@ -12,7 +12,7 @@ export interface State {
 
 export const initialState: State = {
   showSidebar: false,
-  mode: 'push',
+  mode: 'under',
 };
 
 export function reducer(state = initialState, action: SidebarActions): State {
@@ -23,8 +23,14 @@ export function reducer(state = initialState, action: SidebarActions): State {
       return { ...state, showSidebar: false };
     case SidebarActionTypes.OpenSidebarAction:
       return { ...state, showSidebar: true };
-    case SidebarActionTypes.SetSidebarStateAction:
+    case SidebarActionTypes.SetSidebarVisibilityAction:
       return { ...state, showSidebar: action.payload };
+    case SidebarActionTypes.SetSidebarStateAction:
+      return {
+        ...state,
+        mode: action.payload?.mode ?? state.mode,
+        showSidebar: action.payload?.open ?? state.showSidebar,
+      };
     case SidebarActionTypes.SetSidebarModeAction:
       return { ...state, mode: action.payload };
     case SidebarActionTypes.ResetModeAction:

apps/daffio/src/app/core/sidebar/sidebar.state.module.ts

@@ -3,13 +3,12 @@ import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 
 import { DaffioSidebarRoutingModeEffects } from './effects/sidebar-routing-mode.effects';
-import { DaffioSidebarEffects } from './effects/sidebar.effects';
 import { reducers } from './reducers/index';
 
 @NgModule({
   imports: [
     StoreModule.forFeature('daffioSidebar', reducers),
-    EffectsModule.forFeature([DaffioSidebarEffects, DaffioSidebarRoutingModeEffects]),
+    EffectsModule.forFeature([DaffioSidebarRoutingModeEffects]),
   ],
 })
 export class DaffioSidebarStateModule { }

apps/daffio/src/app/core/template/template.component.html

@@ -1,5 +1,5 @@
-<daffio-header-container></daffio-header-container>
 <daffio-sidebar-viewport-container>
+    <daffio-header-container daff-sidebar-viewport-nav></daffio-header-container>
     <router-outlet></router-outlet>
     <daffio-sub-footer></daffio-sub-footer>
     <daffio-simple-footer></daffio-simple-footer>

apps/daffio/src/app/guides/guides-routing.module.ts

@@ -15,7 +15,7 @@ export const docsRoutes: Routes = [
       doc: DocsResolver,
     },
     data: {
-      sidebarMode: 'side',
+      sidebarMode: 'side-fixed',
     },
   },
 ];

apps/daffio/src/scss/styles.scss

@@ -30,3 +30,8 @@
 	background: var(--daff-base-background);
 	color: var(--daff-base-text);
 }
+
+
+body {
+	--daff-sidebar-side-fixed-top-shift: 64px;
+}