diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx index c5f6456..38d3a06 100644 --- a/src/components/ResourcesSidebar/index.tsx +++ b/src/components/ResourcesSidebar/index.tsx @@ -127,12 +127,40 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => { ) }) +const LanguageList: FC<{ + items: IFileOrFolder[] + setExpanded: React.Dispatch> +}> = ({ items, setExpanded }) => { + const { current, setCurrent } = useSidebar() + + return ( + + {items.map(item => ( + { + setCurrent(item.title) + setExpanded(false) + }} + > + {item.title} + + ))} + + ) +} + const AllLanguages: FC<{ items: IFileOrFolder[] expanded: boolean setExpanded: React.Dispatch> }> = ({ items, expanded, setExpanded }) => { - const { current, setCurrent } = useSidebar() + const { current } = useSidebar() + + if (!current) { + return + } return ( @@ -141,21 +169,7 @@ const AllLanguages: FC<{ > Expand languages {expanded ? : } - {expanded && ( - - {items.map(item => ( - { - setCurrent(item.title) - setExpanded(false) - }} - > - {item.title} - - ))} - - )} + {expanded && } ) } @@ -170,8 +184,7 @@ export const ResourcesSidebar: FC> = props => { languages ) - const currentLanguage = - sortedLanguages.find(lang => lang.title === current) || sortedLanguages[0] + const currentLanguage = sortedLanguages.find(lang => lang.title === current) return ( @@ -180,7 +193,7 @@ export const ResourcesSidebar: FC> = props => { expanded={expandedLanguages} setExpanded={setExpandedLanguages} /> - + {currentLanguage && } ) } diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx index f075c08..4369fbe 100644 --- a/src/components/ResourcesSidebar/styles.tsx +++ b/src/components/ResourcesSidebar/styles.tsx @@ -130,7 +130,7 @@ export const ExpandLanguagesHeader = styled.div` } ` -export const ExpandLanguagesList = styled.div` +export const StyledLanguageList = styled.div` padding: 8px 0; display: flex; flex-direction: column;