change element component & add menu head & responsive head home
This commit is contained in:
Ehsan
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -3,19 +3,21 @@ import { Button } from "@mui/material"
|
||||
|
||||
function FrequentSearches() {
|
||||
return (
|
||||
<div className="flex mt-3 items-center justify-center gap-4">
|
||||
<p className="text-[#3B3B3B] text-[16px] font-normal">جستجوهای پر تکرار:</p>
|
||||
<ul className="flex items-center justify-center gap-[14px]">
|
||||
{frequentSearches.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
|
||||
>{item}</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<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 text-nowrap">جستجوهای پر تکرار:</p>
|
||||
<div className="overflow-auto hidden-scroll">
|
||||
<ul className="flex items-center justify-start gap-[14px]">
|
||||
{frequentSearches.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
|
||||
>{item}</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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>
|
||||
|
||||
+3
-1
@@ -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;
|
||||
Reference in New Issue
Block a user