Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions libs/chat/src/lib/styles/chat-sidenav.styles.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,37 @@
// libs/chat/src/lib/styles/chat-sidenav.styles.ts
// SPDX-License-Identifier: MIT
export const CHAT_SIDENAV_STYLES = `
/*
* In expanded / collapsed modes the sidenav is "always visible" beside the
* main content — the consumer reserves space with padding-left on the
* layout container. The host must be position: fixed so it doesn't
* participate in document flow; otherwise its display: block stretches
* to the parent's full width and pushes siblings below the viewport.
*/
:host {
display: block;
height: 100%;
}
:host([data-mode="expanded"]) .chat-sidenav {
:host([data-mode="expanded"]),
:host([data-mode="collapsed"]) {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
}
:host([data-mode="expanded"]) {
width: var(--ngaf-chat-sidenav-width-expanded);
}
:host([data-mode="collapsed"]) .chat-sidenav {
:host([data-mode="collapsed"]) {
width: var(--ngaf-chat-sidenav-width-collapsed);
}
:host([data-mode="expanded"]) .chat-sidenav {
width: 100%;
}
:host([data-mode="collapsed"]) .chat-sidenav {
width: 100%;
}
:host([data-mode="drawer"]) {
position: relative;
}
Expand Down
Loading