+ {/* 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;