responsive

2025-11-19 08:15:17 +03:30
parent 4aa26ed219
commit f935aecd09
14 changed files with 217 additions and 104 deletions
--- a/src/ui/components/global/Accordion.tsx
+++ b/src/ui/components/global/Accordion.tsx
@@ -36,26 +36,26 @@ export default function Accordion({

  return (
    <div className="w-full  space-y-4 overflow-hidden">
-      <div key={index} className="p-4 bg-secondary rounded-2xl ">
+      <div key={index} className="md:p-4 py-4 px-1 bg-secondary rounded-2xl ">
        <button
          className="flex w-full items-center justify-between text-right h-full cursor-pointer"
          onClick={() => toggle(index)}
        >
-          <span className="text-lg font-semibold text-white">{title}</span>
+          <span className="md:text-lg text-sm font-semibold text-white">{title}</span>
          <span
            className={` text-white transition-all duration-300  ${
              openIndex === index ? "rotate-90" : "-rotate-90"
            }`}
          >
-            <ChevronLeftSvg size="20" />
+            <ChevronLeftSvg size="16" />
          </span>
        </button>

        <div>
          {openIndex === index && (
-            <div className="bg-white p-10 mt-10 space-y-10">
+            <div className="bg-white md:p-10 px-3 py-1 mt-10 space-y-10">
              {thumbnail && (
-                <div className="h-[600px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden">
+                <div className="md:h-[600px] h-[200px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden">
                  <Image
                    src={`/packages/${thumbnail}`}
                    fill
@@ -66,7 +66,7 @@ export default function Accordion({
              )}
              {description && (
                <div
-                  className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base"
+                  className="overflow-hidden text-gray-600 mt-2 leading-relaxed md:text-base text-sm"
                  dangerouslySetInnerHTML={{__html: description}}
                />
              )}
@@ -101,11 +101,11 @@ export default function Accordion({
              )}
              <>
                <h4 className="font-bold text-lg">
-                  رزرو نوبت و مشاوره رايگان با پزشك و كارشناس IPD :
+                  
                </h4>
                <div className="overflow-hidden text-gray-600  leading-relaxed text-base ">
                  <div>ایمیل : <a href={`mailto:${default_info.email}`}>{default_info.email}</a></div>
-                  <div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}></a></div>
+                  <div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}>{default_info.phone_number}</a></div>
                </div>
              </>
            </div>
--- a/src/ui/components/global/CustomLink.tsx
+++ b/src/ui/components/global/CustomLink.tsx
@@ -7,7 +7,7 @@ interface CustomLinkProps {
 }
 export default function CustomLink({href, label, className}: CustomLinkProps) {
  return (
-    <Link href={href} className={className }>
+    <Link href={href} className={className}>
      {label}
    </Link>
  );
--- a/src/ui/components/menu/MobileMenu.tsx
+++ b/src/ui/components/menu/MobileMenu.tsx
@@ -1,14 +1,24 @@
 "use client";
+import {DefaultMenuLinks} from "@/constants/menu/menu.const";
 import React, {useState} from "react";
+import CustomLink from "../global/CustomLink";
+import {languages_types} from "@/types";
+import ChevronLeftSvg from "../icons/ChevronLeftSvg";
+import {getHref} from "@/utils/functions";

-export default function MobileMenu() {
+export default function MobileMenu({lang}: {lang: languages_types}) {
  const [open, setOpen] = useState(false);
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const toggle = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
  return (
    <>
      <button
        type="button"
        className="lg:hidden block text-blue-primary"
-        onClick={()=>setOpen(!open)}
+        onClick={() => setOpen(!open)}
      >
        <svg
          stroke="currentColor"
@@ -28,12 +38,104 @@ export default function MobileMenu() {
        </svg>
      </button>
      {open && (
-        <div className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-full" onClick={(e)=>{
-          e.stopPropagation();
-          e.preventDefault();
-          setOpen(!open)
-        }}>
-          <div className={`absolute top-0 right-0 h-full ${open ? 'w-[80%]' : 'w-0'} bg-white transition-all duration-300`}></div>
+        <div
+          className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-screen"
+          onClick={(e) => {
+            
+            setOpen(!open);
+          }}
+        >
+          <div
+            className={`absolute top-0 right-0 h-full ${
+              open ? "w-[80%]" : "w-0"
+            } bg-white transition-all duration-300`}
+            onClick={(e)=>e.stopPropagation()}
+          >
+            <div className="p-4">
+              <div className="w-full flex items-center justify-end">
+                <button className="" onClick={() => setOpen(!open)}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="40"
+                    height="40"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
+                      fill="#0F1729"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="mt-5">
+                {DefaultMenuLinks.map((link) => (
+                  <div key={link.id} className="w-full h-fit">
+                    {link.sub.length > 0 ? (
+                      <div className="flex items-center justify-between">
+                        <div className="w-full  space-y-4 overflow-hidden">
+                          <div
+                            key={link.id}
+                            className="rounded-2xl py-4"
+                          >
+                            <button
+                              className="flex w-full items-center justify-between text-right h-full cursor-pointer"
+                              onClick={() => toggle(link.id)}
+                            >
+                              <span >
+                                {link.label[lang]}
+                              </span>
+                              <span
+                                className={`transition-all duration-300  ${
+                                  openIndex === link.id
+                                    ? "rotate-90"
+                                    : "-rotate-90"
+                                }`}
+                              >
+                                <ChevronLeftSvg size="14" />
+                              </span>
+                            </button>
+
+                            <div>
+                              {openIndex === link.id && (
+                                <div className="bg-neutral-200 p-4 mt-4 space-y-10 rounded-2xl">
+                                  <div className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base">
+                                    {link.sub.map((submenu) => (
+                                      <div
+                                        key={submenu.id}
+                                        className="w-full text-blue-primary hover:font-medium  p-1 px-3"
+                                      >
+                                        <CustomLink
+                                          href={getHref(submenu.href, lang)}
+                                          label={submenu.label[lang]}
+                                          className="text-sm font-medium text-black hover:text-secondary transition-all"
+                                        />
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="w-full flex">
+                        <CustomLink
+                          href={getHref(link.href, lang)}
+                          label={link.label[lang]}
+                          className="w-full py-4"
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
        </div>
      )}
    </>
--- a/src/ui/components/top-menu/TopMenu.tsx
+++ b/src/ui/components/top-menu/TopMenu.tsx
@@ -9,10 +9,12 @@ import {languages_types} from "@/types";
 import MobileMenu from "../menu/MobileMenu";
 import {getHref} from "@/utils/functions";

-export default function TopMenu({lang}: {lang: string}) {
+export default function TopMenu({lang}: {lang: languages_types}) {
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
+    if (window.innerWidth < 1024) return;
+
    const handleScroll = () => {
      if (window.scrollY > 50) {
        setIsSticky(true);
@@ -25,49 +27,46 @@ export default function TopMenu({lang}: {lang: string}) {
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  return (
-    <div
-      className={`w-full z-50 transition-all duration-300 container flex lg:justify-around justify-between items-center 
+    <>
+      <div
+        className={`w-full z-30 transition-all duration-300 container flex lg:justify-around justify-between items-center 
      ${
        isSticky
          ? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/80"
          : "lg:h-[120px] h-[60px] bg-white relative"
      }`}
-      // className="bg-white container   sticky top-0 z-30"
-    >
-      {/* <div className="top-0 absolute h-[40px] bg-radial bg-secondary/30 backdrop-blur-2xl w-full">
+        // className="bg-white container   sticky top-0 z-30"
+      >
+        {/* <div className="top-0 absolute h-[40px] bg-radial bg-secondary/30 backdrop-blur-2xl w-full">

      </div> */}
-      <div className="lg:w-[210px] flex gap-x-10 transition-all duration-300 items-center ">
-        <Link href={"/"} className="flex items-center gap-x-2">
-          <div
-            className={`relative ${
-              isSticky
-                ? " h-[70px] w-[70px]"
-                : "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
-            }`}
-          >
-            <Image
-              loading="lazy"
-              src="/shomalhospital-ipd-logo.png"
-              fill
-              alt="shomal hospital"
-              style={{color: "transparent", fill: "red", objectFit: "fill"}}
-            />
-          </div>
-        </Link>
-      </div>
-
-      <MobileMenu />
-      <div className="lg:grid hidden grid-cols-12  gap-x-1 w-full h-full items-center">
-        <div className="col-span-8 flex items-center justify-center w-full h-full">
-          <Menu
-            lang={lang}
-            direction="horizontal"
-            items={DefaultMenuLinks}
-          />
+        <div className="lg:w-[210px] flex gap-x-10 transition-all duration-300 items-center ">
+          <Link href={"/"} className="flex items-center gap-x-2">
+            <div
+              className={`relative ${
+                isSticky
+                  ? " h-[70px] w-[70px]"
+                  : "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
+              }`}
+            >
+              <Image
+                loading="lazy"
+                src="/shomalhospital-ipd-logo.png"
+                fill
+                alt="shomal hospital"
+                style={{color: "transparent", fill: "red", objectFit: "fill"}}
+              />
+            </div>
+          </Link>
        </div>
-        <div className="col-span-4 flex items-center justify-center gap-x-5">
-          {/* <a
+
+        <MobileMenu lang={lang} />
+        <div className="lg:grid hidden grid-cols-12  gap-x-1 w-full h-full items-center">
+          <div className="col-span-8 flex items-center justify-center w-full h-full">
+            <Menu lang={lang} direction="horizontal" items={DefaultMenuLinks} />
+          </div>
+          <div className="col-span-4 flex items-center justify-center gap-x-5">
+            {/* <a
            href="tel:0114492"
            className="text-white relative group  flex items-end hover:bg-blue-primary p-3 hover:text-white transition-all rounded-xl"
          >
@@ -80,24 +79,29 @@ export default function TopMenu({lang}: {lang: string}) {
              <TelephoneSvg size="28" />
            </span>
          </a> */}
-          {/* <Dropdown options={site_languages} /> */}
+            {/* <Dropdown options={site_languages} /> */}

-          <CustomLink
-            href={getHref("/contact-us#request_accept", lang)}
-            label={Menu_buttons.request_to_accept[lang as languages_types] || ""}
-            className={`bg-blue-primary text-white rounded-full ${
-              isSticky ? "py-4 px-4" : "py-4 px-6"
-            } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap  shadow-neutral-300 hover:shadow-none transition-all duration-200`}
-          />
-          <CustomLink
-            href={getHref("/upload-documents", lang)}
-            label={Menu_buttons.upload_document[lang as languages_types] || ""}
-            className={`bg-secondary text-white rounded-full ${
-              isSticky ? "py-4 px-4" : "py-4 px-6"
-            } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
-          />
+            <CustomLink
+              href={getHref("/contact-us#request_accept", lang)}
+              label={
+                Menu_buttons.request_to_accept[lang as languages_types] || ""
+              }
+              className={`bg-blue-primary text-white rounded-full ${
+                isSticky ? "py-4 px-4" : "py-4 px-6"
+              } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap  shadow-neutral-300 hover:shadow-none transition-all duration-200`}
+            />
+            <CustomLink
+              href={getHref("/upload-documents", lang)}
+              label={
+                Menu_buttons.upload_document[lang as languages_types] || ""
+              }
+              className={`bg-secondary text-white rounded-full ${
+                isSticky ? "py-4 px-4" : "py-4 px-6"
+              } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
+            />
+          </div>
        </div>
      </div>
-    </div>
+    </>
  );
 }