feat(daffio): support always showing sidebar header and footer (#3451)

Co-authored-by: Peter Lauck <[email protected]>

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

@@ -30,7 +30,6 @@ import { environment } from '../environments/environment';
 import { DaffioMarketingFooterComponentModule } from './core/footer/marketing-footer/marketing-footer.module';
 import { DaffioSimpleFooterComponentModule } from './core/footer/simple-footer/simple-footer.module';
 import { daffioRouterDataServiceConfig } from './core/router/data-service-config';
-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';
 
@@ -48,7 +47,6 @@ import { TemplateModule } from './core/template/template.module';
     EffectsModule.forRoot(),
     AppRoutingModule,
     DaffioSidebarHeaderComponentModule,
-    DaffioSidebarFooterComponentModule,
     DaffioSimpleFooterComponentModule,
     DaffioMarketingFooterComponentModule,
     //Make sure this loads after Router and Store

apps/daffio/src/app/core/nav/docs-sidebar.provider.ts

@@ -0,0 +1,11 @@
+import { DaffSidebarRegistration } from '@daffodil/design/sidebar';
+
+import { DAFFIO_NAV_SIDEBAR_ID } from './header/sidebar-id';
+import { DaffioNavSidebarBodyComponent } from './sidebar-body/component';
+import { DaffioSidebarHeaderComponent } from '../sidebar/components/sidebar-header/sidebar-header.component';
+
+export const DAFF_DOCS_NAV_SIDEBAR_REGISTRATION: DaffSidebarRegistration = {
+  id: DAFFIO_NAV_SIDEBAR_ID,
+  header: DaffioSidebarHeaderComponent,
+  body: DaffioNavSidebarBodyComponent,
+};

apps/daffio/src/app/core/nav/sidebar.provider.ts

@@ -2,12 +2,12 @@ import { DaffSidebarRegistration } from '@daffodil/design/sidebar';
 
 import { DAFFIO_NAV_SIDEBAR_ID } from './header/sidebar-id';
 import { DaffioNavSidebarBodyComponent } from './sidebar-body/component';
-import { DaffioSidebarFooterComponent } from '../sidebar/components/sidebar-footer/sidebar-footer.component';
+import { DaffioMarketingSidebarFooterComponent } from '../sidebar/components/marketing/footer/footer.component';
 import { DaffioSidebarHeaderComponent } from '../sidebar/components/sidebar-header/sidebar-header.component';
 
 export const DAFF_NAV_SIDEBAR_REGISTRATION: DaffSidebarRegistration = {
   id: DAFFIO_NAV_SIDEBAR_ID,
   header: DaffioSidebarHeaderComponent,
   body: DaffioNavSidebarBodyComponent,
-  footer: DaffioSidebarFooterComponent,
+  footer: DaffioMarketingSidebarFooterComponent,
 };

apps/daffio/src/app/core/sidebar/components/docs/footer/footer-theme.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use 'theme' as daff-theme;
+
+@mixin daffio-docs-sidebar-footer-theme($theme) {
+	$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
+	$base: daff-theme.daff-map-get($theme, 'core', 'base');
+
+	.daffio-docs-sidebar-footer {
+		border-top: 1px solid daff-theme.daff-illuminate($base, $neutral, 2);
+
+		&::after {
+			background: daff-theme.daff-illuminate($base, $neutral, 2);
+		}
+	}
+}

apps/daffio/src/app/core/sidebar/components/docs/footer/footer.component.html

@@ -0,0 +1,6 @@
+<daff-sidebar-footer >
+  <a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-docs-sidebar-footer">
+    <span>GitHub</span>
+    <fa-icon [icon]="faArrowUpRightFromSquare"></fa-icon>
+  </a>
+</daff-sidebar-footer>

apps/daffio/src/app/core/sidebar/components/docs/footer/footer.component.scss

@@ -0,0 +1,34 @@
+@use 'utilities' as daff;
+
+.daffio-docs-sidebar-footer {
+	@include daff.clickable();
+	display: flex;
+	gap: 0.5rem;
+	justify-content: center;
+	font-weight: 500;
+	padding: 0.75rem;
+	text-decoration: none;
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		top: 0;
+		left: 0;
+		opacity: 0;
+		transition: opacity 300ms;
+		z-index: 0;
+	}
+
+	> * {
+		z-index: 1;
+	}
+
+	&:hover {
+		&::after {
+			opacity: 1;
+		}
+	}
+}

apps/daffio/src/app/core/sidebar/components/docs/footer/footer.component.ts

@@ -0,0 +1,23 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+
+import { DaffSidebarFooterComponent } from '@daffodil/design/sidebar';
+
+@Component({
+  selector: 'daffio-docs-sidebar-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DaffSidebarFooterComponent,
+    FaIconComponent,
+  ],
+})
+export class DaffioDocsSidebarFooterComponent {
+  faArrowUpRightFromSquare = faArrowUpRightFromSquare;
+}

apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss → apps/daffio/src/app/core/sidebar/components/marketing/footer/footer-theme.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
 @use 'theme' as daff-theme;
 
-@mixin daffio-sidebar-footer-theme($theme) {
+@mixin daffio-marketing-sidebar-footer-theme($theme) {
 	$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
 	$base: daff-theme.daff-map-get($theme, 'core', 'base');
 	$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
 	$primary: daff-theme.daff-map-get($theme, primary);
 
-	.daffio-sidebar-footer {
+	.daffio-marketing-sidebar-footer {
 		background: daff-theme.daff-illuminate($base, $neutral, 2);
 
 		&:hover {

apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.html → apps/daffio/src/app/core/sidebar/components/marketing/footer/footer.component.html

@@ -1,3 +1,3 @@
 <daff-sidebar-footer>
-  <a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-sidebar-footer">Get Started</a>
+  <a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-marketing-sidebar-footer">Get Started</a>
 </daff-sidebar-footer>

apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss → apps/daffio/src/app/core/sidebar/components/marketing/footer/footer.component.scss

@@ -1,6 +1,6 @@
 @use 'utilities' as daff;
 
-.daffio-sidebar-footer {
+.daffio-marketing-sidebar-footer {
 	@include daff.clickable();
 	display: block;
 	font-weight: 500;

apps/daffio/src/app/core/sidebar/components/marketing/footer/footer.component.ts

@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import { DaffSidebarFooterComponent } from '@daffodil/design/sidebar';
+
+@Component({
+  selector: 'daffio-marketing-sidebar-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DaffSidebarFooterComponent,
+  ],
+})
+export class DaffioMarketingSidebarFooterComponent { }

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

@@ -13,9 +13,9 @@ import {
 import {
   daffSidebarIsFloatingMode,
   DaffSidebarModeEnum,
-  DaffSidebarRegistration,
 } from '@daffodil/design/sidebar';
 
+import { DaffioSidebarRegistration } from '../../registration/type';
 import { DaffioSidebarService } from '../../services/sidebar.service';
 
 @Component({
@@ -29,7 +29,7 @@ export class DaffioSidebarViewportContainer implements OnInit {
   mode$: Observable<DaffSidebarModeEnum>;
   showSidebarHeader$: Observable<boolean>;
   showSidebarFooter$: Observable<boolean>;
-  component$: Observable<DaffSidebarRegistration>;
+  component$: Observable<DaffioSidebarRegistration>;
 
   ngOnInit() {
     this.component$ = this.sidebarService.activeRegistration$;
@@ -39,13 +39,13 @@ export class DaffioSidebarViewportContainer implements OnInit {
       this.component$,
       this.mode$,
     ]).pipe(
-      map(([component, mode]) => component?.header && daffSidebarIsFloatingMode(mode)),
+      map(([component, mode]) => component?.header && (component.alwaysShowHeader || daffSidebarIsFloatingMode(mode))),
     );
     this.showSidebarFooter$ = combineLatest([
       this.component$,
       this.mode$,
     ]).pipe(
-      map(([component, mode]) => component?.footer && daffSidebarIsFloatingMode(mode)),
+      map(([component, mode]) => component?.footer && (component.alwaysShowFooter || daffSidebarIsFloatingMode(mode))),
     );
   }
 

apps/daffio/src/app/core/sidebar/models/route.type.ts

@@ -1,20 +1,19 @@
 import { Route } from '@angular/router';
 
-import {
-  DaffSidebarModeEnum,
-  DaffSidebarRegistration,
-} from '@daffodil/design/sidebar';
+import { DaffSidebarModeEnum } from '@daffodil/design/sidebar';
+
+import { DaffioSidebarRegistration } from '../registration/type';
 
 export interface DaffioRouteWithSidebars extends Route {
   data?: Route['data'] & {
     /**
      * A collection of sidebars available on the current page.
      */
-    daffioSidebars?: Record<DaffSidebarRegistration['id'], DaffSidebarRegistration>;
+    daffioSidebars?: Record<DaffioSidebarRegistration['id'], DaffioSidebarRegistration>;
     /**
      * The sidebar that should be shown automatically (if any) when the viewport enters big tablet.
      */
-    daffioDockedSidebar?: DaffSidebarRegistration['id'];
+    daffioDockedSidebar?: DaffioSidebarRegistration['id'];
     sidebarMode?: DaffSidebarModeEnum;
   };
 }

apps/daffio/src/app/core/sidebar/registration/type.ts

@@ -0,0 +1,12 @@
+import { DaffSidebarRegistration } from '@daffodil/design/sidebar';
+
+export interface DaffioSidebarRegistration extends DaffSidebarRegistration {
+  /**
+   * Whether to show the sidebar header regardless of sidebar mode.
+   */
+  alwaysShowHeader?: boolean;
+  /**
+   * Whether to show the sidebar footer regardless of sidebar mode.
+   */
+  alwaysShowFooter?: boolean;
+}

apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.scss

@@ -0,0 +1,4 @@
+:host {
+	display: block;
+	padding: 1rem 0;
+}

apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.ts

@@ -18,6 +18,7 @@ const DEFAULT_ROUTER_LINK_ACTIVE_CONFIG: RouterLinkActive['routerLinkActiveOptio
 @Component({
   selector: 'daffio-api-nav-list',
   templateUrl: './nav-list.component.html',
+  styleUrl: './nav-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

apps/daffio/src/app/docs/api/sidebar/provider.ts

@@ -1,11 +1,8 @@
 import { DaffioApiNavListSidebarContainer } from './component';
-import { DaffioSidebarFooterComponent } from '../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
-import { DaffioSidebarHeaderComponent } from '../../../core/sidebar/components/sidebar-header/sidebar-header.component';
-import { DAFFIO_DOCS_LIST_SIDEBAR_ID } from '../../containers/docs-list/sidebar.provider';
+import { DaffioSidebarRegistration } from '../../../core/sidebar/registration/type';
+import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from '../../containers/docs-list/sidebar.provider';
 
-export const DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION = {
-  id: DAFFIO_DOCS_LIST_SIDEBAR_ID,
-  header: DaffioSidebarHeaderComponent,
+export const DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION: DaffioSidebarRegistration = {
+  ...DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION,
   body: DaffioApiNavListSidebarContainer,
-  footer: DaffioSidebarFooterComponent,
 };

apps/daffio/src/app/docs/components/docs-list/docs-list.component.scss

@@ -1,4 +1,4 @@
 :host {
 	display: block;
-	padding: 1rem 0 0;
+	padding: 1rem 0;
 }

apps/daffio/src/app/docs/containers/docs-list/sidebar.provider.ts

@@ -1,12 +1,14 @@
 import { DaffioDocsListContainer } from './docs-list.component';
-import { DaffioSidebarFooterComponent } from '../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
+import { DaffioDocsSidebarFooterComponent } from '../../../core/sidebar/components/docs/footer/footer.component';
 import { DaffioSidebarHeaderComponent } from '../../../core/sidebar/components/sidebar-header/sidebar-header.component';
+import { DaffioSidebarRegistration } from '../../../core/sidebar/registration/type';
 
 export const DAFFIO_DOCS_LIST_SIDEBAR_ID = 'daffioDocsList';
 
-export const DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION = {
+export const DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION: DaffioSidebarRegistration = {
   id: DAFFIO_DOCS_LIST_SIDEBAR_ID,
   header: DaffioSidebarHeaderComponent,
   body: DaffioDocsListContainer,
-  footer: DaffioSidebarFooterComponent,
+  footer: DaffioDocsSidebarFooterComponent,
+  alwaysShowFooter: true,
 };

apps/daffio/src/app/docs/design/containers/docs-list/sidebar.provider.ts

@@ -1,12 +1,11 @@
+import { DaffioSidebarRegistration } from 'apps/daffio/src/app/core/sidebar/registration/type';
+
 import { DaffioDocsDesignListContainer } from './docs-list.component';
-import { DaffioSidebarFooterComponent } from '../../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
-import { DaffioSidebarHeaderComponent } from '../../../../core/sidebar/components/sidebar-header/sidebar-header.component';
+import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from '../../../containers/docs-list/sidebar.provider';
 
 export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID = 'daffioDocsList';
 
-export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION = {
-  id: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID,
-  header: DaffioSidebarHeaderComponent,
+export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION: DaffioSidebarRegistration = {
+  ...DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION,
   body: DaffioDocsDesignListContainer,
-  footer: DaffioSidebarFooterComponent,
 };

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

@@ -14,6 +14,7 @@ import {
 import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
 import { DaffioSimpleFooterComponent } from '../core/footer/simple-footer/simple-footer.component';
 import { DaffioDocsNavContainer } from '../core/nav/docs/docs.component';
+import { DAFF_DOCS_NAV_SIDEBAR_REGISTRATION } from '../core/nav/docs-sidebar.provider';
 import { DaffioRouterNamedViewsEnum } from '../core/router/named-views/models/named-views.enum';
 import { DaffioRoute } from '../core/router/route.type';
 
@@ -32,6 +33,7 @@ export const docsRoutes: Routes = [
         { url: `/${DAFF_DOCS_PATH}/${DAFF_DOCS_DESIGN_PATH}`, title: 'Design' },
       ],
       daffioSidebars: {
+        [DAFF_DOCS_NAV_SIDEBAR_REGISTRATION.id]: DAFF_DOCS_NAV_SIDEBAR_REGISTRATION,
         [DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION.id]: DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION,
       },
     },

apps/daffio/src/scss/component-themes.scss

@@ -7,7 +7,8 @@
 @use '../app/docs/api/components/api-list-section/api-list-section-theme' as api-list-section;
 @use '../app/docs/api/components/api-package/api-package-theme' as api-package;
 @use '../app/newsletter/newsletter-theme' as newsletter;
-@use '../app/core/sidebar/components/sidebar-footer/sidebar-footer-theme' as sidebar-footer;
+@use '../app/core/sidebar/components/marketing/footer/footer-theme' as marketing-sidebar-footer;
+@use '../app/core/sidebar/components/docs/footer/footer-theme' as docs-sidebar-footer;
 @use '../app/core/header/components/header/header-theme' as header;
 
 @mixin component-themes($theme) {
@@ -20,6 +21,7 @@
 	@include api-list-section.daffio-api-list-section-theme($theme);
 	@include api-package.daffio-api-package-theme($theme);
 	@include newsletter.daffio-newsletter-theme($theme);
-	@include sidebar-footer.daffio-sidebar-footer-theme($theme);
 	@include header.daffio-header-theme($theme);
+	@include marketing-sidebar-footer.daffio-marketing-sidebar-footer-theme($theme);
+	@include docs-sidebar-footer.daffio-docs-sidebar-footer-theme($theme);
 }