hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change style menu home & responsive head and footer home & list doctors

Browse Source
This commit is contained in:
Ehsan
2024-08-11 06:46:35 +03:30
parent 0afe0a39b0
commit 697bde2f5d
13 changed files with 98 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/footer/LogoNamad.js
+26
View File
@@ -0,0 +1,26 @@
import Image from "next/image"
const Namads = [
'/assets/images/footer-etehadie.png',
'/assets/images/footer-r.png',
'/assets/images/footer-namad.png'
]
function LogoNamad() {
return (
<ul className="flex items-center gap-3">
{Namads.map(src => (
<li>
<Image
alt="logo"
width={48}
height={48}
src={src}
/>
</li>
))}
</ul>
)
}
export default LogoNamad
components/layout/Footer.js → components/layout/footer/index.js
+35 -42
View File
@@ -1,15 +1,16 @@
import { footerL, footerR } from "@/constans";
import Image from "next/image";
import Linkedin from "../icons/Linkedin";
import Telegram from "../icons/Telegram";
import Whatsapp from "../icons/Whatsapp";
import Instagram from "../icons/Instagram";
import Link from "next/link";
import LocationF from "../icons/LocationF";
import CalendarAddF from "../icons/CalendarAddF";
import StethoscopeF from "../icons/StethoscopeF";
import Logo from "@/app/component/Logo";
import { Button } from "@mui/material";
import Link from "next/link";
// Icons
import Linkedin from "../../icons/Linkedin";
import Telegram from "../../icons/Telegram";
import Whatsapp from "../../icons/Whatsapp";
import Instagram from "../../icons/Instagram";
import LocationF from "../../icons/LocationF";
import CalendarAddF from "../../icons/CalendarAddF";
import StethoscopeF from "../../icons/StethoscopeF";
import LogoNamad from "./LogoNamad";
const socialMedias = [
<Linkedin />,
@@ -24,63 +25,51 @@ const head = [
{ icon: <StethoscopeF />, text: 'دشبورد اختصاصی برای پزشکان' }
]
const Namads = [
'/assets/images/footer-etehadie.png',
'/assets/images/footer-r.png',
'/assets/images/footer-namad.png'
]
function Footer() {
return (
<div>
<div className="flex items-center justify-center gap-[100px]">
<div className="pb-[11px]">
<div className="flex items-center justify-evenly gap-[12px]">
{head.map((item, idx) => (
<div
key={idx}
className="flex items-center cursor-pointer justify-start gap-1 p-[6px] hover:bg-[#F7F7F7] hover:transition-all
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-transparent hover:bg-none hover:border-[#FDBD9F]"
className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
>
{item.icon}
<p className="text-[#2F2F2F] text-[16px] font-medium">{item.text}</p>
<p className="text-[#2F2F2F] text-center text-[16px] font-medium">{item.text}</p>
</div>
))}
</div>
<span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
<div className="pb-[60px] flex items-start justify-between">
<div
className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px]
flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
>
{/* Right */}
<div className="flex gap-[30px] flex-col items-start">
<div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
{/* Icon */}
<Logo />
<p
className="text-[#616161] text-[14px] font-normal"
>724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است. </p>
<ul className="flex items-center gap-3">
{Namads.map(src => (
<li>
<Image
alt="logo"
width={48}
height={48}
src={src}
/>
</li>
))}
</ul>
className="w-full lg:w-fit text-[#616161] text-[14px] font-normal"
>724 یک وبسایت نوبت دهی آنلاین می باشد که<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران فراهم کرده<br className="hidden lg:flex" /> است. </p>
<div className="hidden lg:flex">
<LogoNamad />
</div>
</div>
{/* Center */}
<ul className="flex flex-col gap-3">
<ul className="w-full lg:w-fit flex flex-col gap-3">
{footerR.map((item, idx) => (
<li
key={idx}
className={`
relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
relative w-full after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'}
text-[16px] w-fit`}
>{item}</li>
))}
</ul>
<ul className="flex flex-col gap-3">
<ul className="w-full lg:w-fit flex flex-col gap-3">
{footerL.map((item, idx) => (
<li
key={idx}
@@ -93,11 +82,11 @@ function Footer() {
</ul>
{/* Left */}
<div className="flex flex-col justify-center gap-[50px]">
<div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
<p className="text-[#3B3B3B] w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
همراه با ما باشید:
</p>
<ul className="flex items-center gap-[15px]">
<ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
{socialMedias.map((item, idx) => (
<li
key={idx}
@@ -113,7 +102,11 @@ function Footer() {
))}
</ul>
</div>
<div className="flex lg:hidden justify-center w-full mt-2">
<LogoNamad />
</div>
</div>
<p className="text-center text-[#7E7E7E] text-[12px] font-normal">کلیه حقوق وبسایت برای این شرکت می باشد.</p>
</div>
)
}
components/layout/header/Header.js → components/layout/header/index.js
+8 -4
View File
@@ -18,19 +18,23 @@ function Header({ name }) {
<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={`
h-20 px-4 py-8 flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
${isActive ? '!pr-0' : '!p-4'}
`}>
<div className="">
<BgGray
isActive={isActive}
setIsActive={setIsActive}
/>
<Col
name={name}
isActive={isActive}
setIsActive={setIsActive}
/>
<div className="relative flex flex-row-reverse gap-2">
<Logo />
<div className="flex lg:hidden">
<div className="flex lg:hidden z-20">
<ButtonMenu
isActive={isActive}
setIsActive={setIsActive}
@@ -39,7 +43,7 @@ function Header({ name }) {
</div>
</div>
</div>
<Row />
<Row name={name} />
<Link href='/signin'>
<Button
className="!hidden lg:!flex"
@@ -49,7 +53,7 @@ function Header({ name }) {
ورود | ثبت نام
</Button>
<Button
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 ${isActive ? '!bg-[#9D9D9D]' : '!bg-[#EFEFEF]'}`}
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
variant="text"
color="primary"
>
components/layout/header/list/Row.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { listNav } from "@/constans";
import { isActiveURL } from "@/helper";
import Link from "next/link";
function Row() {
function Row({ name }) {
return (
<ul className="hidden lg:flex items-center justify-center gap-[40px]">
{listNav.map(nav => (
components/layout/header/list/col/BgGray.js
+1 -1
View File
@@ -4,7 +4,7 @@ function BgGray({ isActive, setIsActive }) {
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
absolute z-[5] cursor-pointer transition-all duration-500 left-0 top-[-12px] sm:top-[-21px] md:top-[-30px] lg:top-[-40px] w-screen h-screen
`}
></div>
)
components/layout/header/list/col/index.js
+3 -3
View File
@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
import Link from "next/link";
import { isActiveURL } from "@/helper";
function Col({ isActive, setIsActive }) {
function Col({ isActive, setIsActive, name }) {
return (
<div className="flex lg:hidden">
{/* <Button variant="text" className="!p-0.5">
@@ -12,10 +12,10 @@ function Col({ isActive, setIsActive }) {
<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
md:top-[-30px] lg:top-[-40px] w-[85%] z-10 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]">
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px]">
{listNav.map(nav => (
<li
key={nav.id}
components/layout/index.js
+2 -2
View File
@@ -1,5 +1,5 @@
import Footer from './Footer';
import Header from './header/Header';
import Footer from './footer';
import Header from './header';
function Layout({ children, title, name }) {
return (