wip

components/layout/MobileMenu.tsx

@@ -16,15 +16,8 @@ interface MobileMenuProps {
 
 export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
   const pathname = usePathname();
 
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // Close menu when route changes
-
   // Main navigation menu
   const mainMenu = [
     { title: 'Home', path: `/${locale}` },
@@ -56,6 +49,8 @@ export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps)
     if (onClose) onClose();
   };
 
+  const isSvgLogo = logo?.endsWith('.svg');
+
   return (
     <>
       {/* Mobile Toggle Button */}
@@ -102,15 +97,25 @@ export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps)
           <div className="flex items-center justify-between p-4 border-b border-gray-200 safe-area-p">
             <div className="flex items-center gap-3">
               {logo ? (
-                <div className="relative w-10 h-10">
-                  <Image
-                    src={logo.replace(/^\//, '')}
-                    alt={siteName}
-                    fill
-                    className="object-contain"
-                    sizes="40px"
-                    priority={false}
-                  />
+                <div className="w-10 h-10 flex items-center justify-center">
+                  {isSvgLogo ? (
+                    <img
+                      src={logo}
+                      alt={siteName}
+                      className="w-full h-full object-contain"
+                    />
+                  ) : (
+                    <div className="relative w-10 h-10">
+                      <Image
+                        src={logo}
+                        alt={siteName}
+                        fill
+                        className="object-contain"
+                        sizes="40px"
+                        priority={false}
+                      />
+                    </div>
+                  )}
                 </div>
               ) : (
                 <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
@@ -215,17 +220,17 @@ export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps)
           </div>
 
           {/* Footer CTA */}
-        <div className="p-4 border-t border-gray-200 bg-gray-50">
-          <Link href={`/${locale}/contact`} onClick={closeMenu} className="block w-full">
-            <Button
-              variant="primary"
-              size="md"
-              fullWidth
-            >
-              Get in Touch
-            </Button>
-          </Link>
-        </div>
+          <div className="p-4 border-t border-gray-200 bg-gray-50">
+            <Link href={`/${locale}/contact`} onClick={closeMenu} className="block w-full">
+              <Button
+                variant="primary"
+                size="md"
+                fullWidth
+              >
+                Get in Touch
+              </Button>
+            </Link>
+          </div>
         </div>
       </div>
     </>