social media icons updated

components/ContactFloat.js

@@ -6,6 +6,7 @@ import axios from "axios";
 export default function ContactFloat() {
   const [open, setOpen] = useState(false);
   const [showChat, setShowChat] = useState(false);
+  const [showSocial, setShowSocial] = useState(false); // 👈 NEW: toggle social icons
 
   /** Contact actions */
   const extraIcons = [
@@ -24,6 +25,26 @@ export default function ContactFloat() {
       src: "/assets/images/chat.png",
       label: "Chat",
     },
+    {
+      action: () => setShowSocial((prev) => !prev), // 👈 NEW: share toggle
+      src: "/assets/images/share.png",
+      label: "Share",
+    },
+  ];
+
+  /** Social media list shown on Share click */
+  const socialIcons = [
+
+    {
+      href: "https://www.instagram.com/elrapharehab/",
+      iconClass: "icon-4",
+      label: "Instagram",
+    },
+    {
+      href: "https://www.facebook.com/ELRaphaRehabCenter/",
+      iconClass: "icon-7",
+      label: "Facebook",
+    },
   ];
 
   return (
@@ -103,7 +124,17 @@ export default function ContactFloat() {
           type="button"
           aria-label={open ? "Close" : "Contact Us"}
           className="contact-icon-outer toggle-btn"
-          onClick={() => setOpen((prev) => !prev)}
+          onClick={() => {
+            setOpen((prev) => {
+              const newState = !prev;
+              if (!newState) {
+                // 🔹 when closing the main button, also hide Chat & Social
+                setShowChat(false);
+                setShowSocial(false);
+              }
+              return newState;
+            });
+          }}
           style={{
             position: "fixed",
             bottom: "71px",
@@ -112,7 +143,6 @@ export default function ContactFloat() {
             background: "#102548",
             borderRadius: "50%",
             padding: "15px",
-            // boxShadow: "0 4px 12px #102548",
             border: "none",
             zIndex: 9999,
           }}
@@ -129,10 +159,50 @@ export default function ContactFloat() {
         </button>
       </div>
 
-      {/* Chat Form Sidebar */}
+      {/* 👉 Right side floating Social Icons (only when Share clicked) */}
-      {showChat && (
+      {showSocial && (
-        <ChatForm onClose={() => setShowChat(false)} />
+        <div
+          style={{
+            position: "fixed",
+            bottom: "11%",
+            left: "90px",
+            transform: "translateY(-50%)",
+            display: "flex",
+            flexDirection: "row",
+            gap: "15px",
+            zIndex: 9999,
+            background: "white", padding: "8px",
+            borderRadius: "50px"
+          }}
+        >
+          {socialIcons.map((icon, i) => (
+            <a
+              key={i}
+              href={icon.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={icon.label}
+              style={{
+                background: "#102548",
+                borderRadius: "50%",
+                width: "45px",
+                height: "45px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#fff",
+                fontSize: "22px",
+                textDecoration: "none",
+              }}
+            >
+              <i className={icon.iconClass}></i>
+            </a>
+          ))}
+        </div>
       )}
+
+      {/* Chat Form Sidebar */}
+      {showChat && <ChatForm onClose={() => setShowChat(false)} />}
     </>
   );
 }

components/layout/Layout.js

@@ -69,7 +69,7 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
                 {footerStyle === 2 && <Footer2 />}
             </div>
              <ContactFloat />
-             <SocialFloat/>
+             {/* <SocialFloat/> */}
             <BackToTop scroll={scroll} />
         </>
     );