CngxSidenavLayout
projects/ui/sidenav/sidenav-layout.ts
Import#
import { CngxSidenavLayout } from '@cngx/ui/sidenav'
Description#
Container for one or two CngxSidenav panels and a CngxSidenavContent.
Manages shared backdrop, scroll lock, and click-outside coordination.
Supports up to two sidenavs: one position="start" and one position="end".
Dual sidebar
<cngx-sidenav-layout>
<cngx-sidenav position="start" [(opened)]="navOpen"
[responsive]="'(min-width: 1024px)'">
Left nav
</cngx-sidenav>
<cngx-sidenav-content>
Main content
</cngx-sidenav-content>
<cngx-sidenav position="end" [(opened)]="detailOpen">
Right detail panel
</cngx-sidenav>
</cngx-sidenav-layout>Metadata#
Host#
Index#
Methods#
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-sidenav-layout] | true |
[class.cngx-sidenav-layout--ready] | ready() |
[class.cngx-sidenav-layout--has-overlay] | hasOverlay() |
Layout-level styles for CngxSidenavLayout: the flex container that
holds one or two cngx-sidenav rails and a cngx-sidenav-content,
the content offset behaviour, the mobile backdrop scrim, the
--ready transition gate, and the reduced-motion fallback. Loaded
via the layout component's styleUrl; under encapsulation: None
these rules match globally.
The rail itself (surface, borders, slots, mode variants, mini-mode,
resize handle, nav-link rules) and every --cngx-sidenav-* /
--cngx-nav-link-* token live in sidenav.css, shipped by
CngxSidenav, so a bare <cngx-sidenav> is styled without a layout
wrapper.
State modifiers
On cngx-sidenav-layout:
--ready- added after first render to enable transitions and prevent the open-state flash on mount
Slots
.cngx-sidenav-backdrop- mobile scrim forovermode
All transitions short-circuit under prefers-reduced-motion.
Pair with
@cngx/themes/material/sidenav-theme- Material 3 rail surface@cngx/themes/material/nav-link-theme- Material 3 nav-link palette