Поместить всплывающее окно диалога как боковую панель с помощью PrimeNG

Question

Я хочу иметь боковую панель с содержимым в стиле Header-Content-Footer. Я хочу указать c заголовок, цвет фона и c для кнопок заголовка и действий в нижнем колонтитуле с динамическим c содержимым посередине. Однако p-sidebar не предлагает эти шаблоны, поэтому я пытаюсь использовать для этого всплывающее окно, чтобы оно выглядело как боковая панель. Я могу добиться стиля верхнего и нижнего колонтитула, который мне нужен, с помощью всплывающего окна, но я не могу разместить его справа в качестве боковой панели.

Итак, мне нужно всплывающее окно, показанное здесь:

чтобы выглядеть так :

Я не являюсь экспертом в CSS, поэтому очень ждем любых отзывов.

Answer 1

Попробуйте этот код:

body .ui-widget-overlay{
  justify-content: flex-end;
}

body .ui-dialog{
  width: 50vw;
  z-index: 11008;
  height: 100%;
  background-color: white;
  max-height: 100%;
}