@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/sidebar/components/SidebarItem.js

@@ -7,7 +7,9 @@ function SidebarItem({
   icon,
   href
 }) {
-  if (!Component) return null;
+  if (!Component) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(SidebarItemContent, { icon, label, href }) });
 }
 

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

@@ -7,6 +7,7 @@ var lucideReact = require('lucide-react');
 var styles = require('./ExpandableSidebarItem.module.css');
 var SidebarProvider = require('../../providers/SidebarProvider');
 var SidebarItem = require('../SidebarItem');
+var Button = require('../../../button/Button');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,15 +17,27 @@ function ExpandableSidebarItem({
   items,
   label,
   icon,
+  component: Component,
   href
 }) {
-  const { defaultExpanded, resetExpandAll, activeLink } = SidebarProvider.useSidebar();
+  const {
+    defaultExpanded,
+    resetExpandAll,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    expandedItems
+  } = SidebarProvider.useSidebar();
   const [expanded, setExpanded] = react.useState(false);
   const [closing, setClosing] = react.useState(false);
   const [ready, setReady] = react.useState(false);
   react.useEffect(() => {
     setReady(true);
   }, []);
+  react.useEffect(() => {
+    if (expandedItems.has(href)) {
+      setExpanded(true);
+    }
+  }, [expandedItems]);
   react.useEffect(() => {
     if (defaultExpanded === null) {
       return;
@@ -37,35 +50,48 @@ function ExpandableSidebarItem({
       setClosing(false);
     }
   }, [closing, ready]);
-  const toggleAccordion = react.useCallback(() => {
-    resetExpandAll();
-    if (!expanded) {
-      setExpanded(true);
-      return;
-    }
-    setClosing(true);
-  }, [expanded]);
+  const toggleAccordion = react.useCallback(
+    (e, onlyExpand = false) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      resetExpandAll();
+      handleSidebarCollapseChange == null ? void 0 : handleSidebarCollapseChange(false);
+      if (!expanded) {
+        setExpanded(true);
+        return;
+      }
+      if (!isSidebarCollapsed && !onlyExpand) {
+        setClosing(true);
+      }
+    },
+    [expanded]
+  );
   if (!items) return null;
+  if (!Component) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${expanded ? styles__default.default.expanded : ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: toggleAccordion, className: styles__default.default.button, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
       SidebarItemContent.SidebarItemContent,
       {
         icon,
         label,
-        suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(
+        href,
+        disableActiveStyles: expanded,
+        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsxRuntime.jsx(
           lucideReact.ChevronDown,
           {
             className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
           }
-        )
+        ) })
       }
     ) }),
-    expanded && /* @__PURE__ */ jsxRuntime.jsx(
+    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         onAnimationEnd: handleAnimationEnd,
         className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
-        children: items.map(({ component: Component, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component, label: label2, icon: icon2, href: href2 }, id))
+        children: items.map(({ component: Component2, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component2, label: label2, icon: icon2, href: href2 }, id))
       }
     )
   ] });

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

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

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

@@ -5,20 +5,33 @@ import { ChevronDown } from 'lucide-react';
 import styles from './ExpandableSidebarItem.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
 import { SidebarItem } from '../SidebarItem';
+import { Button } from '../../../button/Button';
 
 function ExpandableSidebarItem({
   items,
   label,
   icon,
+  component: Component,
   href
 }) {
-  const { defaultExpanded, resetExpandAll, activeLink } = useSidebar();
+  const {
+    defaultExpanded,
+    resetExpandAll,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    expandedItems
+  } = useSidebar();
   const [expanded, setExpanded] = useState(false);
   const [closing, setClosing] = useState(false);
   const [ready, setReady] = useState(false);
   useEffect(() => {
     setReady(true);
   }, []);
+  useEffect(() => {
+    if (expandedItems.has(href)) {
+      setExpanded(true);
+    }
+  }, [expandedItems]);
   useEffect(() => {
     if (defaultExpanded === null) {
       return;
@@ -31,35 +44,48 @@ function ExpandableSidebarItem({
       setClosing(false);
     }
   }, [closing, ready]);
-  const toggleAccordion = useCallback(() => {
-    resetExpandAll();
-    if (!expanded) {
-      setExpanded(true);
-      return;
-    }
-    setClosing(true);
-  }, [expanded]);
+  const toggleAccordion = useCallback(
+    (e, onlyExpand = false) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      resetExpandAll();
+      handleSidebarCollapseChange == null ? void 0 : handleSidebarCollapseChange(false);
+      if (!expanded) {
+        setExpanded(true);
+        return;
+      }
+      if (!isSidebarCollapsed && !onlyExpand) {
+        setClosing(true);
+      }
+    },
+    [expanded]
+  );
   if (!items) return null;
+  if (!Component) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ""}`, children: [
-    /* @__PURE__ */ jsx("button", { onClick: toggleAccordion, className: styles.button, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
       SidebarItemContent,
       {
         icon,
         label,
-        suffixIcon: /* @__PURE__ */ jsx(
+        href,
+        disableActiveStyles: expanded,
+        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsx(
           ChevronDown,
           {
             className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
           }
-        )
+        ) })
       }
     ) }),
-    expanded && /* @__PURE__ */ jsx(
+    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsx(
       "div",
       {
         onAnimationEnd: handleAnimationEnd,
         className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
-        children: items.map(({ component: Component, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsx(SidebarItem, { component: Component, label: label2, icon: icon2, href: href2 }, id))
+        children: items.map(({ component: Component2, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsx(SidebarItem, { component: Component2, label: label2, icon: icon2, href: href2 }, id))
       }
     )
   ] });

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

@@ -1,5 +1,4 @@
 .button {
-  color: var(--color-text);
 }
 
 .container {
@@ -9,49 +8,21 @@
   border-radius: var(--border-radius-default);
 }
 
-.container.expanded {
+.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;
-
-  /* --width: 2px;
-  --color: var(--opac-bg-default); */
-}
-
-/* .childrenContainer::after {
 }
 
-.childrenContainer > * {
-  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: top;
-    background-color: var(--color);
-    left: 0;
-    height: 100%;
-    width: var(--width);
-    left: var(--icon-size);
-    transform: translateX(-50%);
-  }
-  &:last-of-type {
-    &::before {
-      height: calc(50% + var(--width));
-    }
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 50%;
-    background-color: var(--color);
-    height: var(--width);
-    width: calc(var(--icon-size) / 2 + 5px);
-    left: calc(var(--icon-size) + var(--width) / 2);
-    transform: translateY(100%);
-  }
-} */
-
 .chevron {
   transition: transform 0.3s ease;
 }

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../../../button/Button');
+var styles = require('./SidebarContainer.module.css');
+var logo = require('../../../../assets/logo');
+var Headline = require('../../../headline/Headline');
+var lucideReact = require('lucide-react');
+var SidebarItems = require('../sidebar-items/SidebarItems');
+var SidenavFiltering = require('../sidenav-filteirng/SidenavFiltering');
+var SidebarProvider = require('../../providers/SidebarProvider');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
+
+function SidebarContainer({
+  logo: logo$1,
+  productName,
+  productLogo,
+  activeLink
+}) {
+  const { isSidebarCollapsed, handleSidebarCollapseChange } = SidebarProvider.useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${isSidebarCollapsed ? styles__default.default.collapsed : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.logoContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: isSidebarCollapsed ? "center" : "right" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            size: "sm",
+            variant: "inline",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: isSidebarCollapsed ? styles__default.default.collapsedIcon : "" }),
+            onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.logo, children: logo$1 != null ? logo$1 : /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) })
+      ] }),
+      productName && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, children: productName }),
+      productLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.filter, children: /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.links} hideScrollBar`, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footer })
+  ] });
+}
+
+exports.SidebarContainer = SidebarContainer;

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

@@ -0,0 +1,8 @@
+interface SidebarContainerProps {
+    logo?: React.ReactNode;
+    productName?: string;
+    productLogo?: React.ReactNode;
+    activeLink?: string;
+}
+export declare function SidebarContainer({ logo, productName, productLogo, activeLink, }: SidebarContainerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../button/Button';
+import styles from './SidebarContainer.module.css';
+import { Logo } from '../../../../assets/logo';
+import { Headline } from '../../../headline/Headline';
+import { ChevronLeft } from 'lucide-react';
+import { SidebarItems } from '../sidebar-items/SidebarItems';
+import SidenavFiltering from '../sidenav-filteirng/SidenavFiltering';
+import { useSidebar } from '../../providers/SidebarProvider';
+
+function SidebarContainer({
+  logo,
+  productName,
+  productLogo,
+  activeLink
+}) {
+  const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsxs("span", { className: styles.logoContainer, children: [
+        /* @__PURE__ */ jsx("div", { style: { textAlign: isSidebarCollapsed ? "center" : "right" }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "inline",
+            icon: /* @__PURE__ */ jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : "" }),
+            onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: styles.logo, children: logo != null ? logo : /* @__PURE__ */ jsx(Logo, {}) })
+      ] }),
+      productName && /* @__PURE__ */ jsx(Headline, { disableMargin: true, children: productName }),
+      productLogo && /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.filter, children: /* @__PURE__ */ jsx(SidenavFiltering, {}) }),
+      /* @__PURE__ */ jsx("div", { className: `${styles.links} hideScrollBar`, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.footer })
+  ] });
+}
+
+export { SidebarContainer };

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

@@ -0,0 +1,155 @@
+.container {
+  flex-shrink: 1;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  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);
+  padding-bottom: var(--spacing-lg);
+  transition:
+    width var(--transition-fast) var(--ease-standard),
+    inline-size var(--transition-fast) var(--ease-standard);
+}
+
+.container.collapsed {
+  width: var(--component-size-lg);
+  inline-size: var(--component-size-lg);
+  box-sizing: content-box;
+  gap: var(--spacing-sm);
+  .content {
+    gap: var(--spacing-2xs);
+  }
+}
+
+.container .logoContainer button,
+.container .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) .links,
+.container:not(.collapsed) .filter {
+  padding-inline: var(--spacing-sm);
+}
+
+.container .logoContainer {
+  padding-top: var(--spacing-xs);
+  min-block-size: 60px;
+  border-bottom: 1px solid var(--color-border-default);
+  padding-bottom: var(--spacing-xxs);
+}
+
+.container.collapsed .logoContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.container:not(.collapsed) .logoContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding-right: var(--spacing-xxs);
+}
+
+.container a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.container .links button {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+  display: inline-flex;
+  padding: 0;
+}
+
+.container a:focus-visible,
+.container button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.links {
+  overflow: auto;
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+  flex-direction: column;
+  gap: 2px;
+  font-size: var(--font-size-sm);
+}
+
+.container:not(.collapsed) .links {
+  padding-inline: var(--spacing-sm);
+}
+
+.header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.container:not(.collapsed) .header {
+  gap: var(--spacing-sm);
+}
+
+.container:not(.collapsed) .logo {
+  padding: 0 var(--spacing-sm);
+}
+.container.collapsed .logo {
+  display: none;
+}
+
+.logo img,
+.logo svg {
+  inline-size: 50px;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.container.collapsed .productLogo {
+  display: none;
+}
+.productLogo {
+  max-inline-size: 100%;
+  padding: 0 var(--spacing-sm);
+}
+
+.productLogo svg {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.collapsedIcon {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+.content {
+  overflow: auto;
+  flex: 1 1 auto;
+  overflow-y: visible;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  gap: 5px;
+  &:not(.collapsed) {
+    gap: var(--spacing-md);
+  }
+}
+
+.footer {
+  flex: 0 0 auto;
+}

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -12,16 +12,23 @@ function SidebarItemContent({
   icon,
   label,
   suffixIcon,
-  href
+  href,
+  disableActiveStyles = false
 }) {
-  const { activeLink } = SidebarProvider.useSidebar();
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${styles__default.default.container} ${activeLink === href ? styles__default.default.active : ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
-    ] }),
-    suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
-  ] });
+  const { activeLink, isSidebarCollapsed } = SidebarProvider.useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `${styles__default.default.container} ${!disableActiveStyles && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
+          !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+        ] }),
+        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
+      ]
+    }
+  );
 }
 
 exports.SidebarItemContent = SidebarItemContent;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -4,5 +4,6 @@ export interface SidebarItemContentProps {
     label: React.ReactNode;
     suffixIcon?: React.ReactNode;
     href?: string;
+    disableActiveStyles?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -6,16 +6,23 @@ function SidebarItemContent({
   icon,
   label,
   suffixIcon,
-  href
+  href,
+  disableActiveStyles = false
 }) {
-  const { activeLink } = useSidebar();
-  return /* @__PURE__ */ jsxs("span", { className: `${styles.container} ${activeLink === href ? styles.active : ""}`, children: [
-    /* @__PURE__ */ jsxs("span", { children: [
-      /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
-      /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-    ] }),
-    suffixIcon && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
-  ] });
+  const { activeLink, isSidebarCollapsed } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
+          !isSidebarCollapsed && /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+        ] }),
+        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
+      ]
+    }
+  );
 }
 
 export { SidebarItemContent };