Fix:

Adjusted the menu for mobile devices and addressed the webhook issue.

src/components/help/ContactForm.tsx

@@ -4,7 +4,6 @@ import { ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/hooks/use-toast';
 import { supabase } from '@/integrations/supabase/client';
-import { enviarFaleConoscoParaWebhook } from '@/services/webhookService';
 import ContactFormFields from './ContactFormFields';
 import ContactFormHeader from './ContactFormHeader';
 
@@ -92,8 +91,21 @@ const ContactForm = ({ onBack }: ContactFormProps) => {
       };
 
       try {
-        await enviarFaleConoscoParaWebhook(webhookData);
+        console.log("Enviando dados para webhook N8N:", webhookData);
-        console.log("Dados enviados para webhook N8N com sucesso");
+        
+        const response = await fetch('https://webhookn8n.innova1001.com.br/webhook/faleconosco', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(webhookData),
+        });
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        console.log("Dados do Fale Conosco enviados com sucesso para o webhook N8N");
       } catch (webhookError) {
         console.error("Erro ao enviar para webhook N8N:", webhookError);
         // Não interrompe o fluxo se o webhook falhar

src/components/layout/ModernLayout.tsx

@@ -75,6 +75,13 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
     closeTour
   } = useOnboardingTour();
 
+  // No mobile, o sidebar deve estar fechado por padrão
+  useEffect(() => {
+    if (isMobile) {
+      setOpen(false);
+    }
+  }, [isMobile]);
+
   const mainLinks = [
     {
       id: "dashboard",

src/components/ui/modern-sidebar.tsx

@@ -86,7 +86,6 @@ export const DesktopSidebar = ({
 }: React.ComponentProps<"div">) => {
   const { open, setOpen, animate } = useSidebar();
   
-  // Separate motion-specific props from HTML div props
   const { onAnimationStart, onAnimationComplete, ...htmlProps } = props as any;
   
   return (
@@ -97,7 +96,7 @@ export const DesktopSidebar = ({
           className
         )}
         animate={{
-          width: animate ? (open ? "300px" : "60px") : "300px",
+          width: animate ? (open ? "300px" : "80px") : "300px",
         }}
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
@@ -124,6 +123,11 @@ export const MobileSidebar = ({
         {...props}
       >
         <div className="flex items-center space-x-2">
+          <img 
+            src="/lovable-uploads/7149adf3-440a-491e-83c2-d964a3348cc9.png" 
+            alt="Finance Home Logo" 
+            className="h-8 w-8 shrink-0"
+          />
           <span className="text-lg font-semibold text-blue-700">Finance Home</span>
         </div>
         <div className="flex justify-end z-20">
@@ -153,7 +157,9 @@ export const MobileSidebar = ({
               >
                 <X className="h-6 w-6" />
               </div>
-              {children}
+              <div className="mt-12">
+                {children}
+              </div>
             </motion.div>
           )}
         </AnimatePresence>