Sidebar

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

Components

DaffSidebarViewportComponent

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

DaffSidebarViewportComponent serves as the container for managing sidebars across an entire application. Because it's a functional component, it supports multiple simultaneously open sidebar and is designed to handle these scenarios gracefully.

However, there is one key contraint: only one sidebar per mode is allowed on each side (e.g., left or right) at any given time.

If this constraint is violated, the component will throw an exception to prevent unintended behavior.

<daff-sidebar-viewport>
   <daff-sidebar></daff-sidebar>
   <div>Site content</div>
</daff-sidebar-viewport>

@Component()
class DaffSidebarViewportComponent implements AfterContentChecked, OnDestroy {
  @Input() navPlacement: DaffNavPlacement = DaffNavPlacementEnum.ABOVE

  @Output() backdropClicked: EventEmitter<void> = new EventEmitter<void>()
}

Inputs

navPlacement

DaffNavPlacement

Default	`DaffNavPlacementEnum.ABOVE`
Description	The placement of the nav in relation to the sidebar. Note that this is really only available when there is a `side-fixed` sidebar.

Outputs

backdropClicked

EventEmitter<void>

Default	–
Description	Event fired when the backdrop is clicked. This is often used to close the sidebar.

DaffSidebarComponent

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

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

<daff-sidebar></daff-sidebar>

@Component()
class DaffSidebarComponent implements DaffOpenable {
  @Input() side: DaffSidebarSide = 'left'
  @Input() mode: DaffSidebarMode = 'side'

  @Output() escapePressed: EventEmitter<void> = new EventEmitter<void>()

  reveal(): void
  hide(): void
  toggle(): void
}

() Methods

Inputs

side

DaffSidebarSide

Default	`'left'`
Description	What side of the viewport to show the sidebar on.

mode

DaffSidebarMode

Default	`'side'`
Description	The mode of the sidebar.

Outputs

escapePressed

EventEmitter<void>

Default	–
Description	Event fired when `ESC` key is pressed when the sidebar has focus.

DaffSidebarHeaderComponent

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

Sidebar header is a child component of the sidebar that is used to display a header container, positioned at the top of a sidebar. It includes an optional title ([daffSidebarHeaderTitle]) slot and a slot to render any custom content.

<daff-sidebar-header></daff-sidebar-header>

@Component()
class DaffSidebarHeaderComponent {
  @Input() @HostBinding() dismissible: boolean = false

  @Output() closeSidebar: EventEmitter<void> = new EventEmitter()
}

Inputs

dismissible

boolean

Default	`false`
Description	Whether or not a sidebar header should display the close icon.

Outputs

closeSidebar

EventEmitter<void>

Default	–
Description	Output event triggered when the close icon is clicked.

DaffSidebarFooterComponent

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

Sidebar footer is a child component of the sidebar that is used to display a footer container, positioned at the bottom of a sidebar.

<daff-sidebar-footer></daff-sidebar-footer>

@Component()
class DaffSidebarFooterComponent {}

Directives

DaffSidebarHeaderTitleDirective

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

Sidebar header title is a child directive of DaffSidebarHeaderComponent that can be used to provide a title for the sidebar.

<div daffSidebarHeaderTitle>Title</div>

@Directive()
class DaffSidebarHeaderTitleDirective {}

DaffSidebarHeaderActionDirective

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

@Directive()
class DaffSidebarHeaderActionDirective {}

Modules

DaffSidebarModule

Deprecated

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

@NgModule()
class DaffSidebarModule {}

Types

DaffSidebarRegistration

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

Represents a registration of a sidebar. A collection of sidebar components is associated with an ID which can be passed to DaffSidebarService.

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

DaffSidebarMode

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

The available display modes for the DaffSidebarComponent.

Mode	Description
`side`	Displays the sidebar alongside the main content.
`side-fixed`	Displays the sidebar alongside the content, but the sidebar remains fixed in place and scrolls independently from the content.
`over`	The sidebar slides over the main content when open, temporarily covering part of the content when active.
`under`	The sidebar remains fixed in place while the main content slides over it when the sidebar is closed.

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

DaffSidebarModeEnum

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

Enum for representing the available sidebar display modes. See DaffSidebarMode for descriptions of each mode.

enum DaffSidebarModeEnum {
  Side = DaffSidebarModeEnum.Side,
  SideFixed = DaffSidebarModeEnum.SideFixed,
  Over = DaffSidebarModeEnum.Over,
  Under = DaffSidebarModeEnum.Under,
}

DaffSidebarSide

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

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

type DaffSidebarSide = 'left' | 'right'

DaffSidebarSideEnum

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

A enum representing the different sidebar modes. See DaffSidebarSide

enum DaffSidebarSideEnum {
  Left = DaffSidebarSideEnum.Left,
  Right = DaffSidebarSideEnum.Right,
}

Constants

daffSidebarIsDockedMode

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

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

const daffSidebarIsDockedMode: (mode: DaffSidebarModeEnum) => boolean

daffSidebarIsFloatingMode

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

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

const daffSidebarIsFloatingMode: (mode: DaffSidebarModeEnum) => boolean

Helpers

DaffSidebarService

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

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.

abstract class DaffSidebarService {
  protected _id$: BehaviorSubject<DaffSidebarRegistration['id']>
  protected _open: WritableSignal<boolean> = signal(false)
  readonly id$: Observable<DaffSidebarRegistration['id']>
  get isOpen(): Signal<boolean>

  open(id?: string): void
  close(): void
}