@dbcdk/react-components 0.0.102 → 0.0.104

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

@@ -0,0 +1,29 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-default);
+}
+
+.container button {
+  color: var(--color-text);
+  min-block-size: 20px !important;
+  min-inline-size: 20px !important;
+  max-block-size: 20px !important;
+  max-inline-size: 20px !important;
+  &:hover {
+    background-color: var(--color-bg-contextual-subtle) !important;
+  }
+}
+
+.childrenContainer {
+  overflow: hidden;
+}
+
+.chevron {
+  transition: transform 0.3s ease;
+}
+
+.chevronExpanded {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,214 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var logo = require('../../../../assets/logo');
+var Button = require('../../../../components/button/Button');
+var SidebarItems = require('../../../../components/sidebar/components/sidebar-items/SidebarItems');
+var SidenavFiltering = require('../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering');
+var SidebarProvider = require('../../../../components/sidebar/providers/SidebarProvider');
+var styles = require('./SidebarContainer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const num = Number(raw);
+    return Number.isFinite(num) ? num : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredWidth(key, value) {
+  try {
+    localStorage.setItem(key, String(Math.round(value)));
+  } catch {
+  }
+}
+function removeStoredWidth(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+function SidebarContainer({
+  logo: logo$1,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder = "Filtrer menu",
+  showSettings = false,
+  footer,
+  resizable,
+  defaultWidth = 240,
+  minWidth = 160,
+  storageKey
+}) {
+  const { isSidebarCollapsed, handleSidebarCollapseChange } = SidebarProvider.useSidebar();
+  const [sidebarWidth, setSidebarWidth] = react.useState(defaultWidth);
+  const [manualWidth, setManualWidth] = react.useState(null);
+  const [isResizing, setIsResizing] = react.useState(false);
+  const [ariaMaxWidth, setAriaMaxWidth] = react.useState(void 0);
+  const containerRef = react.useRef(null);
+  const draggingRef = react.useRef(false);
+  const pointerIdRef = react.useRef(null);
+  const startXRef = react.useRef(0);
+  const startWidthRef = react.useRef(0);
+  const maxWidthRef = react.useRef(Infinity);
+  const getMaxWidth = react.useCallback(() => {
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth || document.documentElement.clientWidth : Infinity;
+    return Math.max(minWidth, viewportWidth - minWidth);
+  }, [minWidth]);
+  react.useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredWidth(storageKey);
+    if (stored === null) return;
+    setManualWidth(stored);
+    setSidebarWidth(stored);
+  }, [storageKey]);
+  react.useEffect(() => {
+    if (!storageKey) return;
+    if (manualWidth === null) {
+      removeStoredWidth(storageKey);
+      return;
+    }
+    writeStoredWidth(storageKey, manualWidth);
+  }, [manualWidth, storageKey]);
+  react.useEffect(() => {
+    setAriaMaxWidth(getMaxWidth());
+  }, [getMaxWidth]);
+  react.useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, []);
+  const updateWidth = react.useCallback((nextWidth) => {
+    setManualWidth(nextWidth);
+    setSidebarWidth(nextWidth);
+  }, []);
+  const onResizePointerDown = react.useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      if (maxWidth === null) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      maxWidthRef.current = maxWidth;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      setIsResizing(true);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+    },
+    [getMaxWidth, sidebarWidth]
+  );
+  const onResizePointerMove = react.useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const next = startWidthRef.current + (e.clientX - startXRef.current);
+      updateWidth(clamp(next, minWidth, maxWidthRef.current));
+    },
+    [minWidth, updateWidth]
+  );
+  const endResizeDrag = react.useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    setIsResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const resetWidth = react.useCallback(() => {
+    setManualWidth(null);
+    setSidebarWidth(clamp(defaultWidth, minWidth, getMaxWidth()));
+  }, [defaultWidth, getMaxWidth, minWidth]);
+  const onKeyDown = react.useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (e.key === "ArrowLeft") next = sidebarWidth - step;
+      if (e.key === "ArrowRight") next = sidebarWidth + step;
+      if (e.key === "Home") next = minWidth;
+      if (e.key === "End") next = maxWidth;
+      if (next === null) return;
+      e.preventDefault();
+      updateWidth(clamp(next, minWidth, maxWidth));
+    },
+    [getMaxWidth, minWidth, sidebarWidth, updateWidth]
+  );
+  const containerStyle = react.useMemo(
+    () => ({
+      "--sidebar-width": `${sidebarWidth}px`
+    }),
+    [sidebarWidth]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "complementary",
+      className: `${styles__default.default.container} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${isResizing ? styles__default.default.resizing : ""}`,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.productHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              size: "md",
+              variant: "inline",
+              shape: "round",
+              "aria-label": "Collapse sidebar",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: isSidebarCollapsed ? styles__default.default.collapsedIcon : "" }),
+              onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+          !hideSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.filter, children: /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, { placeholder: searchPlaceholder, showSettings }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.links} hideScrollBar`, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footerSlot, children: footer }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.companyLogo, children: logo$1 != null ? logo$1 : /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) }),
+          version && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.version} dbc-muted-text dbc-sm-text`, children: version })
+        ] }),
+        resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.resizeHandle,
+            role: "separator",
+            "aria-label": "Resize sidebar",
+            "aria-orientation": "vertical",
+            "aria-valuemin": Math.round(minWidth),
+            "aria-valuemax": ariaMaxWidth !== void 0 ? Math.round(ariaMaxWidth) : void 0,
+            "aria-valuenow": Math.round(sidebarWidth),
+            tabIndex: isSidebarCollapsed ? -1 : 0,
+            onPointerDown: onResizePointerDown,
+            onPointerMove: onResizePointerMove,
+            onPointerUp: endResizeDrag,
+            onPointerCancel: endResizeDrag,
+            onDoubleClick: resetWidth,
+            onKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.SidebarContainer = SidebarContainer;

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

@@ -0,0 +1,207 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronLeft } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { Logo } from '../../../../assets/logo';
+import { Button } from '../../../../components/button/Button';
+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';
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const num = Number(raw);
+    return Number.isFinite(num) ? num : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredWidth(key, value) {
+  try {
+    localStorage.setItem(key, String(Math.round(value)));
+  } catch {
+  }
+}
+function removeStoredWidth(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+function SidebarContainer({
+  logo,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder = "Filtrer menu",
+  showSettings = false,
+  footer,
+  resizable,
+  defaultWidth = 240,
+  minWidth = 160,
+  storageKey
+}) {
+  const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
+  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+  const [manualWidth, setManualWidth] = useState(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const [ariaMaxWidth, setAriaMaxWidth] = useState(void 0);
+  const containerRef = useRef(null);
+  const draggingRef = useRef(false);
+  const pointerIdRef = useRef(null);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const maxWidthRef = useRef(Infinity);
+  const getMaxWidth = useCallback(() => {
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth || document.documentElement.clientWidth : Infinity;
+    return Math.max(minWidth, viewportWidth - minWidth);
+  }, [minWidth]);
+  useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredWidth(storageKey);
+    if (stored === null) return;
+    setManualWidth(stored);
+    setSidebarWidth(stored);
+  }, [storageKey]);
+  useEffect(() => {
+    if (!storageKey) return;
+    if (manualWidth === null) {
+      removeStoredWidth(storageKey);
+      return;
+    }
+    writeStoredWidth(storageKey, manualWidth);
+  }, [manualWidth, storageKey]);
+  useEffect(() => {
+    setAriaMaxWidth(getMaxWidth());
+  }, [getMaxWidth]);
+  useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, []);
+  const updateWidth = useCallback((nextWidth) => {
+    setManualWidth(nextWidth);
+    setSidebarWidth(nextWidth);
+  }, []);
+  const onResizePointerDown = useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      if (maxWidth === null) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      maxWidthRef.current = maxWidth;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      setIsResizing(true);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+    },
+    [getMaxWidth, sidebarWidth]
+  );
+  const onResizePointerMove = useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const next = startWidthRef.current + (e.clientX - startXRef.current);
+      updateWidth(clamp(next, minWidth, maxWidthRef.current));
+    },
+    [minWidth, updateWidth]
+  );
+  const endResizeDrag = useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    setIsResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const resetWidth = useCallback(() => {
+    setManualWidth(null);
+    setSidebarWidth(clamp(defaultWidth, minWidth, getMaxWidth()));
+  }, [defaultWidth, getMaxWidth, minWidth]);
+  const onKeyDown = useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (e.key === "ArrowLeft") next = sidebarWidth - step;
+      if (e.key === "ArrowRight") next = sidebarWidth + step;
+      if (e.key === "Home") next = minWidth;
+      if (e.key === "End") next = maxWidth;
+      if (next === null) return;
+      e.preventDefault();
+      updateWidth(clamp(next, minWidth, maxWidth));
+    },
+    [getMaxWidth, minWidth, sidebarWidth, updateWidth]
+  );
+  const containerStyle = useMemo(
+    () => ({
+      "--sidebar-width": `${sidebarWidth}px`
+    }),
+    [sidebarWidth]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "complementary",
+      className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ""} ${isResizing ? styles.resizing : ""}`,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxs("div", { className: styles.productHeader, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "md",
+              variant: "inline",
+              shape: "round",
+              "aria-label": "Collapse sidebar",
+              icon: /* @__PURE__ */ jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : "" }),
+              onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          !hideSearch && /* @__PURE__ */ jsx("div", { className: styles.filter, children: /* @__PURE__ */ jsx(SidenavFiltering, { placeholder: searchPlaceholder, showSettings }) }),
+          /* @__PURE__ */ jsx("div", { className: `${styles.links} hideScrollBar`, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
+        ] }),
+        footer && /* @__PURE__ */ jsx("div", { className: styles.footerSlot, children: footer }),
+        /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.companyLogo, children: logo != null ? logo : /* @__PURE__ */ jsx(Logo, {}) }),
+          version && /* @__PURE__ */ jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })
+        ] }),
+        resizable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.resizeHandle,
+            role: "separator",
+            "aria-label": "Resize sidebar",
+            "aria-orientation": "vertical",
+            "aria-valuemin": Math.round(minWidth),
+            "aria-valuemax": ariaMaxWidth !== void 0 ? Math.round(ariaMaxWidth) : void 0,
+            "aria-valuenow": Math.round(sidebarWidth),
+            tabIndex: isSidebarCollapsed ? -1 : 0,
+            onPointerDown: onResizePointerDown,
+            onPointerMove: onResizePointerMove,
+            onPointerUp: endResizeDrag,
+            onPointerCancel: endResizeDrag,
+            onDoubleClick: resetWidth,
+            onKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SidebarContainer };

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -0,0 +1,260 @@
+.container {
+  position: relative;
+  flex-shrink: 1;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  width: var(--sidebar-width);
+  inline-size: var(--sidebar-width);
+  box-sizing: border-box;
+  border-inline-end: var(--border-width-thin) solid var(--color-border-default);
+  transition:
+    width var(--transition-fast) var(--ease-standard),
+    inline-size var(--transition-fast) var(--ease-standard);
+}
+
+.container.resizing {
+  transition: none;
+}
+
+/* Collapsed state */
+.container.collapsed {
+  width: var(--component-size-lg);
+  inline-size: var(--component-size-lg);
+  box-sizing: content-box;
+  gap: var(--spacing-sm);
+}
+
+/* Global links / focus */
+.container a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.container a:focus-visible,
+.container button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* HEADER (product + collapse) */
+.header {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  box-shadow: 0 1px 0 var(--color-border-default);
+  padding-inline: var(--spacing-xs);
+  min-block-size: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.productHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  flex-grow: 1;
+}
+
+/* Product logo container */
+.productLogo {
+  display: flex;
+  align-items: center;
+  max-inline-size: 100%;
+  block-size: 25px;
+  min-width: 0;
+}
+
+/* Let wrapper elements such as Next.js <Link> inherit the logo sizing context */
+.productLogo > * {
+  display: flex;
+  align-items: center;
+  max-inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+}
+
+/* Keep product logo visible in expanded state even when wrapped */
+.productLogo :is(img, svg) {
+  display: block;
+  block-size: 100%;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+
+/* Collapse button */
+.productHeader button {
+  flex: 0 0 auto;
+}
+
+/* Rotate icon when collapsed */
+.collapsedIcon {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
+/* CONTENT */
+.content {
+  overflow: auto;
+  flex: 1 1 auto;
+  overflow-y: visible;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  gap: 5px;
+}
+
+.container:not(.collapsed) .content {
+  gap: var(--spacing-md);
+}
+
+/* FILTER */
+.filter button {
+  border-radius: 0;
+  min-height: var(--component-size-md);
+  width: 100%;
+  padding: var(--spacing-xs);
+  color: var(--color-fg-muted);
+}
+
+.container:not(.collapsed) .filter {
+  padding-inline: var(--spacing-xs);
+}
+
+/* LINKS */
+.links {
+  overflow: auto;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: 2px;
+  font-size: var(--font-size-sm);
+}
+
+.container:not(.collapsed) .links {
+  padding-inline: var(--spacing-xs);
+}
+
+.container .links button {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+  display: inline-flex;
+  padding: 0;
+}
+
+/* RESIZE HANDLE */
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 1;
+  user-select: none;
+  touch-action: none;
+  outline: none;
+}
+
+.resizeHandle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--border-width-thin);
+  background-color: var(--color-border-subtle);
+  opacity: 0;
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+.resizeHandle:hover::after,
+.resizeHandle:active::after {
+  opacity: 1;
+  background-color: var(--color-border-strong);
+}
+
+.resizeHandle:active::after {
+  background-color: var(--color-brand);
+}
+
+.resizeHandle:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
+.container.collapsed .resizeHandle {
+  display: none;
+}
+
+/* CUSTOM FOOTER SLOT */
+.footerSlot {
+  flex: 0 0 auto;
+}
+
+.container:not(.collapsed) .footerSlot {
+  padding-inline: var(--spacing-xs);
+}
+
+/* FOOTER (company logo) */
+.footer {
+  flex: 0 0 auto;
+  border-top: 1px solid var(--color-border-default);
+  padding: var(--spacing-sm);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.companyLogo {
+  opacity: 0.6;
+}
+
+.companyLogo svg {
+  width: 80px;
+  height: auto;
+  display: block;
+}
+
+/* Hide company logo in collapsed state */
+.container.collapsed .companyLogo {
+  display: none;
+}
+
+.version {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.logo {
+  display: none;
+}
+
+/* === Collapsed header behavior ===
+   Hide product logo entirely so the collapse button can truly center. */
+.container.collapsed .productLogo {
+  display: none;
+}
+
+/* Center the collapse button in collapsed state */
+.container.collapsed .productHeader {
+  justify-content: center;
+  gap: 0;
+}
+
+.container.collapsed .header {
+  padding: 0;
+}
+
+.container.collapsed .productHeader button {
+  margin-inline: auto;
+}