diff --git a/apps/daffio/package.json b/apps/daffio/package.json
index dbeb728c0c..e1dc5875a4 100644
--- a/apps/daffio/package.json
+++ b/apps/daffio/package.json
@@ -38,6 +38,7 @@
"@daffodil/core": "0.0.0-PLACEHOLDER",
"@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
"@daffodil/design": "0.0.0-PLACEHOLDER",
+ "@daffodil/router": "0.0.0-PLACEHOLDER",
"@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER",
"@daffodil/theme-switch": "0.0.0-PLACEHOLDER"
}
diff --git a/apps/daffio/src/app/api/api.module.ts b/apps/daffio/src/app/api/api.module.ts
index e0ca3df2af..8f126ce51e 100644
--- a/apps/daffio/src/app/api/api.module.ts
+++ b/apps/daffio/src/app/api/api.module.ts
@@ -9,7 +9,6 @@ import { DaffioApiListModule } from './components/api-list/api-list.module';
import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module';
-import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.module';
@NgModule({
imports: [
@@ -18,7 +17,6 @@ import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.modu
DaffioDocsApiRoutingModule,
DaffioApiListModule,
DaffioDocViewerModule,
- DaffioDocsSidebarModule,
DaffContainerModule,
],
diff --git a/apps/daffio/src/app/app-routing.module.ts b/apps/daffio/src/app/app-routing.module.ts
index 34e335c483..fec141d8a7 100644
--- a/apps/daffio/src/app/app-routing.module.ts
+++ b/apps/daffio/src/app/app-routing.module.ts
@@ -8,8 +8,10 @@ import { DaffRouteWithNamedViews } from '@daffodil/router';
import { DaffioDocsHeaderContainer } from './core/header/containers/docs-header/docs-header.component';
import { DaffioMarketingHeaderContainer } from './core/header/containers/marketing-header/marketing-header.component';
-import { DaffioDocsSidebarComponent } from './core/sidebar/components/docs-sidebar/docs-sidebar.component';
-import { DaffioMarketingSidebarComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.component';
+import { DaffioDocsSidebarContentComponent } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component';
+import { DaffioMarketingSidebarContentComponent } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.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 { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum';
@@ -28,7 +30,9 @@ export const appRoutes: Routes = [
data: {
daffNamedViews: {
[DaffioRouterNamedViewsEnum.NAV]: DaffioMarketingHeaderContainer,
- [DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioMarketingSidebarComponent,
+ [DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent,
+ [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioMarketingSidebarContentComponent,
+ [DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent,
},
},
},
@@ -42,7 +46,9 @@ export const appRoutes: Routes = [
data: {
daffNamedViews: {
[DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer,
- [DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioDocsSidebarComponent,
+ [DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent,
+ [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsSidebarContentComponent,
+ [DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent,
},
},
},
diff --git a/apps/daffio/src/app/app.module.ts b/apps/daffio/src/app/app.module.ts
index b5269d8ec6..dba4fe83bd 100644
--- a/apps/daffio/src/app/app.module.ts
+++ b/apps/daffio/src/app/app.module.ts
@@ -17,8 +17,10 @@ import { AppRoutingModule } from './app-routing.module';
import { DaffioAppComponent } from './app.component';
import { DaffioDocsHeaderContainerModule } from './core/header/containers/docs-header/docs-header.module';
import { DaffioMarketingHeaderContainerModule } from './core/header/containers/marketing-header/marketing-header.module';
-import { DaffioDocsSidebarComponentModule } from './core/sidebar/components/docs-sidebar/docs-sidebar.module';
-import { DaffioMarketingSidebarComponentModule } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.module';
+import { DaffioDocsSidebarContentComponentModule } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module';
+import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module';
+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 { environment } from '../environments/environment';
@@ -34,8 +36,10 @@ import { environment } from '../environments/environment';
AppRoutingModule,
DaffioMarketingHeaderContainerModule,
DaffioDocsHeaderContainerModule,
- DaffioMarketingSidebarComponentModule,
- DaffioDocsSidebarComponentModule,
+ DaffioMarketingSidebarContentComponentModule,
+ DaffioDocsSidebarContentComponentModule,
+ DaffioSidebarHeaderComponentModule,
+ DaffioSidebarFooterComponentModule,
//Make sure this loads after Router and Store
StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer,
diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.html b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.html
similarity index 100%
rename from apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.html
rename to apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.html
diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.scss b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.scss
similarity index 100%
rename from apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.scss
rename to apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.scss
diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.ts b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.ts
similarity index 50%
rename from apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.ts
rename to apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.ts
index 4d7d47c389..61cb96a9cd 100644
--- a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.ts
+++ b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.ts
@@ -4,12 +4,12 @@ import {
} from '@angular/core';
@Component({
- selector: 'daffio-docs-sidebar',
- templateUrl: './docs-sidebar.component.html',
- styleUrls: ['./docs-sidebar.component.scss'],
+ selector: 'daffio-docs-sidebar-content',
+ templateUrl: './docs-sidebar-content.component.html',
+ styleUrls: ['./docs-sidebar-content.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class DaffioDocsSidebarComponent {
+export class DaffioDocsSidebarContentComponent {
links: any[] = [
{ path: '/api', title: 'API Index' },
];
diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module.ts b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module.ts
new file mode 100644
index 0000000000..eb21b48203
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffListModule } from '@daffodil/design/list';
+
+import { DaffioDocsSidebarContentComponent } from './docs-sidebar-content.component';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ RouterModule,
+
+ FontAwesomeModule,
+ DaffListModule,
+ DaffButtonModule,
+ ],
+ declarations: [
+ DaffioDocsSidebarContentComponent,
+ ],
+ exports: [
+ DaffioDocsSidebarContentComponent,
+ ],
+})
+export class DaffioDocsSidebarContentComponentModule { }
diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.html b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component.html
similarity index 100%
rename from apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.html
rename to apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component.html
diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.scss b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component.scss
similarity index 100%
rename from apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.scss
rename to apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component.scss
diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component.ts
similarity index 52%
rename from apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts
rename to apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component.ts
index 5cfe7e5b41..a235a936d6 100644
--- a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts
+++ b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component.ts
@@ -4,12 +4,12 @@ import {
} from '@angular/core';
@Component({
- selector: 'daffio-marketing-sidebar',
- templateUrl: './marketing-sidebar.component.html',
- styleUrls: ['./marketing-sidebar.component.scss'],
+ selector: 'daffio-marketing-sidebar-content',
+ templateUrl: './marketing-sidebar-content.component.html',
+ styleUrls: ['./marketing-sidebar-content.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class DaffioMarketingSidebarComponent {
+export class DaffioMarketingSidebarContentComponent {
links: any[] = [
{ path: '/why-pwa', title: 'Why PWA' },
{ path: '/api', title: 'Docs' },
diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.module.ts b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module.ts
similarity index 57%
rename from apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.module.ts
rename to apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module.ts
index 440ff0ea12..f8329393ae 100644
--- a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.module.ts
+++ b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module.ts
@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
import { DaffListModule } from '@daffodil/design/list';
-import { DaffioDocsSidebarComponent } from './docs-sidebar.component';
+import { DaffioMarketingSidebarContentComponent } from './marketing-sidebar-content.component';
@NgModule({
imports: [
@@ -14,10 +14,10 @@ import { DaffioDocsSidebarComponent } from './docs-sidebar.component';
DaffListModule,
],
declarations: [
- DaffioDocsSidebarComponent,
+ DaffioMarketingSidebarContentComponent,
],
exports: [
- DaffioDocsSidebarComponent,
+ DaffioMarketingSidebarContentComponent,
],
})
-export class DaffioDocsSidebarComponentModule { }
+export class DaffioMarketingSidebarContentComponentModule { }
diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.module.ts b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.module.ts
deleted file mode 100644
index f638623df8..0000000000
--- a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { DaffListModule } from '@daffodil/design/list';
-
-import { DaffioMarketingSidebarComponent } from './marketing-sidebar.component';
-
-@NgModule({
- imports: [
- CommonModule,
- RouterModule,
-
- DaffListModule,
- ],
- declarations: [
- DaffioMarketingSidebarComponent,
- ],
- exports: [
- DaffioMarketingSidebarComponent,
- ],
-})
-export class DaffioMarketingSidebarComponentModule { }
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss
new file mode 100644
index 0000000000..917ef031cf
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss
@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use 'theme' as daff-theme;
+
+@mixin daffio-sidebar-footer-theme($theme) {
+ $gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
+ $base: daff-theme.daff-map-deep-get($theme, 'core.base');
+ $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
+ $primary: map.get($theme, primary);
+
+ .daffio-sidebar-footer {
+ background: daff-theme.daff-illuminate($base, $gray, 2);
+
+ &:hover {
+ background: daff-theme.daff-illuminate($base, $gray, 3);
+ }
+ }
+}
\ No newline at end of file
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.html b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.html
new file mode 100644
index 0000000000..890f088a0b
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss
new file mode 100644
index 0000000000..09002cc534
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss
@@ -0,0 +1,10 @@
+@use 'utilities' as daff;
+
+.daffio-sidebar-footer {
+ @include daff.clickable();
+ display: block;
+ font-weight: 500;
+ padding: 16px;
+ text-align: center;
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.ts b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.ts
new file mode 100644
index 0000000000..d38a64b2e0
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.ts
@@ -0,0 +1,13 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+} from '@angular/core';
+
+@Component({
+ selector: 'daffio-sidebar-footer',
+ templateUrl: './sidebar-footer.component.html',
+ styleUrls: ['./sidebar-footer.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioSidebarFooterComponent {
+}
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.module.ts b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.module.ts
new file mode 100644
index 0000000000..1c1969fb5f
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.module.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DaffioSidebarFooterComponent } from './sidebar-footer.component';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ RouterModule,
+ ],
+ declarations: [
+ DaffioSidebarFooterComponent,
+ ],
+ exports: [
+ DaffioSidebarFooterComponent,
+ ],
+})
+export class DaffioSidebarFooterComponentModule { }
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.html b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.html
new file mode 100644
index 0000000000..5a02f34d39
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.html
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.ts b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.ts
new file mode 100644
index 0000000000..ea70502b2a
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.ts
@@ -0,0 +1,24 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+} from '@angular/core';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Store } from '@ngrx/store';
+
+import { CloseSidebar } from '../../actions/sidebar.actions';
+import * as fromDaffioSidebar from '../../reducers/index';
+
+@Component({
+ selector: 'daffio-sidebar-header',
+ templateUrl: './sidebar-header.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioSidebarHeaderComponent {
+ faTimes = faTimes;
+
+ constructor(private store: Store){}
+
+ close() {
+ this.store.dispatch(new CloseSidebar());
+ }
+}
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.module.ts b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.module.ts
new file mode 100644
index 0000000000..586d96f198
--- /dev/null
+++ b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.module.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffListModule } from '@daffodil/design/list';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
+
+import { DaffioSidebarHeaderComponent } from './sidebar-header.component';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ RouterModule,
+
+ FontAwesomeModule,
+ DaffListModule,
+ DaffButtonModule,
+ DaffSidebarModule,
+ ],
+ declarations: [
+ DaffioSidebarHeaderComponent,
+ ],
+ exports: [
+ DaffioSidebarHeaderComponent,
+ ],
+})
+export class DaffioSidebarHeaderComponentModule { }
diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html
index f114322fe6..ad49b43a62 100644
--- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html
+++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html
@@ -1,13 +1,11 @@
diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss
index c1d2d68498..b93c9259b1 100644
--- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss
+++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss
@@ -1,9 +1,5 @@
-.daffio-sidebar-viewport {
- &__get-started {
- display: block;
- font-weight: 500;
- padding: 16px;
- text-align: center;
- text-decoration: none;
- }
-}
+.daffio-sidebar {
+ max-width: 290px;
+ width: 100%;
+ border-right: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1);
+}
\ No newline at end of file
diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts
index 0d633f1b50..fe5edf68c0 100644
--- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts
+++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts
@@ -12,7 +12,6 @@ import {
StoreModule,
combineReducers,
} from '@ngrx/store';
-import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module';
import { cold } from 'jasmine-marbles';
import {
@@ -47,7 +46,6 @@ describe('DaffioSidebarViewportContainer', () => {
RouterTestingModule,
NoopAnimationsModule,
DaffSidebarModule,
- DaffioGuidesNavModule,
HttpClientTestingModule,
],
declarations: [
diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts
index 6c972dc462..3d45d44f2a 100644
--- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts
+++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts
@@ -3,16 +3,19 @@ import {
Component,
OnInit,
} from '@angular/core';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
import {
Store,
select,
} from '@ngrx/store';
import { DaffioDoc } from 'apps/daffio/src/app/docs/models/doc';
import { DaffioDocsService } from 'apps/daffio/src/app/docs/services/docs.service';
-import { Observable } from 'rxjs';
+import {
+ map,
+ Observable,
+} from 'rxjs';
import { DaffSidebarMode } from '@daffodil/design/sidebar';
+import { DaffRouterNamedViewService } from '@daffodil/router';
import { DaffioGuideList } from '../../../../docs/models/guide-list';
import { DaffioRouterNamedViewsEnum } from '../../../../named-views/models/named-views.enum';
@@ -30,21 +33,28 @@ import * as fromDaffioSidebar from '../../reducers/index';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioSidebarViewportContainer implements OnInit {
- faTimes = faTimes;
- readonly sidebarNamedView = DaffioRouterNamedViewsEnum.SIDEBAR;
+ readonly sidebarHeaderNamedView = DaffioRouterNamedViewsEnum.SIDEBARHEADER;
+ readonly sidebarContentNamedView = DaffioRouterNamedViewsEnum.SIDEBARCONTENT;
+ readonly sidebarFooterNamedView = DaffioRouterNamedViewsEnum.SIDEBARFOOTER;
showSidebar$: Observable;
sidebarContents$: Observable;
mode$: Observable;
+ showSidebarHeader$: Observable;
+ showSidebarFooter$: Observable;
ngOnInit() {
this.sidebarContents$ = this.docService.getGuideList();
this.showSidebar$ = this.store.pipe(select(fromDaffioSidebar.selectShowSidebar));
this.mode$ = this.store.pipe(select(fromDaffioSidebar.selectSidebarMode));
+ this.showSidebarHeader$ = this.namedViewService.namedViews$.pipe(map((namedViews) => !!namedViews[this.sidebarHeaderNamedView]));
+ this.showSidebarFooter$ = this.namedViewService.namedViews$.pipe(map((namedViews) => !!namedViews[this.sidebarFooterNamedView]));
}
- constructor(private store: Store,
- private docService: DaffioDocsService) { }
+ constructor(
+ private store: Store,
+ private docService: DaffioDocsService,
+ private namedViewService: DaffRouterNamedViewService) { }
close() {
this.store.dispatch(new CloseSidebar());
diff --git a/apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effects.ts b/apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effects.ts
index 7600b381c5..76b71c467f 100644
--- a/apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effects.ts
+++ b/apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effects.ts
@@ -31,7 +31,7 @@ export class DaffioSidebarRoutingModeEffects {
changeModeWhenVisitingConfiguredRoute$ = createEffect(() => (): Observable => combineLatest(
this.actions$.pipe(ofType(ROUTER_NAVIGATED)),
- this.breakpointsObserver.observe(DaffBreakpoints.TABLET),
+ this.breakpointsObserver.observe(DaffBreakpoints.BIG_TABLET),
).pipe(
map(([action, state]) => {
const mode = computeDeepestSidebarMode(action.payload.routerState.root);
diff --git a/apps/daffio/src/app/named-views/models/named-views.enum.ts b/apps/daffio/src/app/named-views/models/named-views.enum.ts
index 92a7f8da96..19d444f65c 100644
--- a/apps/daffio/src/app/named-views/models/named-views.enum.ts
+++ b/apps/daffio/src/app/named-views/models/named-views.enum.ts
@@ -1,4 +1,6 @@
export enum DaffioRouterNamedViewsEnum {
- SIDEBAR = 'sidebar',
+ SIDEBARHEADER = 'sidebar-header',
+ SIDEBARCONTENT = 'sidebar-content',
+ SIDEBARFOOTER = 'sidebar-footer',
NAV = 'nav'
}
diff --git a/apps/daffio/src/scss/component-themes.scss b/apps/daffio/src/scss/component-themes.scss
index 74472cf9d3..845ee68f7b 100644
--- a/apps/daffio/src/scss/component-themes.scss
+++ b/apps/daffio/src/scss/component-themes.scss
@@ -4,7 +4,7 @@
@use '../app/docs/components/table-of-contents/table-of-contents-theme' as toc;
@use '../app/api/components/api-list/api-list-theme' as api-list;
@use '../app/newsletter/newsletter-theme' as newsletter;
-@use '../app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme' as sidebar;
+@use '../app/core/sidebar/components/sidebar-footer/sidebar-footer-theme' as sidebar-footer;
@mixin component-themes($theme) {
@include simple-footer.daffio-simple-footer-theme($theme);
@@ -13,5 +13,5 @@
@include toc.daffio-table-of-contents-theme($theme);
@include api-list.daffio-api-list-theme($theme);
@include newsletter.daffio-newsletter-theme($theme);
- @include sidebar.daffio-sidebar-viewport-theme($theme);
+ @include sidebar-footer.daffio-sidebar-footer-theme($theme);
}
\ No newline at end of file
diff --git a/libs/router/src/named-view/outlet/outlet.directive.ts b/libs/router/src/named-view/outlet/outlet.directive.ts
index 8766c27b74..61e6ace215 100644
--- a/libs/router/src/named-view/outlet/outlet.directive.ts
+++ b/libs/router/src/named-view/outlet/outlet.directive.ts
@@ -7,25 +7,18 @@ import {
SimpleChanges,
OnDestroy,
} from '@angular/core';
-import {
- ActivatedRoute,
- NavigationEnd,
- Router,
-} from '@angular/router';
import {
BehaviorSubject,
Observable,
Subject,
combineLatest,
distinctUntilChanged,
- filter,
map,
- merge,
takeUntil,
} from 'rxjs';
-import { daffRouterNamedViewsCollect } from '../helpers/collect-named-views';
import { DaffRouterNamedViews } from '../models/public_api';
+import { DaffRouterNamedViewService } from '../service/named-view.service';
/**
* Renders a named view of the current route.
@@ -51,8 +44,7 @@ export class DaffRouterNamedViewOutletDirective implements OnInit, OnChanges, On
@Input() daffRouterNamedViewOutlet!: string;
constructor(
- private route: ActivatedRoute,
- private router: Router,
+ private namedViewService: DaffRouterNamedViewService,
private viewRef: ViewContainerRef,
) {}
@@ -67,26 +59,8 @@ export class DaffRouterNamedViewOutletDirective implements OnInit, OnChanges, On
}
ngOnInit(): void {
- /**
- * Because data won't reemit for route changes and
- * the top-level data probably won't have named views
- * anyway, use `url` and router events to listen for route changes
- * and pull named views from nested data in the snapshot.
- *
- * On first page load, this directive will likely not be instantiated
- * in time to catch router events so route.url emits for this case.
- * On subsequent route changes, `route.url` will not change (why????)
- * so we use router events instead.
- */
- this._namedViews$ = merge(
- this.router.events.pipe(
- filter((e) => e instanceof NavigationEnd),
- ),
- this.route.url,
- ).pipe(
- map(() => this.route.snapshot),
- map(daffRouterNamedViewsCollect),
- );
+ this._namedViews$ = this.namedViewService.namedViews$;
+
combineLatest([
this._namedViews$,
this._outlet$,
diff --git a/libs/router/src/named-view/public_api.ts b/libs/router/src/named-view/public_api.ts
index e6be475a6b..5367bffb8b 100644
--- a/libs/router/src/named-view/public_api.ts
+++ b/libs/router/src/named-view/public_api.ts
@@ -1,3 +1,4 @@
export * from './helpers/public_api';
export * from './models/public_api';
export * from './outlet/public_api';
+export * from './service/named-view.service';
diff --git a/libs/router/src/named-view/service/named-view.service.ts b/libs/router/src/named-view/service/named-view.service.ts
new file mode 100644
index 0000000000..c78d6f1710
--- /dev/null
+++ b/libs/router/src/named-view/service/named-view.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import {
+ ActivatedRoute,
+ NavigationEnd,
+ Router,
+} from '@angular/router';
+import {
+ Observable,
+ filter,
+ map,
+ merge,
+} from 'rxjs';
+
+import { daffRouterNamedViewsCollect } from '../helpers/collect-named-views';
+import { DaffRouterNamedViews } from '../models/named-views.type';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class DaffRouterNamedViewService {
+ public namedViews$: Observable;
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ ) {
+ /**
+ * Because data won't reemit for route changes and
+ * the top-level data probably won't have named views
+ * anyway, use `url` and router events to listen for route changes
+ * and pull named views from nested data in the snapshot.
+ *
+ * On first page load, this directive will likely not be instantiated
+ * in time to catch router events so route.url emits for this case.
+ * On subsequent route changes, `route.url` will not change (why????)
+ * so we use router events instead.
+ */
+ this.namedViews$ = merge(
+ this.router.events.pipe(
+ filter((e) => e instanceof NavigationEnd),
+ ),
+ this.route.url,
+ ).pipe(
+ map(() => this.route.snapshot),
+ map(daffRouterNamedViewsCollect),
+ );
+ }
+}
diff --git a/libs/router/tsconfig.json b/libs/router/tsconfig.json
index 898c0e00b4..1fae160597 100644
--- a/libs/router/tsconfig.json
+++ b/libs/router/tsconfig.json
@@ -19,7 +19,16 @@
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+ "baseUrl": "../..",
+ "paths": {
+ "@daffodil/*": [
+ "dist/*"
+ ],
+ "@daffodil/router": [
+ "libs/router/src"
+ ]
+ }
},
"angularCompilerOptions": {
"strictInjectionParameters": true,