@dbcdk/react-components 0.0.8 → 0.0.10

package/dist/components/overlay/side-panel/SidePanel.js

@@ -1,10 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { X } from 'lucide-react';
+import { useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './SidePanel.module.css';
-export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '300px', ...props }) {
-    return (_jsxs(_Fragment, { children: [isOpen && showBackdrop && (_jsx("div", { className: styles.backdrop, onClick: () => {
-                    onClose();
-                } })), _jsxs("div", { ...props, className: `${styles.sidePanel} ${isOpen ? styles.open : ''}`, style: { '--side-panel-width': width }, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, addition: headerAddition, children: header }), _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: onClose, children: _jsx(X, {}) })] }) }), _jsx("div", { className: styles.content, children: children }), _jsx("div", { className: styles.actions, children: actions })] })] }));
+export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '400px', details, detailsHeader = 'Output', detailsWidth = '420px', onCloseDetails, detailsHeaderAddition, ...props }) {
+    const [mounted, setMounted] = useState(false);
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    const [isActive, setIsActive] = useState(false);
+    const panelRef = useRef(null);
+    useEffect(() => setMounted(true), []);
+    // OPEN: ensure rendered so animation can play
+    useEffect(() => {
+        if (isOpen)
+            setShouldRender(true);
+    }, [isOpen]);
+    // Two-phase OPEN/CLOSE class toggle (lets CSS transitions kick in reliably)
+    useEffect(() => {
+        if (!shouldRender)
+            return;
+        if (!isOpen) {
+            setIsActive(false);
+            return;
+        }
+        const raf = requestAnimationFrame(() => setIsActive(true));
+        return () => cancelAnimationFrame(raf);
+    }, [isOpen, shouldRender]);
+    // When closing: wait for transform transition end to unmount.
+    useEffect(() => {
+        if (!shouldRender)
+            return;
+        const el = panelRef.current;
+        if (!el)
+            return;
+        const onTransitionEnd = (e) => {
+            if (e.target !== el)
+                return;
+            if (e.propertyName !== 'transform')
+                return;
+            if (!isOpen)
+                setShouldRender(false);
+        };
+        el.addEventListener('transitionend', onTransitionEnd);
+        return () => el.removeEventListener('transitionend', onTransitionEnd);
+    }, [isOpen, shouldRender]);
+    if (!mounted)
+        return null;
+    if (!shouldRender)
+        return null;
+    const hasDetails = Boolean(details);
+    return createPortal(_jsxs(_Fragment, { children: [showBackdrop && (_jsx("div", { className: `${styles.backdrop} ${isActive ? styles.backdropOpen : ''}`, onClick: e => {
+                    e.stopPropagation();
+                    onClose(e);
+                } })), _jsxs("div", { ref: panelRef, ...props, className: `${styles.sidePanel} ${isActive ? styles.open : ''} ${hasDetails ? styles.withDetails : styles.noDetails}`, style: {
+                    '--side-panel-width': width,
+                    '--details-width': detailsWidth,
+                }, "data-cy": "details-panel", role: "dialog", "aria-modal": "true", children: [hasDetails ? (_jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [_jsxs("div", { className: styles.detailsHeader, children: [_jsx("div", { className: styles.detailsTitle, children: detailsHeader }), _jsxs("div", { className: styles.detailsHeaderActions, children: [detailsHeaderAddition, onCloseDetails ? (_jsx(Button, { type: "button", size: "sm", variant: "outlined", onClick: e => {
+                                                    e.stopPropagation();
+                                                    onCloseDetails();
+                                                }, children: "Luk" })) : null] })] }), _jsx("div", { className: styles.detailsContent, children: details })] })) : null, _jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, children: header }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [headerAddition, _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: e => {
+                                                        e.stopPropagation();
+                                                        onClose(e);
+                                                    }, "aria-label": "Close panel", children: _jsx(X, {}) })] })] }) }), _jsx("div", { className: styles.content, "data-cy": "details-panel-content", children: children }), actions && _jsx("div", { className: styles.actions, children: actions })] })] })] }), document.body);
 }

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -1,56 +1,179 @@
 .sidePanel {
-  padding: 0 var(--spacing-md);
+  --col-pad: var(--spacing-md);
+
+  /* Dial these for “feel” */
+  --panel-dur: 220ms;
+  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth spring-ish without overshoot */
+
+  /* Shadow + edge */
+  --shadow-opacity: 0.22;
+  --edge-opacity: 0.12;
+
+  box-sizing: border-box;
+  padding: 0;
   height: 100vh;
-  width: var(--side-panel-width, 400px);
+
   position: fixed;
   right: 0;
   top: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
+
+  background-color: var(--color-bg-surface);
+  z-index: var(--z-drawer);
+
+  transform: translate3d(100%, 0, 0);
+  transition: transform var(--panel-dur) var(--panel-ease);
+  will-change: transform;
+
+  display: grid;
+  gap: var(--spacing-md);
+  align-items: stretch;
+
+  overflow: hidden;
+  pointer-events: auto;
+
+  /* Make pseudo-elements layer properly */
+  isolation: isolate;
+}
+
+/* “Lift” layer: drop-shadow + edge highlight (both fade in) */
+.sidePanel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1; /* behind content but within isolated stacking context */
+
+  /* 1) drop-shadow = smoother than animating box-shadow
+     2) edge gradient = premium depth cue */
+  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, var(--shadow-opacity)));
+  opacity: 0;
+
+  /* Edge highlight from the left edge (panel’s leading edge) */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, var(--edge-opacity)),
+    rgba(255, 255, 255, 0) 36%
+  );
+
+  transition: opacity var(--panel-dur) var(--panel-ease);
+
+  will-change: opacity;
+}
+
+/* Optional: super subtle “sheen” right as it settles (feels snappy) */
+.sidePanel.open::before {
+  opacity: 1;
+}
+
+.sidePanel.open {
+  transform: translate3d(0, 0, 0);
+}
+
+/* MAIN TRACK WIDTH = content + padding*2 */
+.sidePanel.noDetails {
+  grid-template-columns: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+  width: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+}
+
+/* when details show, main track stays the same; panel grows */
+.sidePanel.withDetails {
+  grid-template-columns:
+    calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2))
+    calc(var(--details-width, 420px) + (var(--col-pad) * 2));
+
+  width: calc(
+    (var(--side-panel-width, 400px) + (var(--col-pad) * 2)) +
+      (var(--details-width, 420px) + (var(--col-pad) * 2)) + var(--spacing-md)
+  );
+}
+
+/* columns get the padding */
+.mainCol,
+.detailsCol {
+  box-sizing: border-box;
+  padding: 0 var(--col-pad);
+
+  min-width: 0;
+  min-height: 0;
+
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
-  transform: translateX(100%);
-  transition: transform 0.2s ease-in-out;
-  box-shadow: var(--shadow-lg);
-  z-index: var(--z-drawer);
-  background-color: var(--color-bg-surface);
-  max-height: 100vh;
+}
+
+.header {
+  padding: var(--spacing-md) 0;
 }
 
 .content {
   flex: 1;
+  min-height: 0;
+  overflow: auto;
   font-size: var(--font-size-sm);
 }
 
-.header {
-  position: sticky;
-  top: 0;
-  padding: var(--spacing-md) 0;
-  background: inherit;
-}
-
 .actions {
-  position: sticky;
   padding: var(--spacing-md) 0;
-  background: inherit;
-  bottom: 0;
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-sm);
+  min-width: 0;
 }
 
-.sidePanel.open {
-  transform: translateX(0);
+/* details styling */
+.detailsCol {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-bg-surface);
+}
+
+.detailsHeader {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.detailsTitle {
+  font-weight: 600;
 }
 
+.detailsHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.detailsContent {
+  padding: var(--spacing-md) 0;
+  overflow: auto;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+/* Backdrop with a nice fade */
 .backdrop {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--overlay-scrim);
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
   z-index: var(--z-backdrop);
+
+  opacity: 0;
+  transition: opacity var(--panel-dur) var(--panel-ease);
+  will-change: opacity;
+}
+
+.backdropOpen {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidePanel,
+  .sidePanel::before,
+  .backdrop {
+    transition: none !important;
+  }
 }

package/dist/components/overlay/side-panel/useSidePanel.d.ts

@@ -1,4 +1,4 @@
-export declare function useSidePanel(): {
+export declare function useSidePanel(initialOpen?: boolean): {
     isOpen: boolean;
     openSidePanel: () => void;
     closeSidePanel: () => void;

package/dist/components/overlay/side-panel/useSidePanel.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-export function useSidePanel() {
-    const [isOpen, setIsOpen] = useState(false);
+export function useSidePanel(initialOpen = false) {
+    const [isOpen, setIsOpen] = useState(initialOpen);
     const openSidePanel = () => setIsOpen(true);
     const closeSidePanel = () => setIsOpen(false);
     return {

package/dist/components/page-layout/PageLayout.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
 import styles from './PageLayout.module.css';
-/** Base component */
 const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, orientation = 'vertical', }) => {
     if (orientation === 'vertical') {
         return (_jsx("div", { className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ''}`, children: _jsxs("div", { style: { flex: 1, display: 'flex', height: '100%', maxWidth: '100%' }, children: [sidebar, _jsxs("div", { style: {
@@ -17,7 +16,6 @@ const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, o
                                     display: 'flex',
                                     flexDirection: 'column',
                                     padding: 'var(--spacing-md)',
-                                    gap: 'var(--spacing-md)',
                                     backgroundColor: 'var(--color-bg-surface)',
                                     overflow: 'auto',
                                 }, children: children })] })] }) }));

package/dist/components/popover/Popover.js

@@ -1,37 +1,49 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import styles from './Popover.module.css';
 export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
     const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
     const containerRef = useRef(null);
     const contentRef = useRef(null);
+    // avoid SSR/hydration mismatch
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
     const computeAndSetPosition = useCallback((show) => {
         const container = containerRef.current;
         const content = contentRef.current;
         if (!container || !content)
             return;
         const triggerRect = container.getBoundingClientRect();
+        // Temporarily measure content size by forcing it into the layout.
         const prevVis = content.style.visibility;
         const prevDisp = content.style.display;
         const prevMinWidth = content.style.minWidth;
         const prevWidth = content.style.width;
+        const prevTop = content.style.top;
+        const prevLeft = content.style.left;
         content.style.visibility = 'hidden';
         content.style.display = 'block';
+        content.style.top = '0px';
+        content.style.left = '0px';
         content.style.minWidth = minWidth;
         content.style.width = 'auto';
         const minWidthPx = content.offsetWidth;
         const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
-        // Now apply desired width and re-measure final size (height may depend on width).
+        // Apply desired width and re-measure final size (height may depend on width).
         content.style.minWidth = `${desiredWidthPx}px`;
         content.style.width = `${desiredWidthPx}px`;
         const contentWidth = content.offsetWidth;
         const contentHeight = content.offsetHeight;
+        // Restore previous inline styles
         content.style.visibility = prevVis;
         content.style.display = prevDisp;
         content.style.minWidth = prevMinWidth;
         content.style.width = prevWidth;
+        content.style.top = prevTop;
+        content.style.left = prevLeft;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         const spaceAbove = Math.max(0, triggerRect.top);
@@ -75,6 +87,12 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         open: () => computeAndSetPosition(true),
         isOpen: () => !!pos.visible,
     }), [closePopover, computeAndSetPosition, pos.visible]);
+    // Recompute position after open to account for content becoming visible / measured.
+    useLayoutEffect(() => {
+        if (pos.visible)
+            computeAndSetPosition(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pos.visible]);
     useEffect(() => {
         if (!pos.visible)
             return;
@@ -102,17 +120,18 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
             window.removeEventListener('scroll', handleReposition, true);
         };
     }, [pos.visible, closePopover, computeAndSetPosition]);
-    return (_jsxs("div", { className: styles.container, ref: containerRef, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), _jsx("div", { ref: contentRef, className: styles.content, style: {
-                    top: pos.top,
-                    left: pos.left,
-                    visibility: pos.visible ? 'visible' : 'hidden',
-                    minWidth: pos.width ? `${pos.width}px` : minWidth,
-                    width: pos.width ? `${pos.width}px` : undefined,
-                    maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-                    maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
-                    overflow: 'auto',
-                }, role: "dialog", "aria-hidden": !pos.visible, children: typeof children === 'function'
-                    ? children(closePopover)
-                    : children })] }));
+    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), mounted &&
+                createPortal(_jsx("div", { ref: contentRef, className: styles.content, style: {
+                        top: pos.top,
+                        left: pos.left,
+                        visibility: pos.visible ? 'visible' : 'hidden',
+                        minWidth: pos.width ? `${pos.width}px` : minWidth,
+                        width: pos.width ? `${pos.width}px` : undefined,
+                        maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+                        maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
+                        overflow: 'auto',
+                    }, role: "dialog", "aria-hidden": !pos.visible, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
+                        ? children(closePopover)
+                        : children }), document.body)] }));
 });
 Popover.displayName = 'Popover';

package/dist/components/popover/Popover.module.css

@@ -4,15 +4,11 @@
 
 .content {
   position: fixed;
-  top: 100%;
-  left: 0;
   border: 1px solid var(--color-border-default);
   background-color: var(--color-bg-surface);
   border-radius: var(--border-radius-default);
   padding: var(--spacing-sm) 0;
   z-index: var(--z-popover);
-  max-width: 80vw;
-  max-height: 80vh;
   overflow: auto;
   box-shadow: var(--shadow-md);
 }

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { NavBarItem } from '../../../../components/nav-bar/NavBar';
-interface ExpandableSidebarItemProps {
+import type { NavBarItem } from '../../../../components/nav-bar/NavBar';
+type ExpandableSidebarItemProps = {
     items: NavBarItem[];
     label: string;
-    component?: React.ElementType;
+    component: React.ElementType;
     icon: React.ReactNode;
-    href?: string;
-}
+    href: string;
+};
 export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -7,6 +7,9 @@ import { Button } from '../../../button/Button';
 import { useSidebar } from '../../providers/SidebarProvider';
 import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
 import { SidebarItem } from '../SidebarItem';
+import { ExpandableSidebarItem as ExpandableChild } from '../expandable-sidebar-item/ExpandableSidebarItem';
+const isGroup = (item) => item.type === 'group';
+const isExpandable = (item) => item.type === 'expandable';
 export function ExpandableSidebarItem({ items, label, icon, component: Component, href, }) {
     const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandedItems, } = useSidebar();
     const [expanded, setExpanded] = useState(false);
@@ -21,9 +24,8 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
         }
     }, [expandedItems, href]);
     useEffect(() => {
-        if (defaultExpanded === null) {
+        if (defaultExpanded === null)
             return;
-        }
         setExpanded(defaultExpanded);
     }, [defaultExpanded]);
     const handleAnimationEnd = useCallback(() => {
@@ -45,10 +47,16 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
             setClosing(true);
         }
     }, [expanded, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]);
-    if (!items)
-        return null;
-    if (!Component) {
-        return null;
-    }
-    return (_jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ''}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map(({ component: Component, label, icon, href }, id) => (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, id))) }))] }));
+    const renderNavItem = (item, key) => {
+        var _a, _b;
+        if (isGroup(item)) {
+            return (_jsxs("div", { className: styles.group, children: [_jsx("div", { className: styles.groupLabel, children: item.label }), (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))] }, key));
+        }
+        if (isExpandable(item)) {
+            return (_jsx(ExpandableChild, { items: (_b = item.children) !== null && _b !== void 0 ? _b : [], label: item.label, icon: item.icon, href: item.href, component: item.component }, key));
+        }
+        // Default item (type 'item' or undefined)
+        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href }, key));
+    };
+    return (_jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ''}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
 }

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -1,6 +1,3 @@
-.button {
-}
-
 .container {
   position: relative;
   display: flex;

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -5,5 +5,7 @@ interface SidebarContainerProps {
     productLogo?: ReactNode;
     activeLink?: string;
 }
-export declare function SidebarContainer({ logo, productName, productLogo, activeLink, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, // DBC Digital (company)
+productLogo, // DataIO (product)
+activeLink, }: SidebarContainerProps): JSX.Element;
 export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft } from 'lucide-react';
 import { Logo } from '../../../../assets/logo';
 import { Button } from '../../../../components/button/Button';
-import { Headline } from '../../../../components/headline/Headline';
 import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
 import styles from './SidebarContainer.module.css';
-export function SidebarContainer({ logo, productName, productLogo, activeLink, }) {
+export function SidebarContainer({ logo, // DBC Digital (company)
+productLogo, // DataIO (product)
+activeLink, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsxs("div", { className: styles.header, children: [_jsxs("span", { className: styles.logoContainer, children: [_jsx("div", { style: { textAlign: isSidebarCollapsed ? 'center' : 'right' }, children: _jsx(Button, { size: "sm", variant: "inline", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) }) }), _jsx("div", { className: styles.logo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) })] }), productName && _jsx(Headline, { disableMargin: true, children: productName }), productLogo && _jsx("div", { className: styles.productLogo, children: productLogo })] }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsx("div", { className: styles.footer })] }));
+    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsx("div", { className: styles.footer, children: _jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }) })] }));
 }