MODEL/usda-vision
10
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor Sidebar component to remove hover state management and adjust expansion logic

Browse Source 
- Removed isHovered and setIsHovered props from SidebarProps.
- Updated sidebar expansion logic to rely solely on isExpanded and isMobileOpen.
- Simplified rendering conditions for menu items and submenus based on the new state management.
This commit is contained in:
salirezav
2026-01-14 16:04:45 -05:00
parent 87ff14705e
commit 0a4df9073c
1 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
management-dashboard-web-app/src/components/Sidebar.tsx
View File

@@ -7,8 +7,6 @@ interface SidebarProps {
onViewChange: (view: string) => void onViewChange: (view: string) => void
isExpanded?: boolean isExpanded?: boolean
isMobileOpen?: boolean isMobileOpen?: boolean
isHovered?: boolean
setIsHovered?: (hovered: boolean) => void
} }
interface MenuItem { interface MenuItem {
@@ -23,10 +21,8 @@ export function Sidebar({
user, user,
currentView, currentView,
onViewChange, onViewChange,
isExpanded = true, isExpanded = false,
isMobileOpen = false, isMobileOpen = false
isHovered = false,
setIsHovered
}: SidebarProps) { }: SidebarProps) {
const [openSubmenu, setOpenSubmenu] = useState<number | null>(null) const [openSubmenu, setOpenSubmenu] = useState<number | null>(null)
const [subMenuHeight, setSubMenuHeight] = useState<Record<string, number>>({}) const [subMenuHeight, setSubMenuHeight] = useState<Record<string, number>>({})
@@ -170,7 +166,7 @@ export function Sidebar({
className={`menu-item group ${openSubmenu === index className={`menu-item group ${openSubmenu === index
? "menu-item-active" ? "menu-item-active"
: "menu-item-inactive" : "menu-item-inactive"
} cursor-pointer ${!isExpanded && !isHovered } cursor-pointer ${!isExpanded
? "lg:justify-center" ? "lg:justify-center"
: "lg:justify-start" : "lg:justify-start"
}`} }`}
@@ -183,10 +179,10 @@ export function Sidebar({
> >
{nav.icon} {nav.icon}
</span> </span>
{(isExpanded || isHovered || isMobileOpen) && ( {(isExpanded || isMobileOpen) && (
<span className="menu-item-text">{nav.name}</span> <span className="menu-item-text">{nav.name}</span>
)} )}
{(isExpanded || isHovered || isMobileOpen) && ( {(isExpanded || isMobileOpen) && (
<svg <svg
className={`ml-auto w-5 h-5 transition-transform duration-200 ${openSubmenu === index className={`ml-auto w-5 h-5 transition-transform duration-200 ${openSubmenu === index
? "rotate-180 text-brand-500" ? "rotate-180 text-brand-500"
@@ -214,12 +210,12 @@ export function Sidebar({
> >
{nav.icon} {nav.icon}
</span> </span>
{(isExpanded || isHovered || isMobileOpen) && ( {(isExpanded || isMobileOpen) && (
<span className="menu-item-text">{nav.name}</span> <span className="menu-item-text">{nav.name}</span>
)} )}
</button> </button>
)} )}
{nav.subItems && (isExpanded || isHovered || isMobileOpen) && ( {nav.subItems && (isExpanded || isMobileOpen) && (
<div <div
ref={(el) => { ref={(el) => {
subMenuRefs.current[`submenu-${index}`] = el subMenuRefs.current[`submenu-${index}`] = el
@@ -265,21 +261,17 @@ export function Sidebar({
className={`fixed mt-16 flex flex-col lg:mt-0 top-0 px-5 left-0 bg-white dark:bg-gray-900 dark:border-gray-800 text-gray-900 h-screen transition-all duration-300 ease-in-out z-50 border-r border-gray-200 className={`fixed mt-16 flex flex-col lg:mt-0 top-0 px-5 left-0 bg-white dark:bg-gray-900 dark:border-gray-800 text-gray-900 h-screen transition-all duration-300 ease-in-out z-50 border-r border-gray-200
${isExpanded || isMobileOpen ${isExpanded || isMobileOpen
? "w-[290px]" ? "w-[290px]"
: isHovered : "w-[90px]"
? "w-[290px]"
: "w-[90px]"
} }
${isMobileOpen ? "translate-x-0" : "-translate-x-full"} ${isMobileOpen ? "translate-x-0" : "-translate-x-full"}
lg:translate-x-0`} lg:translate-x-0`}
onMouseEnter={() => !isExpanded && setIsHovered && setIsHovered(true)}
onMouseLeave={() => setIsHovered && setIsHovered(false)}
> >
<div <div
className={`py-8 flex ${!isExpanded && !isHovered ? "lg:justify-center" : "justify-start" className={`py-8 flex ${!isExpanded ? "lg:justify-center" : "justify-start"
}`} }`}
> >
<div> <div>
{isExpanded || isHovered || isMobileOpen ? ( {isExpanded || isMobileOpen ? (
<> <>
<h1 className="text-xl font-bold text-gray-800 dark:text-white/90">Pecan Experiments</h1> <h1 className="text-xl font-bold text-gray-800 dark:text-white/90">Pecan Experiments</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">Research Dashboard</p> <p className="text-sm text-gray-500 dark:text-gray-400">Research Dashboard</p>
@@ -297,12 +289,12 @@ export function Sidebar({
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div> <div>
<h2 <h2
className={`mb-4 text-xs uppercase flex leading-[20px] text-gray-400 ${!isExpanded && !isHovered className={`mb-4 text-xs uppercase flex leading-[20px] text-gray-400 ${!isExpanded
? "lg:justify-center" ? "lg:justify-center"
: "justify-start" : "justify-start"
}`} }`}
> >
{isExpanded || isHovered || isMobileOpen ? ( {isExpanded || isMobileOpen ? (
"Menu" "Menu"
) : ( ) : (
<svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">