diff --git a/src/lib/components/Sidebar/SidebarItem.tsx b/src/lib/components/Sidebar/SidebarItem.tsx index 62c2df80cd..abe0340a56 100644 --- a/src/lib/components/Sidebar/SidebarItem.tsx +++ b/src/lib/components/Sidebar/SidebarItem.tsx @@ -32,7 +32,7 @@ const SidebarItem: FC = ({ label, labelColor = 'info', ...props -}): JSX.Element => { +}) => { const theirProps = excludeClassName(props); const id = useId(); @@ -40,18 +40,26 @@ const SidebarItem: FC = ({ const { isInsideCollapse } = useSidebarItemContext(); const theme = useTheme().theme.sidebar.item; - const Wrapper: FC> = ({ children }): JSX.Element => ( + const Wrapper: FC> = ({ children: Component }) => (
  • {isCollapsed ? ( - - {children} + {children}} placement="right"> + {Component} - ) : ( - children - )} + ) : Component}
  • ); + const Children: FC> = ({ children }) => ( + + {children} + + ); + return ( = ({ data-testid="flowbite-sidebar-item-icon" /> )} - - {children} - - {label && ( + {!isCollapsed && {children}} + {label && !isCollapsed && ( diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts index 051e7d016d..fa65403aa8 100644 --- a/src/lib/theme/default.ts +++ b/src/lib/theme/default.ts @@ -253,7 +253,7 @@ export default { base: 'absolute top-1/2 left-1/2 block w-full -translate-x-1/2 -translate-y-1/2', wrapper: 'w-full flex-shrink-0 transform cursor-grab snap-center', }, - control:{ + control: { base: 'inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10', icon: 'h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6', }, @@ -430,7 +430,8 @@ export default { }, select: { base: 'flex', - addon: 'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400', + addon: + 'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400', field: { base: 'relative w-full', icon: { @@ -560,7 +561,7 @@ export default { hidden: { on: 'hidden', off: '', - }, + }, }, link: { base: 'block py-2 pr-4 pl-3 md:p-0', @@ -668,11 +669,10 @@ export default { base: 'flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700', active: 'bg-gray-100 dark:bg-gray-700', collapsed: { - insideCollapse: 'group w-full pl-8 transition duration-75', + insideCollapse: 'group w-full ml-3 pl-8 transition duration-75', }, content: { - base: 'ml-3 flex-1 whitespace-nowrap', - collapsed: 'hidden', + base: 'px-3 flex-1 whitespace-nowrap', }, icon: { base: 'h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',