({
+ _id: `db-control-panel-desktop-${uuid()}`,
+ _open: true,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ handleToggle: (event: any) => {
+ if (typeof event.detail !== 'object') {
+ event.stopPropagation();
+
+ state._open = !state._open;
+ }
+ },
+ getToggleButtonText: (): string => {
+ if (props.onExpandButtonTooltipFn) {
+ const open = state._open;
+ return props.onExpandButtonTooltipFn(open);
+ }
+ if (props.expandButtonTooltip) {
+ return props.expandButtonTooltip;
+ }
+
+ return state._open ? DEFAULT_COLLAPSE : DEFAULT_EXPAND;
+ },
+ onScroll() {
+ if (!_scrollContainerRef) return;
+ const popoverNavigation: HTMLElement | null = (
+ _scrollContainerRef as HTMLDivElement
+ ).querySelector('.db-navigation[data-variant="popover"]');
+
+ if (!popoverNavigation) return;
+
+ const navigationMenu = popoverNavigation.querySelector('menu');
+
+ if (navigationMenu) {
+ handleSubNavigationPosition(navigationMenu);
+ }
+ }
+ });
+
+ // jscpd:ignore-end
+
+ onInit(() => {
+ if (props.expanded !== undefined) {
+ state._open = getBoolean(props.expanded, 'expanded') ?? true;
+ }
+ });
+
+ return (
+
+
+ state.onScroll()}>
+ {props.children}
+
+
+
+
+
+ state.handleToggle(event)}
+ variant="ghost"
+ aria-controls={props.id ?? state._id}
+ aria-expanded={state._open}
+ noText
+ type="button"
+ icon="double_chevron_left">
+
+ {state.getToggleButtonText()}
+
+
+
+
+ );
+}
diff --git a/packages/components/src/components/control-panel-desktop/control-panel-desktop.scss b/packages/components/src/components/control-panel-desktop/control-panel-desktop.scss
new file mode 100644
index 000000000000..5153d40d0313
--- /dev/null
+++ b/packages/components/src/components/control-panel-desktop/control-panel-desktop.scss
@@ -0,0 +1,29 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/density";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "../../styles/internal/component";
+@use "../../styles/internal/control-panel-desktop";
+
+.db-control-panel-desktop {
+ background-color: colors.$db-adaptive-bg-basic-level-1-default;
+ display: grid;
+ position: relative;
+ min-block-size: component.$min-mobile-header-height;
+
+ &[data-orientation="vertical"] {
+ @extend %control-panel-desktop-vertical-orientation;
+ }
+
+ &[data-orientation="horizontal"] {
+ @extend %control-panel-desktop-horizontal-orientation;
+ }
+
+ .db-link {
+ display: inline-block;
+ }
+
+ .db-navigation {
+ grid-area: navigation;
+ }
+}
diff --git a/packages/components/src/components/header/docs/Angular.md b/packages/components/src/components/control-panel-desktop/docs/Angular.md
similarity index 81%
rename from packages/components/src/components/header/docs/Angular.md
rename to packages/components/src/components/control-panel-desktop/docs/Angular.md
index 2a7ef65a4457..fdf77f505d94 100644
--- a/packages/components/src/components/header/docs/Angular.md
+++ b/packages/components/src/components/control-panel-desktop/docs/Angular.md
@@ -7,7 +7,7 @@ For general installation and configuration take a look at the [ngx-core-componen
```ts app.component.ts
//app.component.ts
import {
- DBHeader,
+ DBControlPanelDesktop,
NavigationDirective,
SecondaryActionDirective,
MetaNavigationDirective
@@ -17,7 +17,7 @@ import {
// ...
imports: [
// ...,
- DBHeader,
+ DBControlPanelDesktop,
NavigationDirective, // Optional: If you want to use a Navigation
SecondaryActionDirective, // Optional: If you want to use ActionBar
MetaNavigationDirective, // Optional: If you want to use MetaNavigation
@@ -32,9 +32,11 @@ import {
```html app.component.html
-
- Header
-
+
+ ControlPanelDesktop
+
```
#### Full
@@ -59,8 +61,13 @@ export class AppComponent {
```html app.component.html
-
- My Awesome App
+
+ My Awesome App
@@ -82,5 +89,5 @@ export class AppComponent {
Help
-
+
```
diff --git a/packages/components/src/components/header/docs/HTML.md b/packages/components/src/components/control-panel-desktop/docs/HTML.md
similarity index 73%
rename from packages/components/src/components/header/docs/HTML.md
rename to packages/components/src/components/control-panel-desktop/docs/HTML.md
index baf8cc17dd68..ec6c78999d4f 100644
--- a/packages/components/src/components/header/docs/HTML.md
+++ b/packages/components/src/components/control-panel-desktop/docs/HTML.md
@@ -8,15 +8,15 @@ For general installation and configuration take a look at the [components](https
...
-