mip-website/pages/components/Layout/header.js

import React, { useState } from 'react'
import Link from 'next/link'
import {
  MDBContainer,
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarToggler,
  MDBNavbarNav,
  MDBNavbarLink,
  MDBCollapse,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
  MDBDropdownLink,
  MDBDropdown,
  MDBCardImage,
} from 'mdb-react-ui-kit'
import { HamburgerIcon } from '@chakra-ui/icons'
import { useRouter } from 'next/router'

import { FaWhatsapp } from 'react-icons/fa'
import { FaInstagram } from 'react-icons/fa'
import { SiAparat } from 'react-icons/si'

export default function App() {
  const [showNavSecond, setShowNavSecond] = useState(false)

  let router = useRouter()

  return (
    <>
      {/* <div style={{ backgroundColor: '#69c6c8' }}>*/}
      {/*  <div className={'flex h-5/12 justify-content-between'}>*/}
      {/*    <div className={'flex justify-content-center align-items-center'}>*/}
      {/*      <div className={'flex w-30 justify-content-center align-items-center'}>*/}
      {/*        <img  style={{position: 'absolute'}} width={90} src={PhoneCall} />*/}
      {/*        <Divider style={{transform: 'rotate(90deg)', marginLeft: 55}} width={10} />*/}
      {/*      </div>*/}
      {/*      <div className={'flex mt-3 flex-column'}>*/}
      {/*        <div style={{fontSize: 15}} className={'text-white'}>*/}
      {/*          خرید سهام*/}
      {/*        </div>*/}
      {/*        <div style={{fontSize: 15}} className={'flex align-items-center text-white'}>*/}
      {/*          <p style={{fontSize: 10}}>021 -</p>*/}
      {/*           <p>28426945</p>*/}
      {/*        </div>*/}
      {/*      </div>*/}
      {/*    </div>*/}
      {/*    <div className={''}>*/}
      {/*        جای خالی*/}
      {/*    </div>*/}
      {/*  </div>*/}

      {/*</div> */}
      {/* topheader */}
      <div className='bg-[#57C5C6] headerTop'>
        <div className='flex sm:flex-col md:flex-row sm:mt-5 lg:flex-row justify-content-between items-center h-14 container-fluid m-auto '>
          <div className='flex sm:mt-2'>
            <div className='w-10 h-10 md:w-12 md:h-12  flex items-center justify-center'>
              <a
                target={'_blank'}
                href={'https://web.whatsapp.com/send?phone=98919419-+9420'}
                className='inline-flex rounded-full p-[0.4rem] text-[#57C5C6]  bg-[#fff] hover:bg-[#014258] hover:text-[#fff] 	'
              >
                <FaWhatsapp />
              </a>
            </div>
            <div className=' w-10 h-10 md:w-12 md:h-12 flex items-center justify-center'>
              <a
                href={'https://www.instagram.com/miphospital/'}
                target={'_blank'}
                className='mx-5 inline-flex rounded-full p-[0.4rem] text-[#57C5C6]  bg-[#fff] hover:bg-[#014258] hover:text-[#fff] '
              >
                <FaInstagram />
              </a>
            </div>
            {/* <div className=' w-10 h-10 md:w-12 md:h-12 flex items-center justify-center'>
              <a
                href={'https://www.aparat.com/miphospital'}
                target={'_blank'}
                className='mx-5 inline-flex rounded-full p-[0.4rem] text-[#57C5C6]  bg-[#fff] hover:bg-[#014258] hover:text-[#fff] '
              >
                <SiAparat />
              </a>
            </div> */}
            <div className='flex items-center justify-center'>
              <a
                href={'tel:02153457000'}
                className='rounded-full flex items-center p-[0.4rem] bg-[#39a2a5] text-[#fff]  hover:bg-[#57c5c6] hover:text-[#fff] '
              >
                <span className={'text-sm'}> 021-53457000</span>
                {/* <span className={'text-sm ml-2'}>:خرید سهام</span> */}
              </a>
            </div>
          </div>

          <div className='show-addr col-span-2 flex items-center flex-row-reverse mr-4 meheAddress'>
            <img src='/resource/headerTop/map.svg' className='tex-white w-[2rem]  map' alt='address' />
            <span className=' text-[0.6rem]  text-right md:text-xs	xl:text-sm	 md:leading-5 font-medium text-white addresstopHeader'>
              تهران ، شهر جدید پرند، بلوار شهیدقاسم سلیمانی، انتهای فاز 5 ،نبش بلوار رسول اکرم
            </span>
          </div>
        </div>
      </div>
      {/* end topheader */}

      {/* navbar */}
      <MDBNavbar style={{ backgroundColor: '#39a2a5' }} expand='lg' light ba>
        <style jsx>
          {`
            .responsive-menu-mobile {
              outline: none;
              background-color: red !important;
            }
          `}
        </style>
        <MDBContainer className={'dana'} fluid>
          <MDBNavbarToggler
            aria-expanded='false'
            aria-label='Toggle navigation'
            onClick={() => setShowNavSecond(!showNavSecond)}
          >
            <HamburgerIcon />
          </MDBNavbarToggler>
          <MDBCollapse navbar show={showNavSecond}>
            <MDBNavbar>
              <MDBDropdown group className=''>
                <MDBDropdownToggle
                  className={'font-weight-bold '}
                  style={{ fontsize: '35px !important' }}
                  color='light'
                >
                  بیشتر
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem>
                    <Link href={'/page/Directors'}>
                      <MDBDropdownLink style={{ cursor: 'pointer' }} className={'d-flex  justify-content-end'}>
                        تیم پروژه{' '}
                      </MDBDropdownLink>
                    </Link>
                  </MDBDropdownItem>
                  <Link href={'/page/about'}>
                    <MDBDropdownLink style={{ cursor: 'pointer' }} className={'d-flex  justify-content-end'}>
                      درباره ما
                    </MDBDropdownLink>
                  </Link>
                  {/* <MDBDropdownItem></MDBDropdownItem> */}
                  {/* <MDBDropdownItem>
                    <Link href={'/page/docs'}>
                      <MDBDropdownLink style={{ cursor: 'pointer' }} className={'d-flex  justify-content-end'}>
                        اسناد رسمی شرکت{' '}
                      </MDBDropdownLink>
                    </Link>
                  </MDBDropdownItem> */}
                  <MDBDropdownItem>
                    <MDBDropdownLink
                      target={'__blanck'}
                      href={'https://www.instagram.com/miphospital'}
                      className={'d-flex justify-content-end'}
                    >
                      اینستاگرام
                    </MDBDropdownLink>
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavbar>
            <MDBNavbarNav className={'responsive-menu-mobile'}>
              <MDBNavbarLink
                className={
                  router.pathname === '/page/contact-us' ? 'active-item text-white' : '' + 'text-white nav_item '
                }
              >
                <Link
                  prefetch={false}
                  className={'text-white nav_item d-flex flex-row-reverse '}
                  href='/page/contact-us'
                >
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}> تماس با ما</span>
                  </div>
                </Link>
              </MDBNavbarLink>

              <MDBNavbarLink
                className={router.pathname === '/Gallery' ? 'active-item text-white' : '' + 'text-white nav_item '}
              >
                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/Gallery'>
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>گالری</span>
                  </div>
                </Link>
              </MDBNavbarLink>
              <MDBNavbarLink
                className={
                  router.pathname === '/components/service' ? 'active-item text-white' : '' + 'text-white nav_item '
                }
              >
                <Link
                  prefetch={false}
                  className={'text-white nav_item d-flex flex-row-reverse '}
                  href='/components/service'
                >
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>بخش های درمانی</span>
                  </div>
                </Link>
              </MDBNavbarLink>
              {/* <MDBNavbarLink
                className={router.pathname === '/page/news/34' ? 'active-item text-white' : '' + 'text-white nav_item '}
              >
                <Link prefetch={false} className={'text-white nav_item d-flex flex-row-reverse '} href='/page/news/34'>
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}> شرایط انتقال سهام</span>
                  </div>
                </Link>
              </MDBNavbarLink> */}
              {/* <MDBNavbarLink
                className={
                  router.pathname === '/medical-equipment' ? 'active-item text-white' : '' + 'text-white nav_item '
                }
              >
                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/medical-equipment'>
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>واحد تجهیزات پزشکی </span>
                  </div>
                </Link>
              </MDBNavbarLink> */}
              {/* <MDBNavbarLink
                className={router.pathname === '/stock-unit' ? 'active-item text-white' : '' + 'text-white nav_item '}
              >
                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/stock-unit'>
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>امور سهام </span>
                  </div>
                </Link>
              </MDBNavbarLink> */}

              {/* <MDBNavbarLink
                className={router.pathname === '/page/news/52' ? 'active-item text-white' : '' + 'text-white nav_item '}
              >
                <Link prefetch={false} className={'text-white nav_item d-flex flex-row-reverse '} href='/stock-price'>
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>قیمت سهام</span>
                  </div>
                </Link>
              </MDBNavbarLink> */}

              <MDBNavbarLink
                className={router.pathname === '/' ? 'active-item text-white' : '' + 'text-white nav_item '}
              >
                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/'>
                  <div className={'pointer d-flex justify-content-end'}>
                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>صفحه اصلی</span>
                  </div>
                </Link>
              </MDBNavbarLink>
            </MDBNavbarNav>
          </MDBCollapse>
          <MDBNavbarBrand className={'text-white font-weight-bold'}>
            <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/'>
              <div className={'pointer'}>
                <span className={'dana'} style={{ cursor: 'pointer' }}>
                  بیمارستان مهر پرند
                </span>
              </div>
            </Link>
            <MDBCardImage className={'responsive-img resLogo'} width={'50'} src={'/resource/logo/logo.png'} />
          </MDBNavbarBrand>
        </MDBContainer>
      </MDBNavbar>
    </>
  )
}