change element component & add menu head & responsive head home

app/component/Logo.js

@@ -2,17 +2,18 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
 
-function Logo() {
+function Logo({ isAbsolute }) {
     return (
-        <Link href='/'>
+        <Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0 z-10' : ''}>
             <div className="flex items-center justify-start gap-[5px]">
                 <Image
+                    className='w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]'
                     src='/assets/images/logo.png'
                     width={30}
                     height={30}
                     alt="logo"
                 />
-                <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
+                <p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
             </div>
         </Link>
     )

app/globals.css

@@ -231,6 +231,16 @@ body {
     padding-right: 24px;
 }
 
+/* Hidden Scroll */
+
+.hidden-scroll::-webkit-scrollbar-thumb {
+    background: transparent;
+}
+
+.hidden-scroll::-webkit-scrollbar {
+    height: 0;
+}
+
 @media (min-width: 640px) {
     .padding-responsive {
         padding-left: 52px;

components/home/FrequentSearches.js

@@ -3,19 +3,21 @@ import { Button } from "@mui/material"
 
 function FrequentSearches() {
     return (
-        <div className="flex mt-3 items-center justify-center gap-4">
+        <div className="flex mt-3 items-center justify-start lg:justify-center gap-4 w-full lg:w-fit">
-            <p className="text-[#3B3B3B] text-[16px] font-normal">جستجوهای پر تکرار:</p>
+            <p className="text-[#3B3B3B] text-[16px] font-normal text-nowrap">جستجوهای پر تکرار:</p>
-            <ul className="flex items-center justify-center gap-[14px]">
+            <div className="overflow-auto hidden-scroll">
-                {frequentSearches.map((item, idx) => (
+                <ul className="flex items-center justify-start gap-[14px]">
-                    <li key={idx}>
+                    {frequentSearches.map((item, idx) => (
-                        <Button
+                        <li key={idx}>
-                            variant="contained"
+                            <Button
-                            color="secondary"
+                                variant="contained"
-                            className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
+                                color="secondary"
-                        >{item}</Button>
+                                className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
-                    </li>
+                            >{item}</Button>
-                ))}
+                        </li>
-            </ul>
+                    ))}
+                </ul>
+            </div>
         </div>
     )
 }

components/home/search/index.js

@@ -1,25 +1,31 @@
 import Search from "@/components/icons/Search";
-import Location from "@/components/icons/Location";
 import { Button, ButtonGroup, TextField } from "@mui/material";
-import ArrowBottomH from "@/components/icons/ArrowBottomH";
 import ModalSearchCity from "./modal";
+import SearchD from "@/components/icons/SearchD";
 
 function SearchBar() {
     return (
         <ButtonGroup
             variant="contained"
-            className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
+            className="
+            !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
+            !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px]   
+            !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
+            "
         >
             <ModalSearchCity />
-            <span className="black w-px h-12 bg-[#EFEFEF]"></span>
+            <span className="black w-px bg-[#EFEFEF]"></span>
             <TextField
                 variant="standard"
                 InputProps={{
                     disableUnderline: true
                 }}
                 sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
                     '& .MuiInput-root': {
-                        padding: '9px 0',
+                        padding: '0',
                         borderBottom: 'none',
                     },
                     '& .MuiInputBase-input': {
@@ -28,14 +34,17 @@ function SearchBar() {
                 }}
                 placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
                 dir='rtl'
-                className={`!shadow-none !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+                className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
             />
-            <Button className="!rounded-[4px] !gap-2.5">
+            <Button className="!hidden lg:!flex !rounded-[4px] !gap-2.5 !min-w-[114px]">
                 <div className="min-w-[20px] min-h-[20px]">
                     <Search />
                 </div>
                 <p>جستجو</p>
             </Button>
+            <Button className="!flex lg:!hidden !rounded-[4px] !gap-2.5 !p-2.5 !w-[40px] !h-[40px]">
+                <SearchD />
+            </Button>
         </ButtonGroup>
     )
 }

components/home/search/modal/index.js

@@ -28,10 +28,10 @@ function ModalSearchCity() {
     const handleClose = () => setOpen(false);
 
     return (
-        <div>
+        <>
             {/* Button Modal */}
             <Button
-                className="!border-none hover:!bg-transparent"
+                className="!border-none hover:!bg-transparent !min-w-[155px] !py-0 lg:!py-[9px]"
                 onClick={handleOpen}
                 variant="contained"
                 color="secondary"
@@ -80,7 +80,7 @@ function ModalSearchCity() {
                     </div>
                 </Box>
             </Modal>
-        </div>
+        </>
     )
 }
 

components/icons/UserLogin.js

@@ -0,0 +1,10 @@
+function UserLogin() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#3B3B3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26003 15 3.41003 18.13 3.41003 22" stroke="#3B3B3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default UserLogin

components/layout/Header.js

@@ -1,40 +0,0 @@
-import Logo from "@/app/component/Logo";
-import { listNav } from "@/constans";
-import { Button } from "@mui/material";
-import Link from "next/link";
-
-function Header({ name }) {
-    return (
-        <div
-            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
-        >
-            <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
-                <Logo />
-                <ul className="flex items-center justify-center gap-10">
-                    {listNav.map(nav => (
-                        <li
-                            key={nav.id}
-                        >
-                            <Link
-                                href={nav.link}
-                                className={`
-                                ${nav.link.replace('/', '') === name ? '!text-[#526CAC]' : 'text-[#525252]'}
-                                    text-[16px] font-medium
-                                `}
-                            >
-                                {nav.name}
-                            </Link>
-                        </li>
-                    ))}
-                </ul>
-                <Link href='/signin'>
-                    <Button variant="outlined" color="primary">
-                        ورود | ثبت نام
-                    </Button>
-                </Link>
-            </div>
-        </div>
-    )
-}
-
-export default Header

components/layout/header/Header.js

@@ -0,0 +1,66 @@
+'use client';
+
+import { Button } from "@mui/material";
+import Logo from "@/app/component/Logo";
+import Link from "next/link";
+import Row from "./list/Row";
+import Col from "./list/col";
+import ButtonMenu from "./list/col/ButtonMenu";
+import { useState } from "react";
+import BgGray from "./list/col/BgGray";
+import UserLogin from "@/components/icons/UserLogin";
+
+function Header({ name }) {
+
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+        <div
+            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
+        >
+            <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
+                <div className="">
+                    <BgGray
+                        isActive={isActive}
+                        setIsActive={setIsActive}
+                    />
+                    <Col
+                        isActive={isActive}
+                        setIsActive={setIsActive}
+                    />
+                    <div className="relative flex flex-row-reverse gap-2">
+                        <Logo />
+                        <div className="flex lg:hidden">
+                            <ButtonMenu
+                                isActive={isActive}
+                                setIsActive={setIsActive}
+                            />
+                            <Logo isAbsolute={true} />
+                        </div>
+                    </div>
+                </div>
+                <Row />
+                <Link href='/signin'>
+                    <Button
+                        className="!hidden lg:!flex"
+                        variant="outlined"
+                        color="primary"
+                    >
+                        ورود | ثبت نام
+                    </Button>
+                    <Button
+                        className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 ${isActive ? '!bg-[#9D9D9D]' : '!bg-[#EFEFEF]'}`}
+                        variant="text"
+                        color="primary"
+                    >
+                        <div className="flex lg:hidden">
+                            <UserLogin />
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default Header

components/layout/header/list/Row.js

@@ -0,0 +1,27 @@
+import { listNav } from "@/constans";
+import { isActiveURL } from "@/helper";
+import Link from "next/link";
+
+function Row() {
+    return (
+        <ul className="hidden lg:flex items-center justify-center gap-[40px]">
+            {listNav.map(nav => (
+                <li
+                    key={nav.id}
+                >
+                    <Link
+                        href={nav.link}
+                        className={`
+                                ${isActiveURL(nav.link.replace('/', ''), name) ? '!text-[#526CAC]' : 'text-[#525252]'}
+                                    text-[16px] font-medium
+                                `}
+                    >
+                        {nav.name}
+                    </Link>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Row

components/layout/header/list/col/BgGray.js

@@ -0,0 +1,13 @@
+function BgGray({ isActive, setIsActive }) {
+    return (
+        <div
+            onClick={() => setIsActive(false)}
+            className={`
+                ${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
+                absolute cursor-pointer transition-all duration-500 left-0 top-[-12px] sm:top-[-21px] md:top-[-30px] lg:top-[-40px] w-screen h-screen
+                `}
+        ></div>
+    )
+}
+
+export default BgGray

components/layout/header/list/col/ButtonMenu.js

@@ -0,0 +1,28 @@
+import { Button } from "@mui/material"
+
+function ButtonMenu({ isActive, setIsActive }) {
+    return (
+        <Button
+            onClick={() => setIsActive(!isActive)}
+            className="!flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
+        >
+            <span
+                className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+                    ${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[6px]' : 'rotate-0 w-full'}
+                `}
+            ></span>
+            <span
+                className={`w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+                    ${isActive && 'rotate-180'}
+                `}
+            ></span>
+            <span
+                className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+                    ${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[-6px]' : 'rotate-0 w-full'}
+                `}
+            ></span>
+        </Button>
+    )
+}
+
+export default ButtonMenu

components/layout/header/list/col/index.js

@@ -0,0 +1,46 @@
+import { listNav } from "@/constans";
+import { Button } from "@mui/material";
+import Link from "next/link";
+import { isActiveURL } from "@/helper";
+
+function Col({ isActive, setIsActive }) {
+    return (
+        <div className="flex lg:hidden">
+            {/* <Button variant="text" className="!p-0.5">
+                <MenuHead />
+            </Button> */}
+
+            <div className={`
+            fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-[-12px] sm:top-[-21px] 
+            md:top-[-30px] lg:top-[-40px] w-[85%] h-screen bg-[#FAFAFA] transition-all duration-500
+            ${isActive ? 'right-0' : '-right-[85%]'}
+            `}>
+                <ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px] mr-[16px]">
+                    {listNav.map(nav => (
+                        <li
+                            key={nav.id}
+                            className="w-full"
+                        >
+                            <Link
+                                href={nav.link}
+                                className="w-full"
+                            >
+                                <Button className={`
+                                ${isActiveURL(nav.link.replace('/', ''), name) ?
+                                        '!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]' :
+                                        '!text-[#525252]'
+                                    }
+                                    !text-[16px] !w-full !flex !justify-start !font-medium !py-2.5 !px-4
+                                `}>
+                                    {nav.name}
+                                </Button>
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default Col

components/layout/index.js

@@ -1,11 +1,11 @@
 import Footer from './Footer';
-import Header from './Header';
+import Header from './header/Header';
 
 function Layout({ children, title, name }) {
     return (
         <div>
             <main className="w-full min-h-screen">
-                <header className="w-full fixed top-10 right-1/2 translate-x-1/2 padding-responsive z-[10]">
+                <header className="w-full fixed top-[12px] sm:top-[21px] md:top-[30px] lg:top-[40px] right-1/2 translate-x-1/2 padding-responsive z-[10]">
                     <Header name={name} />
                 </header>
                 <section>

helper/index.js

@@ -1 +1,3 @@
-export const numberToArStyle = num => num.toLocaleString('ar-AE')
+export const numberToArStyle = num => num.toLocaleString('ar-AE');
+
+export const isActiveURL = (link, name) => link === name;