From 6f6292f85784e733680479b9ec02ebe7c42cf570 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 23 Jun 2025 01:26:54 +0000
Subject: [PATCH] Fix: User profile dropdown and icon display

The user profile dropdown was not working correctly, and the icon was cut off. This commit fixes the dropdown functionality and ensures the icon is fully visible.
---
 src/components/layout/ModernLayout.tsx | 33 +++++++++++++++++++++-----
 src/components/ui/limelight-nav.tsx    |  2 +-
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/ModernLayout.tsx b/src/components/layout/ModernLayout.tsx
index 51a8725..6abbb27 100644
--- a/src/components/layout/ModernLayout.tsx
+++ b/src/components/layout/ModernLayout.tsx
@@ -81,6 +81,7 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
   const { toast } = useToast();
   const navigate = useNavigate();
   const [userEmail, setUserEmail] = useState<string>('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   
   const {
     isOpen: tourOpen,
@@ -217,6 +218,7 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
                   defaultActiveIndex={getActiveIndex() < mainLinks.length ? getActiveIndex() : 0}
                   showLabels={open}
                   className="space-y-1"
+                  iconContainerClassName={!open ? "justify-center" : ""}
                 />
               </div>
 
@@ -236,6 +238,7 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
                   defaultActiveIndex={getActiveIndex() >= mainLinks.length && getActiveIndex() < mainLinks.length + whatsappLinks.length ? getActiveIndex() - mainLinks.length : -1}
                   showLabels={open}
                   className="space-y-1"
+                  iconContainerClassName={!open ? "justify-center" : ""}
                 />
               </div>
 
@@ -255,14 +258,23 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
                   defaultActiveIndex={getActiveIndex() >= mainLinks.length + whatsappLinks.length ? getActiveIndex() - mainLinks.length - whatsappLinks.length : -1}
                   showLabels={open}
                   className="space-y-1"
+                  iconContainerClassName={!open ? "justify-center" : ""}
                 />
                 
                 {/* User Profile */}
                 <div className="mt-4 px-3">
-                  <DropdownMenu>
+                  <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                     <DropdownMenuTrigger asChild>
-                      <Button className="w-full rounded-full py-0 ps-0 h-10 justify-start" variant="outline">
-                        <div className="me-2 flex aspect-square h-full p-1.5">
+                      <Button 
+                        className={`w-full rounded-full py-0 ps-0 h-10 ${open ? 'justify-start' : 'justify-center px-0'}`} 
+                        variant="outline"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDropdownOpen(!dropdownOpen);
+                        }}
+                      >
+                        <div className={`${open ? 'me-2' : ''} flex aspect-square h-full p-1.5`}>
                           <div className="h-full w-full rounded-full bg-blue-600 flex items-center justify-center">
                             <User className="h-4 w-4 text-white" />
                           </div>
@@ -274,10 +286,19 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
                         )}
                       </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-56">
+                    <DropdownMenuContent 
+                      align={open ? "end" : "center"} 
+                      side={open ? "top" : "right"}
+                      className="w-56 z-50"
+                    >
                       <DropdownMenuItem 
-                        onClick={handleLogout}
-                        className="flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDropdownOpen(false);
+                          handleLogout();
+                        }}
+                        className="flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 cursor-pointer"
                       >
                         <LogOut className="h-4 w-4" />
                         Sair
diff --git a/src/components/ui/limelight-nav.tsx b/src/components/ui/limelight-nav.tsx
index e97fd32..4ce3628 100644
--- a/src/components/ui/limelight-nav.tsx
+++ b/src/components/ui/limelight-nav.tsx
@@ -99,7 +99,7 @@ export const VerticalLimelightNav = ({
           </>
         );
 
-        const baseClasses = `relative z-20 flex items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-200 ${iconContainerClassName}`;
+        const baseClasses = `relative z-20 flex items-center ${showLabels ? 'gap-3' : 'gap-0'} ${showLabels ? 'px-3' : 'px-2'} py-3 rounded-lg cursor-pointer transition-all duration-200 ${iconContainerClassName || ''}`;
 
         if (href) {
           return (