feat(daffio): create packages sidebar

apps/daffio/package.json

@@ -39,6 +39,7 @@
     "@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
     "@daffodil/design": "0.0.0-PLACEHOLDER",
     "@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER",
-    "@daffodil/theme-switch": "0.0.0-PLACEHOLDER"
+    "@daffodil/theme-switch": "0.0.0-PLACEHOLDER",
+    "@ngrx/component": "0.0.0-PLACEHOLDER"
   }
 }

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

@@ -13,6 +13,7 @@ import { DaffioMarketingSidebarContentComponent } from './core/sidebar/component
 import { DaffioSidebarFooterComponent } from './core/sidebar/components/sidebar-footer/sidebar-footer.component';
 import { DaffioSidebarHeaderComponent } from './core/sidebar/components/sidebar-header/sidebar-header.component';
 import { TemplateComponent } from './core/template/template.component';
+import { DaffioDocsPackagesSidebarComponent } from './guides/components/packages-sidebar/packages-sidebar.component';
 import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum';
 
 export const appRoutes: Routes = [
@@ -36,12 +37,10 @@ export const appRoutes: Routes = [
           },
         },
       },
-
       <DaffRouteWithNamedViews>{
         path: '',
         children: [
           { path: 'api', loadChildren: () => import('./api/api.module').then(m => m.DaffioApiModule) },
-          { path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) },
         ],
         data: {
           daffNamedViews: {
@@ -52,6 +51,18 @@ export const appRoutes: Routes = [
           },
         },
       },
+      <DaffRouteWithNamedViews>{
+        path: '',
+        children: [
+          { path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) },
+        ],
+        data: {
+          daffNamedViews: {
+            [DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer,
+            [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsPackagesSidebarComponent,
+          },
+        },
+      },
     ],
   },
   {

apps/daffio/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/com
 import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module';
 import { DaffioSidebarHeaderComponentModule } from './core/sidebar/components/sidebar-header/sidebar-header.module';
 import { TemplateModule } from './core/template/template.module';
+import { DaffioDocsPackagesSidebarComponentModule } from './guides/components/packages-sidebar/packages-sidebar.module';
 import { environment } from '../environments/environment';
 
 @NgModule({
@@ -40,6 +41,7 @@ import { environment } from '../environments/environment';
     DaffioDocsSidebarContentComponentModule,
     DaffioSidebarHeaderComponentModule,
     DaffioSidebarFooterComponentModule,
+    DaffioDocsPackagesSidebarComponentModule,
 
     //Make sure this loads after Router and Store
     StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer,

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

@@ -14,10 +14,14 @@ export enum SidebarActionTypes {
 
 export class ToggleSidebar implements Action {
   readonly type = SidebarActionTypes.ToggleSidebarAction;
+
+  constructor(public payload?: string ){}
 }
 
 export class OpenSidebar implements Action {
   readonly type = SidebarActionTypes.OpenSidebarAction;
+
+  constructor(public payload?: string){}
 }
 
 export class CloseSidebar implements Action {
@@ -33,7 +37,7 @@ export class SetSidebarVisibility implements Action {
 export class SetSidebarState implements Action {
   readonly type = SidebarActionTypes.SetSidebarStateAction;
 
-  constructor(public payload: { mode?: DaffSidebarMode; open?: boolean }){}
+  constructor(public payload: { mode?: DaffSidebarMode; open?: boolean; kind?: string }){}
 }
 
 export class SetSidebarMode implements Action {

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

@@ -40,6 +40,11 @@ export const selectShowSidebar: MemoizedSelector<Record<string, any>, boolean> =
   fromDaffioSidebar.getShowSidebar,
 );
 
+export const selectSidebarKind: MemoizedSelector<Record<string, any>, string> = createSelector(
+  daffioSidebarStateSelector,
+  fromDaffioSidebar.getKind,
+);
+
 export const selectSidebarMode: MemoizedSelector<Record<string, any>, DaffSidebarMode> = createSelector(
   daffioSidebarStateSelector,
   fromDaffioSidebar.getMode,

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

@@ -8,6 +8,7 @@ import {
 export interface State {
   showSidebar: boolean;
   mode: DaffSidebarMode;
+  kind?: string;
 }
 
 export const initialState: State = {
@@ -18,18 +19,18 @@ export const initialState: State = {
 export function reducer(state = initialState, action: SidebarActions): State {
   switch (action.type) {
     case SidebarActionTypes.ToggleSidebarAction:
-      return { ...state, showSidebar: !state.showSidebar };
+      return { ...state, showSidebar: !state.showSidebar, kind: action.payload };
     case SidebarActionTypes.CloseSidebarAction:
       return { ...state, showSidebar: false };
     case SidebarActionTypes.OpenSidebarAction:
-      return { ...state, showSidebar: true };
+      return { ...state, showSidebar: true, kind: action.payload };
     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,
+        showSidebar: action.payload?.open ?? state.showSidebar, kind: action.payload.kind,
       };
     case SidebarActionTypes.SetSidebarModeAction:
       return { ...state, mode: action.payload };
@@ -42,3 +43,4 @@ export function reducer(state = initialState, action: SidebarActions): State {
 
 export const getShowSidebar = (state: State) => state.showSidebar;
 export const getMode = (state: State) => state.mode;
+export const getKind = (state: State) => state.kind;

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

@@ -9,7 +9,7 @@ import { DaffRouterNamedViewOutletModule } from '@daffodil/router';
 
 import { DaffioSidebarViewportContainer } from './containers/sidebar-viewport/sidebar-viewport.component';
 import { DaffioSidebarStateModule } from './sidebar.state.module';
-import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides-nav.module';
+import { DaffioDocsPackagesListContainerModule } from '../../guides/containers/packages-list/packages-list.module';
 
 @NgModule({
   imports: [
@@ -21,7 +21,7 @@ import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides
     DaffButtonModule,
 
     DaffioSidebarStateModule,
-    DaffioGuidesNavModule,
+    DaffioDocsPackagesListContainerModule,
     DaffRouterNamedViewOutletModule,
   ],
   declarations: [

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html

@@ -1,7 +1,7 @@
-<!-- <button class="daffio-doc-viewer__packages-button">
+<button class="daffio-doc-viewer__packages-button" (click)="open()">
 	<fa-icon [icon]="faBars"></fa-icon>
 	<div>Packages Menu</div>
-</button> -->
+</button>
 <div class="daffio-doc-viewer__grid">
 	<daff-article
 		class="daffio-doc-viewer__content"

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts

@@ -9,7 +9,9 @@ import {
   SafeHtml,
 } from '@angular/platform-browser';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { Store } from '@ngrx/store';
 
+import { ToggleSidebar } from '../../../core/sidebar/actions/sidebar.actions';
 import { DaffioDoc } from '../../models/doc';
 
 @Component({
@@ -21,7 +23,7 @@ import { DaffioDoc } from '../../models/doc';
 export class DaffioDocViewerComponent implements OnChanges {
   faBars = faBars;
 
-  constructor(private sanitizer: DomSanitizer) {}
+  constructor(private sanitizer: DomSanitizer, private store: Store<any>) {}
 
   /**
    * The doc to render
@@ -34,4 +36,8 @@ export class DaffioDocViewerComponent implements OnChanges {
 	  //It is necessary to bypass the default angular sanitization to keep id tags in the injected html. These id tags are used for fragment routing.
 	  this.sanitizedContent = this.sanitizer.bypassSecurityTrustHtml(this.doc.contents);
   }
+
+  open() {
+    this.store.dispatch(new ToggleSidebar('content'));
+  }
 }

apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.spec.ts → apps/daffio/src/app/guides/components/packages-list/packages-list.component.spec.ts

@@ -9,16 +9,16 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { DaffTreeModule } from '@daffodil/design/tree';
 
-import { DaffioGuidesNavComponent } from './guides-nav.component';
+import { DaffioDocsPackagesListComponent } from './packages-list.component';
 
-describe('DaffioGuidesNavComponent', () => {
-  let component: DaffioGuidesNavComponent;
-  let fixture: ComponentFixture<DaffioGuidesNavComponent>;
+describe('DaffioDocsPackagesListComponent', () => {
+  let component: DaffioDocsPackagesListComponent;
+  let fixture: ComponentFixture<DaffioDocsPackagesListComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        DaffioGuidesNavComponent,
+        DaffioDocsPackagesListComponent,
       ],
       imports: [
         RouterTestingModule,
@@ -30,7 +30,7 @@ describe('DaffioGuidesNavComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DaffioGuidesNavComponent);
+    fixture = TestBed.createComponent(DaffioDocsPackagesListComponent);
     component = fixture.componentInstance;
     const guideWithoutChildren = {
       id: 'id2',

apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.ts → apps/daffio/src/app/guides/components/packages-list/packages-list.component.ts

@@ -21,11 +21,11 @@ const visit = (guide: DaffioGuideList): DaffTreeData<unknown> => ({
 });
 
 @Component({
-  selector: 'daffio-guides-nav',
-  templateUrl: './guides-nav.component.html',
+  selector: 'daffio-docs-packages-list',
+  templateUrl: './packages-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffioGuidesNavComponent {
+export class DaffioDocsPackagesListComponent {
 
   _guideList: DaffioGuideList;
   /**