diff --git a/lib/components/VerticalTab/VerticalTab.scss b/lib/components/VerticalTab/VerticalTab.scss index e65f85a2..06ab025c 100644 --- a/lib/components/VerticalTab/VerticalTab.scss +++ b/lib/components/VerticalTab/VerticalTab.scss @@ -64,14 +64,8 @@ background-color: #e6e9e9; } - &--open { - background-color: #fff; - border-left: 4px solid #ff444f; - padding-left: 12px; + &--open > :nth-child(2) { font-weight: bold; - &:hover{ - background-color: #fff; - } } } diff --git a/lib/components/VerticalTab/VerticalTabItems.tsx b/lib/components/VerticalTab/VerticalTabItems.tsx index dff883c5..562a240e 100644 --- a/lib/components/VerticalTab/VerticalTabItems.tsx +++ b/lib/components/VerticalTab/VerticalTabItems.tsx @@ -27,23 +27,24 @@ export const VerticalTabItems = ({ items, className, iconClassName, labelClassNa const [selectedTab, setSelectedTab] = useState(activeTab); const findActiveTab = (title: string) => { - let clicked_item = undefined; for (const item of items) { if (item?.subItems) { - clicked_item = item?.subItems.find((subItem) => subItem?.title === title); - }else{ + const foundItem = item?.subItems.find((subItem) => subItem?.title === title); + if (foundItem) { + return foundItem; + } + } else { if (item?.title === title) { - return item?.title; + return item; } } } - - return clicked_item?.title; } const onSelectItemHandler = (title: string) => { - console.log("item clicked", title) - setSelectedTab(() => findActiveTab(title) ?? activeTab); + const new_active_tab = findActiveTab(title)?.title; + // console.log('new_active_tab:', new_active_tab); + setSelectedTab(() => new_active_tab ?? activeTab); onSelectItem?.(title); } @@ -107,12 +108,7 @@ export const VerticalTabItems = ({ items, className, iconClassName, labelClassNa })}
- {items.find((item) => { - if (item?.subItems) { - return item?.subItems.find((subItem) => subItem?.title === selectedTab) - } - return item?.title === selectedTab - })?.component} + {findActiveTab(selectedTab)?.component}
);