Sidebar

Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.

DaffSidebarModule

import { DaffSidebarModule } from '@daffodil/design/sidebar'

@NgModule()
class DaffSidebarModule {}

DaffSidebarMode

The various modes that a DaffSidebar can be in.

side is a mode that allows you to place the sidebar alongside the content.
side-fixed is a mode that allows you want to place the sidebar alongside the content, however the sidebar will scroll separately from the content.
over is a mode which allows the sidebar to slide over the rest of the content in the viewport.
under is a mode that freezes the sidebar in place and allows the content slide above it.

import { DaffSidebarMode } from '@daffodil/design/sidebar'

type DaffSidebarMode = 'side' | 'over' | 'under' | 'side-fixed'

Type	Options
DaffSidebarMode	`'side' \| 'over' \| 'under' \| 'side-fixed'`

DaffSidebarModeEnum

A enum representing the different sidebar modes. See DaffSidebarMode

import { DaffSidebarModeEnum } from '@daffodil/design/sidebar'

enum DaffSidebarModeEnum {
  Side = 'side',
  SideFixed = 'side-fixed',
  Over = 'over',
  Under = 'under',
}

DaffSidebarSide

The sides of a viewport that that a sidebar can appear on.

import { DaffSidebarSide } from '@daffodil/design/sidebar'

type DaffSidebarSide = 'left' | 'right'

Type	Options
DaffSidebarSide	`'left' \| 'right'`

DaffSidebarSideEnum

A enum representing the different sidebar modes. See DaffSidebarSide

import { DaffSidebarSideEnum } from '@daffodil/design/sidebar'

enum DaffSidebarSideEnum {
  Left = 'left',
  Right = 'right',
}

DAFF_SIDEBAR_COMPONENTS

import { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar'

const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective, typeof DaffSidebarViewportBackdropComponent]

DaffSidebarRegistration

Represents a registration of a sidebar. A collection of sidebar components is associated with an ID which can be passed to {@link DaffSidebarService#open}.

import { DaffSidebarRegistration } from '@daffodil/design/sidebar'

interface DaffSidebarRegistration {
  id: string
  header: Type<unknown>
  body: Type<unknown>
  footer: Type<unknown>
}

Properties

Name	Type	Description
id	string
header	Type<unknown>
body	Type<unknown>
footer	Type<unknown>

DaffSidebarService

A service that stores the open state and ID of the currently opened sidebar.

A default sidebar ID can be passed to the constructor that will be the initial value of $id.

import { DaffSidebarService } from '@daffodil/design/sidebar'

abstract class DaffSidebarService {
  protected _id$: BehaviorSubject<DaffSidebarRegistration['id']>
  protected _open: signal(false)
  readonly id$: Observable<DaffSidebarRegistration['id']>
  get isOpen(): Signal<boolean>
  open(id?: string)
  close()
}

Properties

Name	Type	Description
_id$	BehaviorSubject<DaffSidebarRegistration['id']>
_open	signal(false)
id$	Observable<DaffSidebarRegistration['id']>
isOpen	Signal<boolean>
open		Opens the specified sidebar.
close		Closes the sidebar. Does not clear the ID.

DaffSidebarViewportComponent

The DaffSidebarViewportComponent is the "holder" of sidebars throughout an entire application.

<daff-sidebar-viewport> should only ever be used once in an application, but it's possible for there to be multiple sidebars of many modes at the same time. See DaffSidebarMode.

Since this is a functional component, it's possible to have multiple "open" sidebars at the same time. As a result, this component attempts to gracefully handle these situations. However, importantly, there can only be one sidebar of each mode, on each side, at any given time.

If this is violated, this component will throw an exception.

import { DaffSidebarViewportComponent } from '@daffodil/design/sidebar'

@Component()
class DaffSidebarViewportComponent implements AfterContentChecked, OnDestroy {
  @HostBinding() hostClass: true
  @HostBinding() 
  get classes()
  get isNavOnSide()
  onContentAnimationStart(e: AnimationEvent_2)
  onContentAnimationDone(e: AnimationEvent_2)
  @Input() navPlacement: DaffNavPlacement
  _backdropInteractable: false
  _animationState: DaffSidebarViewportAnimationStateWithParams
  @Output() backdropClicked: EventEmitter<void>
  ngAfterContentChecked()
  ngOnDestroy()
}

Selector: 'daff-sidebar-viewport'

Properties

Name	Type	Description
hostClass	true
classes
isNavOnSide
onContentAnimationStart
onContentAnimationDone
@Input() navPlacement	DaffNavPlacement	The placement of the nav in relation to the sidebar. The default is set to `top`. Note that this is really only available when there is a `side-fixed` sidebar.
_backdropInteractable	false	Whether or not the backdrop is interactable
_animationState	DaffSidebarViewportAnimationStateWithParams	The animation state
@Output() backdropClicked	EventEmitter<void>	Event fired when the backdrop is clicked. This is often used to close the sidebar.
ngAfterContentChecked
ngOnDestroy

DaffSidebarComponent

DaffSidebarComponent is heavily based upon the work done by the @angular/components team on mat-drawer and mat-sidenav. daff-sidebar is intended to be a simplified version (with a different design) of mat-drawer.

import { DaffSidebarComponent } from '@daffodil/design/sidebar'

@Component()
class DaffSidebarComponent implements DaffOpenable {
  @HostBinding() 
  get transformSidebar()
  @Output() escapePressed: EventEmitter<void>
  @Input() side: DaffSidebarSide
  @Input() mode: DaffSidebarMode
  get width()
  get open()
  @HostListener() onAnimationStart(e: AnimationEvent_2)
  @HostListener() onAnimationComplete(e: AnimationEvent_2)
  reveal()
  hide()
  toggle()
}

Selector: 'daff-sidebar'

Properties

Name	Type	Description
transformSidebar		The animation state of the sidebar.
@Output() escapePressed	EventEmitter<void>	Event fired when `ESC` key is pressed when the sidebar has focus
@Input() side	DaffSidebarSide	What side of the viewport to show the sidebar on.
@Input() mode	DaffSidebarMode	The mode of the sidebar.
width		The width of the sidebar.
open
onAnimationStart		Animation event that can be used to hook into when the transformSidebar animation begins. This is used in sidebar to determine when to show the visibility of the sidebar so that the animation does not jump as the element is shown.
onAnimationComplete		Animation event that can be used to hook into when the transformSidebar animation is complete.
reveal		Reveal the contents of the sidebar
hide		Hide the contents of the sidebar
toggle		Toggle the visibility of the sidebar

DaffSidebarHeaderComponent

import { DaffSidebarHeaderComponent } from '@daffodil/design/sidebar'

@Component()
class DaffSidebarHeaderComponent {
  faTimes: faTimes
  @HostBinding() class: true
  @Input() @HostBinding() dismissible: false
  @Output() closeSidebar: EventEmitter<void>
  onCloseSidebar(event: Event)
}

Selector: 'daff-sidebar-header'

Properties

Name	Type	Description
faTimes	faTimes
class	true
@Input() dismissible	false	Whether or not a sidebar header displays the close icon
@Output() closeSidebar	EventEmitter<void>	Output event triggered when the close icon is clicked.
onCloseSidebar

DaffSidebarFooterComponent

import { DaffSidebarFooterComponent } from '@daffodil/design/sidebar'

@Component()
class DaffSidebarFooterComponent {
  @HostBinding() class: true
}

Selector: 'daff-sidebar-footer'

Properties

Name	Type	Description
class	true

DaffSidebarHeaderTitleDirective

import { DaffSidebarHeaderTitleDirective } from '@daffodil/design/sidebar'

@Directive()
class DaffSidebarHeaderTitleDirective {}

Selector: '[daffSidebarHeaderTitle]'

DaffSidebarHeaderActionDirective

import { DaffSidebarHeaderActionDirective } from '@daffodil/design/sidebar'

@Directive()
class DaffSidebarHeaderActionDirective {}

Selector: '[daffSidebarHeaderAction]'

DaffSidebarViewportBackdropComponent

import { DaffSidebarViewportBackdropComponent } from '@daffodil/design/sidebar'

@Component()
class DaffSidebarViewportBackdropComponent implements OnInit {
  @HostBinding() interactableClass: true
  @Input() @HostBinding() transparent: false
  @Input() interactable: true
  @Input() @HostBinding() fullscreen: false
  @Output() backdropClicked: EventEmitter<void>
  ngOnInit(): void
  @HostBinding() 
  get fadeBackdropTrigger()
  @HostListener() animationDone(e: AnimationEvent_2)
  @HostListener() animationStart(e: AnimationEvent_2)
  @HostListener() onBackdropClicked(): void
}

Selector: 'daff-sidebar-viewport-backdrop'

Properties

Name	Type	Description
interactableClass	true
@Input() transparent	false	Determines whether or not the backdrop is transparent.
@Input() interactable	true	Determines whether or not the backdrop is interactable.
@Input() fullscreen	false	Boolean property that determines whether or not the backdrop should fill up its containing window.
@Output() backdropClicked	EventEmitter<void>	Output event triggered when the backdrop is clicked.
ngOnInit	void
fadeBackdropTrigger		Animation hook for that controls the backdrops entrance and fade animations.
animationDone
animationStart
onBackdropClicked	void

daffSidebarIsDockedMode

Returns whether the passed mode is a docked mode, i.e. side or side-fixed.

import { daffSidebarIsDockedMode } from '@daffodil/design/sidebar'

const daffSidebarIsDockedMode: (mode: DaffSidebarModeEnum) => boolean

daffSidebarIsFloatingMode

Returns whether the passed mode is a floating mode, i.e. under or over.

import { daffSidebarIsFloatingMode } from '@daffodil/design/sidebar'

const daffSidebarIsFloatingMode: (mode: DaffSidebarModeEnum) => boolean