Refactor: Remove hover effect and add user profile

- Removed the blue hover effect from the menu items.
- Added user profile with email and logout button.
- Installed necessary dependencies.
- Created button component.

src/components/layout/ModernLayout.tsx

@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { ModernSidebar, SidebarBody } from '@/components/ui/modern-sidebar';
@@ -17,9 +17,21 @@ import {
   Crown,
   MessageSquareText,
   Users,
-  Settings
+  Settings,
+  LogOut,
+  User
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from '@/components/ui/button';
+import { supabase } from '@/integrations/supabase/client';
+import { useToast } from '@/hooks/use-toast';
+import { useNavigate } from 'react-router-dom';
 
 interface ModernLayoutProps {
   children: React.ReactNode;
@@ -66,6 +78,9 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
   const [open, setOpen] = useState(false);
   const location = useLocation();
   const isMobile = useIsMobile();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const [userEmail, setUserEmail] = useState<string>('');
   
   const {
     isOpen: tourOpen,
@@ -75,6 +90,42 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
     closeTour
   } = useOnboardingTour();
 
+  useEffect(() => {
+    // Buscar dados do usuário logado
+    const getUserData = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (user?.email) {
+        setUserEmail(user.email);
+      }
+    };
+    
+    getUserData();
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      const { error } = await supabase.auth.signOut();
+      if (error) throw error;
+      
+      // Limpar localStorage
+      localStorage.removeItem('userEmail');
+      
+      toast({
+        title: "Logout realizado",
+        description: "Você foi desconectado com sucesso"
+      });
+      
+      navigate('/auth');
+    } catch (error) {
+      console.error('Erro no logout:', error);
+      toast({
+        title: "Erro no logout",
+        description: "Ocorreu um erro ao sair da conta",
+        variant: "destructive"
+      });
+    }
+  };
+
   const mainLinks = [
     {
       id: "dashboard",
@@ -205,6 +256,35 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
                   showLabels={open}
                   className="space-y-1"
                 />
+                
+                {/* User Profile */}
+                <div className="mt-4 px-3">
+                  <DropdownMenu>
+                    <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">
+                          <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>
+                        </div>
+                        {open && (
+                          <span className="text-sm truncate">
+                            {userEmail || 'Usuário'}
+                          </span>
+                        )}
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuItem 
+                        onClick={handleLogout}
+                        className="flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+                      >
+                        <LogOut className="h-4 w-4" />
+                        Sair
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
               </div>
             </div>
           </div>

src/components/ui/limelight-nav.tsx

@@ -47,7 +47,7 @@ export const VerticalLimelightNav = ({
 }: VerticalLimelightNavProps) => {
   const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
   const [isReady, setIsReady] = useState(false);
-  const navItemRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+  const navItemRefs = useRef<(HTMLElement | null)[]>([]);
   const limelightRef = useRef<HTMLDivElement | null>(null);
 
   useLayoutEffect(() => {
@@ -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 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:text-blue-700 ${iconContainerClassName}`;
+        const baseClasses = `relative z-20 flex items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-200 ${iconContainerClassName}`;
 
         if (href) {
           return (