%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/.trash/vacivitta/node_modules/vacivitta/src/components/
Upload File :
Create Path :
Current File : /home/vacivi36/.trash/vacivitta/node_modules/vacivitta/src/components/Header.jsx

import { useState } from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { AnimatePresence, motion } from 'framer-motion'
import MegaMenu from './MegaMenu'
import MegaMenuServices from './MegaMenuServices'
import { FaArrowAltCircleDown, FaArrowDown, FaChevronUp, FaChevronDown } from 'react-icons/fa'


const HeaderContainer = styled.header`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  padding: 10px 80px;
  z-index: 100;

  @media (max-width: 768px) {
    padding: 10px 40px;
  }
`

const Logo = styled.img`
  width: 160px;
`

const Nav = styled.nav`
  display: flex;
  align-items: center;
  gap: 10px;

  @media (max-width: 768px) {
    display: none;
  }
`

const NavItem = styled(NavLink)`
  text-decoration: none;
  color: #0094d9;
  font-size: 17px;
  font-weight: 500;
  padding: 8px 15px;
  transition: all 0.3s ease;

  &.active {
    color: #3d9948;
    font-weight: 700;
  }

  &:hover {
    transform: translateY(-3px);
    color: #3d9948;
  }
`

const DisabledNavItem = styled.span`
  text-decoration: none;
  color: #93c5e0;
  font-size: 17px;
  font-weight: 500;
  padding: 8px 15px;
  cursor: not-allowed;
`

const ExternalNavItem = styled.a`
  text-decoration: none;
  color: #0094d9;
  font-size: 17px;
  font-weight: 500;
  padding: 8px 15px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-3px);
    color: #3d9948;
  }
`

const ServicesContainer = styled.div`
  position: relative;
  display: flex;
  align-items: center;

  &:hover .mega-menu {
    display: block;
  }
`
const ServicesContainer2 = styled.div`
  position: relative;
  display: flex;
  align-items: center;

  &:hover .mega-menu {
    display: block;
  }
`

const MobileMenuIcon = styled.div`
  display: none;
  cursor: pointer;
  width: 35px;
  height: 30px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  div {
    width: 100%;
    height: 4px;
    background: #0094d9;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  @media (max-width: 768px) {
    display: flex;
  }
`

const MobileMenuContainer = styled(motion.div)`
  position: fixed;
  top: 0;
  right: 0;
  width: 270px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.1);
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 200;
`

const CloseButton = styled.button`
  position: absolute;
  top: 0px;
  right: 0px;
  background: none;
  border: none;
  font-size: 54px;
  cursor: pointer;
  color: #0094d9;
  &:hover {
    background-color: transparent;
    border: none;
  }
`

const SubMenuContainer = styled(motion.div)`
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  max-height: 300px; /* Ajuste conforme necessário */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;

  /* Estilizando a scrollbar para navegadores WebKit (Chrome, Safari) */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
`;

function Header() {
  const [isMegaMenuOpen, setIsMegaMenuOpen] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [isMegaMenuMobileOpen, setIsMegaMenuMobileOpen] = useState(false)
  const [isMegaMenuOpen2, setIsMegaMenuOpen2] = useState(false)
  const [isMobileMenuOpen2, setIsMobileMenuOpen2] = useState(false)
  const [isMegaMenuMobileOpen2, setIsMegaMenuMobileOpen2] = useState(false)

  // Add function to scroll to top when logo is clicked
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  return (
    <HeaderContainer>
      <NavLink to="/" onClick={scrollToTop}>
        <Logo src="/logo.png" alt="Vacivitta Logo" />
      </NavLink>

      {/* Menu Desktop */}
      <Nav>
        <NavItem to="/" end onClick={scrollToTop}>Home</NavItem>
        <NavItem to="/quem-somos" onClick={scrollToTop}>Quem Somos</NavItem>
        <NavItem to="/produtos" onClick={scrollToTop}>Produtos</NavItem>
        <ServicesContainer2
          onMouseEnter={() => setIsMegaMenuOpen2(true)}
          onMouseLeave={() => setIsMegaMenuOpen2(false)}
        >
        <NavItem to="/servicos" onClick={scrollToTop}>Serviços<FaArrowDown style={{marginLeft: '5px'}} size={10}/></NavItem>
        <AnimatePresence>
            {isMegaMenuOpen2 && <MegaMenuServices />}
          </AnimatePresence>
        </ServicesContainer2>
        <ServicesContainer
          onMouseEnter={() => setIsMegaMenuOpen(true)}
          onMouseLeave={() => setIsMegaMenuOpen(false)}
        >
          <NavItem to="/vacinas" onClick={scrollToTop}>Vacinas<FaArrowDown style={{marginLeft: '5px'}} size={10}/></NavItem>
          <AnimatePresence>
            {isMegaMenuOpen && <MegaMenu />}
          </AnimatePresence>
        </ServicesContainer>
        <NavItem to="/fale-conosco" onClick={scrollToTop}>Fale Conosco</NavItem>
        <NavItem to="/unidades" onClick={scrollToTop}>Unidades</NavItem>
        <ExternalNavItem href="https://amandaconde.com.br" target="_blank" rel="noopener noreferrer" onClick={scrollToTop}>Dra. Amanda</ExternalNavItem>
        <DisabledNavItem>Blog</DisabledNavItem>
      </Nav>

      {/* Ícone do Menu Mobile */}
      <MobileMenuIcon onClick={() => setIsMobileMenuOpen(true)}>
        <div></div>
        <div></div>
        <div></div>
      </MobileMenuIcon>

      {/* Menu Mobile */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <MobileMenuContainer
            initial={{ x: "100%" }}
            animate={{ x: 0 }}
            exit={{ x: "100%" }}
            transition={{ duration: 0.3 }}
          >
            <CloseButton onClick={() => setIsMobileMenuOpen(false)}>×</CloseButton>
            <NavItem to="/" end onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}>Home</NavItem>
            <NavItem to="/quem-somos" onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}>Quem Somos</NavItem>
            <NavItem to="/produtos" onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}>Produtos</NavItem>

            {/* Serviços no Menu Mobile */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <NavItem 
                to="/servicos" 
                onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}
                style={{ flex: 1 }}
              >
                Serviços
              </NavItem>
              <div 
                onClick={() => setIsMegaMenuMobileOpen2(!isMegaMenuMobileOpen2)}
                style={{ padding: '10px', cursor: 'pointer' }}
              >
                {isMegaMenuMobileOpen2 ? <FaChevronUp /> : <FaChevronDown />}
              </div>
            </div>

            {/* Mega Menu Serviços Mobile */}
            <AnimatePresence>
              {isMegaMenuMobileOpen2 && (
                <SubMenuContainer
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  transition={{ duration: 0.3 }}
                >
                  {[
                    { to: "/servicos/consultoria-amamentacao", label: "👶 Consultoria em amamentação" },
                    { to: "/servicos/exames-clinicos", label: "🩺 Exames clínicos" },
                    { to: "/servicos/aplicacao-medicacao", label: "💉 Aplicação de medicação e infusão" },
                    { to: "/servicos/pediatria", label: "👨‍⚕️ Pediatria Especializada" },
                    { to: "/servicos/vacinacao-corporativa", label: "🏢 Vacinação em empresas" },
                    { to: "/servicos/consulta-especialistas", label: "👩‍⚕️ Consulta com especialistas" }
                  ].map((service, index) => (
                    <NavItem key={index} to={service.to} onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}>
                      {service.label}
                    </NavItem>
                  ))}
                </SubMenuContainer>
              )}
            </AnimatePresence>

            {/* Vacinas no Menu Mobile */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <NavItem 
                to="/vacinas" 
                onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}
                style={{ flex: 1 }}
              >
                Vacinas
              </NavItem>
              <div 
                onClick={() => setIsMegaMenuMobileOpen(!isMegaMenuMobileOpen)}
                style={{ padding: '10px', cursor: 'pointer' }}
              >
                {isMegaMenuMobileOpen ? <FaChevronUp /> : <FaChevronDown />}
              </div>
            </div>

            {/* Mega Menu Vacinas Mobile */}
            <AnimatePresence>
              {isMegaMenuMobileOpen && (
                <SubMenuContainer
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  transition={{ duration: 0.3 }}
                >
                  {[
                    { to: "/vacinas/febre-amarela", label: "💉 Vacina febre amarela" }, 
                    { to: "/vacinas/tifoide", label: "🦠 Vacina tifoide" }, 
                    { to: "/vacinas/arexvy", label: "🫁 Vacina arexvy (vírus respiratório)" }, 
                    { to: "/vacinas/tetravalente", label: "💉 Vacina tetravalente" }, 
                    { to: "/vacinas/triplicebacteriana", label: "🛡️ Vacina tríplice bacteriana acelular" }, 
                    { to: "/vacinas/meningococica", label: "🧠 Vacina meningocócica" }, 
                    { to: "/vacinas/gripe", label: "🤒 Vacina influenza (gripe)" }, 
                    { to: "/vacinas/meningococicab", label: "🧠 Vacina meningocócica b" }, 
                    { to: "/vacinas/triplice", label: "🦠 Vacina tríplice viral" }, 
                    { to: "/vacinas/varicela", label: "🩹 Vacina varicela (catapora)" }, 
                    { to: "/vacinas/pneumococica", label: "🫁 Vacina pneumocócica 23" }, 
                    { to: "/vacinas/pentavalente", label: "💉 Vacina pentavalente" }, 
                    { to: "/vacinas/rotavirus", label: "💧 Vacina rotavírus" }, 
                    { to: "/vacinas/tetraviral", label: "💉 Vacina tetra viral" }, 
                    { to: "/vacinas/hpv", label: "🧬 Vacina hpv" }, 
                    { to: "/vacinas/hexavalente", label: "💉 Vacina hexavalente" }, 
                    { to: "/vacinas/herpes", label: "🩺 Vacina herpes zóster" }, 
                    { to: "/vacinas/hepatiteab", label: "🩺 Vacina hepatite a e b" }, 
                    { to: "/vacinas/hepatitea", label: "🩺 Vacina hepatite a" }, 
                    { to: "/vacinas/hepatiteb", label: "🩺 Vacina hepatite b" }, 
                    { to: "/vacinas/haemophilus", label: "🦠 Vacina haemophilus" }, 
                    { to: "/vacinas/efluelda", label: "💉 Vacina efluelda" }, 
                    { to: "/vacinas/dengue", label: "🦟 Vacina dengue" }, 
                    { to: "/vacinas/abrysvo", label: "🫁 Vacina abrysvo" }, 
                    { to: "/vacinas/tripliceinfantil", label: "👶 Vacina tríplice bacteriana acelular infantil" }, 
                  ].map((service, index) => (
                    <NavItem key={index} to={service.to} onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}>
                      {service.label}
                    </NavItem>
                  ))}
                </SubMenuContainer>
              )}
            </AnimatePresence>

            <NavItem to="/fale-conosco" onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}>Fale Conosco</NavItem>
            <NavItem to="/unidades" onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}>Unidades</NavItem>
            <ExternalNavItem 
              href="https://amandaconde.com.br" 
              target="_blank" 
              rel="noopener noreferrer"
              onClick={() => {setIsMobileMenuOpen(false); scrollToTop();}}
            >
              Dra. Amanda
            </ExternalNavItem>
            <DisabledNavItem>Blog</DisabledNavItem>
          </MobileMenuContainer>
        )}
      </AnimatePresence>
    </HeaderContainer>
  )
}

export default Header

Zerion Mini Shell 1.0