@streamoid/ui 0.3.1 → 0.3.2

package/dist/index.css

@@ -3447,10 +3447,20 @@
   line-height: var(--text-text-sm-regular-line-height, 1.25rem);
   font-weight: var(--text-text-sm-regular-font-weight, 400);
   position: relative;
-  width: 9.9375rem;
+  flex: 1 0 0;
+  min-width: 0;
   height: 1.25rem;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
+}
+.ScSidebarMenu_moreIconWrapper {
+  display: none;
+  align-items: center;
+  padding: 0.125rem;
+  border-radius: var(--radius-md, 0.5rem);
+  flex-shrink: 0;
+  cursor: pointer;
 }
 .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-active {
   background: var(--alias-fill-neutral-neutralselected, #242424);
@@ -3458,10 +3468,17 @@
 .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-active .ScSidebarMenu_content {
   color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
+.ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-default-highlight .ScSidebarMenu_content {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
 .ScSidebarMenu_scSidebarMenu:hover,
 .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-hover {
   background: var(--alias-fill-neutral-neutral, #1a1a1a);
 }
+.ScSidebarMenu_scSidebarMenu:hover .ScSidebarMenu_moreIconWrapper,
+.ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-hover .ScSidebarMenu_moreIconWrapper {
+  display: flex;
+}
 .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_variant-collapsed {
   padding: var(--spacing-md, 0.5rem);
   align-self: unset;

package/dist/index.d.mts

@@ -290,7 +290,10 @@ interface StreamoidSidebarProps {
     config: SidebarConfig;
     iconMap: SidebarIconMap;
     activeItemId?: string;
+    highlightedItemIds?: Set<string>;
     onItemSelect?: (item: SidebarMenuItemConfig, sectionId?: string) => void;
+    moreIcon?: ReactNode;
+    onMoreClick?: (item: SidebarMenuItemConfig, sectionId?: string) => void;
     expandedLogo?: ReactNode;
     collapsedLogo?: ReactNode;
     profile?: SidebarProfileConfig;
@@ -298,19 +301,24 @@ interface StreamoidSidebarProps {
     toggleIcon?: ReactNode | ((expanded: boolean) => ReactNode);
     hideFooter?: boolean;
     preFooterContent?: ReactNode;
+    bodyContent?: ReactNode;
+    showBody?: boolean;
+    isMobile?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, onItemSelect, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, className, style, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
+declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, highlightedItemIds, onItemSelect, moreIcon, onMoreClick, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, bodyContent, showBody, isMobile, className, style, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface IScSidebarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: JSX.Element;
-    state?: "default" | "active";
+    state?: "default" | "active" | "hover" | "default-highlight";
     variant?: "expanded" | "collapsed";
     className?: string;
     text?: string;
+    moreIcon?: ReactNode;
+    onMoreClick?: (e: React.MouseEvent) => void;
 }
-declare const ScSidebarMenu: ({ icon, state, variant, className, text, ...props }: IScSidebarMenuProps) => JSX.Element;
+declare const ScSidebarMenu: ({ icon, state, variant, className, text, moreIcon, onMoreClick, ...props }: IScSidebarMenuProps) => JSX.Element;
 
 interface IScSidebarProfileProps extends React.HTMLAttributes<HTMLDivElement> {
     state?: "default" | "hover";

package/dist/index.d.ts

@@ -290,7 +290,10 @@ interface StreamoidSidebarProps {
     config: SidebarConfig;
     iconMap: SidebarIconMap;
     activeItemId?: string;
+    highlightedItemIds?: Set<string>;
     onItemSelect?: (item: SidebarMenuItemConfig, sectionId?: string) => void;
+    moreIcon?: ReactNode;
+    onMoreClick?: (item: SidebarMenuItemConfig, sectionId?: string) => void;
     expandedLogo?: ReactNode;
     collapsedLogo?: ReactNode;
     profile?: SidebarProfileConfig;
@@ -298,19 +301,24 @@ interface StreamoidSidebarProps {
     toggleIcon?: ReactNode | ((expanded: boolean) => ReactNode);
     hideFooter?: boolean;
     preFooterContent?: ReactNode;
+    bodyContent?: ReactNode;
+    showBody?: boolean;
+    isMobile?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, onItemSelect, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, className, style, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
+declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, highlightedItemIds, onItemSelect, moreIcon, onMoreClick, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, bodyContent, showBody, isMobile, className, style, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface IScSidebarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: JSX.Element;
-    state?: "default" | "active";
+    state?: "default" | "active" | "hover" | "default-highlight";
     variant?: "expanded" | "collapsed";
     className?: string;
     text?: string;
+    moreIcon?: ReactNode;
+    onMoreClick?: (e: React.MouseEvent) => void;
 }
-declare const ScSidebarMenu: ({ icon, state, variant, className, text, ...props }: IScSidebarMenuProps) => JSX.Element;
+declare const ScSidebarMenu: ({ icon, state, variant, className, text, moreIcon, onMoreClick, ...props }: IScSidebarMenuProps) => JSX.Element;
 
 interface IScSidebarProfileProps extends React.HTMLAttributes<HTMLDivElement> {
     state?: "default" | "hover";

package/dist/index.js

@@ -2236,7 +2236,9 @@ var import_icons28 = require("@streamoid/icons");
 var ScSidebarMenu_default = {
   scSidebarMenu: "ScSidebarMenu_scSidebarMenu",
   content: "ScSidebarMenu_content",
+  moreIconWrapper: "ScSidebarMenu_moreIconWrapper",
   "state-active": "ScSidebarMenu_state-active",
+  "state-default-highlight": "ScSidebarMenu_state-default-highlight",
   "state-hover": "ScSidebarMenu_state-hover",
   "variant-collapsed": "ScSidebarMenu_variant-collapsed"
 };
@@ -2250,6 +2252,8 @@ var ScSidebarMenu = ({
   variant = "expanded",
   className,
   text = "Menu Item",
+  moreIcon,
+  onMoreClick,
   ...props
 }) => {
   const variantsClassName = ScSidebarMenu_default["state-" + state] + " " + ScSidebarMenu_default["variant-" + variant];
@@ -2260,10 +2264,20 @@ var ScSidebarMenu = ({
       ...props,
       children: [
         icon,
-        variant === "expanded" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: ScSidebarMenu_default.content, children: [
-          text,
-          " "
-        ] }) })
+        variant === "expanded" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: ScSidebarMenu_default.content, children: text }),
+          moreIcon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "div",
+            {
+              className: ScSidebarMenu_default.moreIconWrapper,
+              onClick: (e) => {
+                e.stopPropagation();
+                onMoreClick?.(e);
+              },
+              children: moreIcon
+            }
+          )
+        ] })
       ]
     }
   );
@@ -2719,18 +2733,25 @@ function renderMenuItem({
   sectionId,
   expanded,
   activeItemId,
+  highlightedItemIds,
   iconMap,
-  onItemSelect
+  onItemSelect,
+  moreIcon,
+  onMoreClick
 }) {
   const active = item.id === activeItemId;
+  const highlighted = highlightedItemIds?.has(item.id) ?? false;
+  const state = active ? "active" : highlighted ? "default-highlight" : "default";
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     ScSidebarMenu,
     {
-      icon: resolveIcon(iconMap, item, active, expanded),
+      icon: resolveIcon(iconMap, item, active || highlighted, expanded),
       text: expanded ? item.label : void 0,
-      state: active ? "active" : "default",
+      state,
       variant: expanded ? "expanded" : "collapsed",
-      onClick: () => onItemSelect?.(item, sectionId)
+      onClick: () => onItemSelect?.(item, sectionId),
+      moreIcon,
+      onMoreClick: onMoreClick ? () => onMoreClick(item, sectionId) : void 0
     },
     item.id
   );
@@ -2741,7 +2762,10 @@ function StreamoidSidebar({
   config,
   iconMap,
   activeItemId,
+  highlightedItemIds,
   onItemSelect,
+  moreIcon,
+  onMoreClick,
   expandedLogo,
   collapsedLogo,
   profile,
@@ -2749,9 +2773,13 @@ function StreamoidSidebar({
   toggleIcon,
   hideFooter = false,
   preFooterContent,
+  bodyContent,
+  showBody = false,
+  isMobile = false,
   className,
   style
 }) {
+  const effectiveHideFooter = hideFooter || isMobile;
   if (expanded) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
@@ -2766,7 +2794,7 @@ function StreamoidSidebar({
               backgroundColor: "var(--alias-surface-base)",
               borderRadius: "var(--radius-3xl)",
               padding: "var(--spacing-md)",
-              paddingBottom: hideFooter ? "var(--spacing-md)" : void 0,
+              paddingBottom: effectiveHideFooter ? "var(--spacing-md)" : void 0,
               width: 256,
               gap: "var(--spacing-xxs)"
             },
@@ -2788,23 +2816,44 @@ function StreamoidSidebar({
                   className: "flex flex-col flex-1 items-start min-h-0 w-full overflow-y-auto sidebar-scroll",
                   style: { gap: "var(--spacing-xxs)" },
                   children: [
-                    expandedLogo,
-                    config.topItem && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                      "div",
-                      {
-                        className: "flex flex-col items-start shrink-0 w-full",
-                        style: { padding: "var(--spacing-md) 0" },
-                        children: renderMenuItem({
-                          item: config.topItem,
-                          sectionId: "top",
-                          expanded: true,
-                          activeItemId,
-                          iconMap,
-                          onItemSelect
-                        })
-                      }
-                    ),
-                    config.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between w-full shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "min-w-0 flex-1", children: expandedLogo }),
+                      isMobile ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                        "div",
+                        {
+                          className: "flex items-center cursor-pointer shrink-0",
+                          style: {
+                            padding: "var(--spacing-md)",
+                            borderRadius: "var(--radius-3xl)"
+                          },
+                          onClick: onToggle,
+                          children: resolveToggleIcon(toggleIcon, true)
+                        }
+                      ) : null
+                    ] }),
+                    config.topItem && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                        "div",
+                        {
+                          className: "flex flex-col items-start shrink-0 w-full",
+                          style: { padding: "var(--spacing-md) 0" },
+                          children: renderMenuItem({
+                            item: config.topItem,
+                            sectionId: "top",
+                            expanded: true,
+                            activeItemId,
+                            highlightedItemIds,
+                            iconMap,
+                            onItemSelect,
+                            moreIcon,
+                            onMoreClick
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {})
+                    ] }),
+                    showBody && bodyContent ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col flex-1 min-h-0 w-full overflow-hidden", children: bodyContent }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: config.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                       "div",
                       {
                         className: "flex flex-col items-start shrink-0 w-full",
@@ -2827,10 +2876,11 @@ function StreamoidSidebar({
                         ]
                       },
                       section.id
-                    ))
+                    )) })
                   ]
                 }
               ),
+              preFooterContent,
               config.bottomItems?.length ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "div",
                 {
@@ -2848,7 +2898,6 @@ function StreamoidSidebar({
                   )
                 }
               ) : null,
-              preFooterContent,
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {}),
               profile ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -2856,8 +2905,7 @@ function StreamoidSidebar({
                   {
                     className: "flex items-center shrink-0 w-full cursor-pointer",
                     style: {
-                      padding: "var(--spacing-md)",
-                      marginTop: "var(--spacing-md)",
+                      padding: "var(--spacing-md) var(--spacing-xl)",
                       gap: "var(--spacing-md)",
                       borderRadius: "var(--radius-xl)"
                     },
@@ -2891,18 +2939,15 @@ function StreamoidSidebar({
                     ]
                   }
                 ),
-                !hideFooter && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: "var(--spacing-md)" } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {})
-                ] })
+                !effectiveHideFooter && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {}) })
               ] }) : null,
-              !hideFooter && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+              !effectiveHideFooter && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                 "div",
                 {
                   className: "flex items-center w-full",
                   style: {
                     gap: "var(--spacing-xs)",
-                    padding: "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-3xl)"
+                    padding: "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-xl)"
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -2977,14 +3022,17 @@ function StreamoidSidebar({
                           sectionId: "top",
                           expanded: false,
                           activeItemId,
+                          highlightedItemIds,
                           iconMap,
-                          onItemSelect
+                          onItemSelect,
+                          moreIcon,
+                          onMoreClick
                         })
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {})
                   ] }) : null,
-                  config.sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col items-center w-full", children: [
+                  showBody && bodyContent ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col items-center w-full", children: bodyContent }) : config.sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col items-center w-full", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "div",
                       {
@@ -2999,8 +3047,11 @@ function StreamoidSidebar({
                             sectionId: section.id,
                             expanded: false,
                             activeItemId,
+                            highlightedItemIds,
                             iconMap,
-                            onItemSelect
+                            onItemSelect,
+                            moreIcon,
+                            onMoreClick
                           })
                         )
                       }
@@ -3010,6 +3061,7 @@ function StreamoidSidebar({
                 ]
               }
             ),
+            preFooterContent,
             config.bottomItems?.length ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "div",
               {
@@ -3021,8 +3073,11 @@ function StreamoidSidebar({
                     sectionId: "bottom",
                     expanded: false,
                     activeItemId,
+                    highlightedItemIds,
                     iconMap,
-                    onItemSelect
+                    onItemSelect,
+                    moreIcon,
+                    onMoreClick
                   })
                 )
               }

package/dist/index.mjs

@@ -2131,7 +2131,9 @@ import { SiconPlus } from "@streamoid/icons";
 var ScSidebarMenu_default = {
   scSidebarMenu: "ScSidebarMenu_scSidebarMenu",
   content: "ScSidebarMenu_content",
+  moreIconWrapper: "ScSidebarMenu_moreIconWrapper",
   "state-active": "ScSidebarMenu_state-active",
+  "state-default-highlight": "ScSidebarMenu_state-default-highlight",
   "state-hover": "ScSidebarMenu_state-hover",
   "variant-collapsed": "ScSidebarMenu_variant-collapsed"
 };
@@ -2145,6 +2147,8 @@ var ScSidebarMenu = ({
   variant = "expanded",
   className,
   text = "Menu Item",
+  moreIcon,
+  onMoreClick,
   ...props
 }) => {
   const variantsClassName = ScSidebarMenu_default["state-" + state] + " " + ScSidebarMenu_default["variant-" + variant];
@@ -2155,10 +2159,20 @@ var ScSidebarMenu = ({
       ...props,
       children: [
         icon,
-        variant === "expanded" && /* @__PURE__ */ jsx34(Fragment11, { children: /* @__PURE__ */ jsxs28("div", { className: ScSidebarMenu_default.content, children: [
-          text,
-          " "
-        ] }) })
+        variant === "expanded" && /* @__PURE__ */ jsxs28(Fragment11, { children: [
+          /* @__PURE__ */ jsx34("div", { className: ScSidebarMenu_default.content, children: text }),
+          moreIcon && /* @__PURE__ */ jsx34(
+            "div",
+            {
+              className: ScSidebarMenu_default.moreIconWrapper,
+              onClick: (e) => {
+                e.stopPropagation();
+                onMoreClick?.(e);
+              },
+              children: moreIcon
+            }
+          )
+        ] })
       ]
     }
   );
@@ -2614,18 +2628,25 @@ function renderMenuItem({
   sectionId,
   expanded,
   activeItemId,
+  highlightedItemIds,
   iconMap,
-  onItemSelect
+  onItemSelect,
+  moreIcon,
+  onMoreClick
 }) {
   const active = item.id === activeItemId;
+  const highlighted = highlightedItemIds?.has(item.id) ?? false;
+  const state = active ? "active" : highlighted ? "default-highlight" : "default";
   return /* @__PURE__ */ jsx39(
     ScSidebarMenu,
     {
-      icon: resolveIcon(iconMap, item, active, expanded),
+      icon: resolveIcon(iconMap, item, active || highlighted, expanded),
       text: expanded ? item.label : void 0,
-      state: active ? "active" : "default",
+      state,
       variant: expanded ? "expanded" : "collapsed",
-      onClick: () => onItemSelect?.(item, sectionId)
+      onClick: () => onItemSelect?.(item, sectionId),
+      moreIcon,
+      onMoreClick: onMoreClick ? () => onMoreClick(item, sectionId) : void 0
     },
     item.id
   );
@@ -2636,7 +2657,10 @@ function StreamoidSidebar({
   config,
   iconMap,
   activeItemId,
+  highlightedItemIds,
   onItemSelect,
+  moreIcon,
+  onMoreClick,
   expandedLogo,
   collapsedLogo,
   profile,
@@ -2644,9 +2668,13 @@ function StreamoidSidebar({
   toggleIcon,
   hideFooter = false,
   preFooterContent,
+  bodyContent,
+  showBody = false,
+  isMobile = false,
   className,
   style
 }) {
+  const effectiveHideFooter = hideFooter || isMobile;
   if (expanded) {
     return /* @__PURE__ */ jsx39(
       "div",
@@ -2661,7 +2689,7 @@ function StreamoidSidebar({
               backgroundColor: "var(--alias-surface-base)",
               borderRadius: "var(--radius-3xl)",
               padding: "var(--spacing-md)",
-              paddingBottom: hideFooter ? "var(--spacing-md)" : void 0,
+              paddingBottom: effectiveHideFooter ? "var(--spacing-md)" : void 0,
               width: 256,
               gap: "var(--spacing-xxs)"
             },
@@ -2683,23 +2711,44 @@ function StreamoidSidebar({
                   className: "flex flex-col flex-1 items-start min-h-0 w-full overflow-y-auto sidebar-scroll",
                   style: { gap: "var(--spacing-xxs)" },
                   children: [
-                    expandedLogo,
-                    config.topItem && /* @__PURE__ */ jsx39(
-                      "div",
-                      {
-                        className: "flex flex-col items-start shrink-0 w-full",
-                        style: { padding: "var(--spacing-md) 0" },
-                        children: renderMenuItem({
-                          item: config.topItem,
-                          sectionId: "top",
-                          expanded: true,
-                          activeItemId,
-                          iconMap,
-                          onItemSelect
-                        })
-                      }
-                    ),
-                    config.sections.map((section) => /* @__PURE__ */ jsxs31(
+                    /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between w-full shrink-0", children: [
+                      /* @__PURE__ */ jsx39("div", { className: "min-w-0 flex-1", children: expandedLogo }),
+                      isMobile ? /* @__PURE__ */ jsx39(
+                        "div",
+                        {
+                          className: "flex items-center cursor-pointer shrink-0",
+                          style: {
+                            padding: "var(--spacing-md)",
+                            borderRadius: "var(--radius-3xl)"
+                          },
+                          onClick: onToggle,
+                          children: resolveToggleIcon(toggleIcon, true)
+                        }
+                      ) : null
+                    ] }),
+                    config.topItem && /* @__PURE__ */ jsxs31(Fragment14, { children: [
+                      /* @__PURE__ */ jsx39(HDivider, {}),
+                      /* @__PURE__ */ jsx39(
+                        "div",
+                        {
+                          className: "flex flex-col items-start shrink-0 w-full",
+                          style: { padding: "var(--spacing-md) 0" },
+                          children: renderMenuItem({
+                            item: config.topItem,
+                            sectionId: "top",
+                            expanded: true,
+                            activeItemId,
+                            highlightedItemIds,
+                            iconMap,
+                            onItemSelect,
+                            moreIcon,
+                            onMoreClick
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx39(HDivider, {})
+                    ] }),
+                    showBody && bodyContent ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col flex-1 min-h-0 w-full overflow-hidden", children: bodyContent }) : /* @__PURE__ */ jsx39(Fragment14, { children: config.sections.map((section) => /* @__PURE__ */ jsxs31(
                       "div",
                       {
                         className: "flex flex-col items-start shrink-0 w-full",
@@ -2722,10 +2771,11 @@ function StreamoidSidebar({
                         ]
                       },
                       section.id
-                    ))
+                    )) })
                   ]
                 }
               ),
+              preFooterContent,
               config.bottomItems?.length ? /* @__PURE__ */ jsx39(
                 "div",
                 {
@@ -2743,7 +2793,6 @@ function StreamoidSidebar({
                   )
                 }
               ) : null,
-              preFooterContent,
               /* @__PURE__ */ jsx39(HDivider, {}),
               profile ? /* @__PURE__ */ jsxs31(Fragment14, { children: [
                 /* @__PURE__ */ jsxs31(
@@ -2751,8 +2800,7 @@ function StreamoidSidebar({
                   {
                     className: "flex items-center shrink-0 w-full cursor-pointer",
                     style: {
-                      padding: "var(--spacing-md)",
-                      marginTop: "var(--spacing-md)",
+                      padding: "var(--spacing-md) var(--spacing-xl)",
                       gap: "var(--spacing-md)",
                       borderRadius: "var(--radius-xl)"
                     },
@@ -2786,18 +2834,15 @@ function StreamoidSidebar({
                     ]
                   }
                 ),
-                !hideFooter && /* @__PURE__ */ jsxs31(Fragment14, { children: [
-                  /* @__PURE__ */ jsx39("div", { style: { marginTop: "var(--spacing-md)" } }),
-                  /* @__PURE__ */ jsx39(HDivider, {})
-                ] })
+                !effectiveHideFooter && /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsx39(HDivider, {}) })
               ] }) : null,
-              !hideFooter && /* @__PURE__ */ jsx39("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs31(
+              !effectiveHideFooter && /* @__PURE__ */ jsx39("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs31(
                 "div",
                 {
                   className: "flex items-center w-full",
                   style: {
                     gap: "var(--spacing-xs)",
-                    padding: "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-3xl)"
+                    padding: "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-xl)"
                   },
                   children: [
                     /* @__PURE__ */ jsx39(
@@ -2872,14 +2917,17 @@ function StreamoidSidebar({
                           sectionId: "top",
                           expanded: false,
                           activeItemId,
+                          highlightedItemIds,
                           iconMap,
-                          onItemSelect
+                          onItemSelect,
+                          moreIcon,
+                          onMoreClick
                         })
                       }
                     ),
                     /* @__PURE__ */ jsx39(HDivider, {})
                   ] }) : null,
-                  config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center w-full", children: [
+                  showBody && bodyContent ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col items-center w-full", children: bodyContent }) : config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center w-full", children: [
                     /* @__PURE__ */ jsx39(
                       "div",
                       {
@@ -2894,8 +2942,11 @@ function StreamoidSidebar({
                             sectionId: section.id,
                             expanded: false,
                             activeItemId,
+                            highlightedItemIds,
                             iconMap,
-                            onItemSelect
+                            onItemSelect,
+                            moreIcon,
+                            onMoreClick
                           })
                         )
                       }
@@ -2905,6 +2956,7 @@ function StreamoidSidebar({
                 ]
               }
             ),
+            preFooterContent,
             config.bottomItems?.length ? /* @__PURE__ */ jsx39(
               "div",
               {
@@ -2916,8 +2968,11 @@ function StreamoidSidebar({
                     sectionId: "bottom",
                     expanded: false,
                     activeItemId,
+                    highlightedItemIds,
                     iconMap,
-                    onItemSelect
+                    onItemSelect,
+                    moreIcon,
+                    onMoreClick
                   })
                 )
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",