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 @@ +Get Started \ 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 @@ - - + + - - - Get Started + + + 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,