diff --git a/src/components/Elements/MainModal/backend/Tabs.jsx b/src/components/Elements/MainModal/backend/Tabs.jsx index 1edede01..b629be18 100644 --- a/src/components/Elements/MainModal/backend/Tabs.jsx +++ b/src/components/Elements/MainModal/backend/Tabs.jsx @@ -154,6 +154,7 @@ const Tabs = ({ {showSidebar ? (
+ {!isSidebarCollapsed && activeTab === TAB_TYPES.SETTINGS && ( )} -
{filteredChildren.map((tab, index) => ( { return (
+ {/* Header with toggle button and optional search */} +
+
+ {config.showSearch &&
} +
+ {Array.from({ length: config.itemCount }).map((_, index) => { const hasDivider = config.dividerPositions.includes(index); const textWidth = config.textWidths[index] || 80; diff --git a/src/components/Elements/MainModal/scss/modules/_sidebar.scss b/src/components/Elements/MainModal/scss/modules/_sidebar.scss index c1f79d34..b6fac058 100644 --- a/src/components/Elements/MainModal/scss/modules/_sidebar.scss +++ b/src/components/Elements/MainModal/scss/modules/_sidebar.scss @@ -17,6 +17,7 @@ // Container for search bar and toggle button .sidebarHeader { display: flex; + flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 0.5rem; @@ -233,6 +234,36 @@ .sidebarSkeleton { padding: 0.5rem 0.2rem; + .skeletonHeader { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; + + .skeletonToggle { + width: 32px; + height: 32px; + border-radius: 8px; + flex-shrink: 0; + + @include themed { + background: t($modal-sidebarActive); + } + } + + .skeletonSearch { + flex: 1; + height: 38px; + border-radius: 10px; + + @include themed { + background: t($modal-sidebarActive); + } + } + } + .skeletonItem { display: flex; align-items: center;