%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/MegaMenu.jsx

import styled from 'styled-components'
import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'

const MegaMenuContainer = styled(motion.div)`
  position: absolute;
  top: 50px;
  left: -150%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.1);
  padding: 15px;
  min-width: 300px;
  max-width: 600px;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;

  @media (max-width: 768px) {
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }
`

const MegaMenuItem = styled(Link)`
  padding: 10px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;

  &:hover {
    background: #007bff;
    color: white;
    transform: translateX(3px);
  }

  @media (max-width: 768px) {
    background: none;
    color: #0094d9;
    padding: 12px;
    font-size: 16px;
    &:hover {
      background: none;
      color: #3d9948;
    }
  }
`

const menuItems = [
  { to: "/vacinas/febre-amarela", label: "💉 Vacina Febre Amarela" }, // 💉 para injeção contra mosquito
  { to: "/vacinas/tifoide", label: "🦠 Vacina Tifoide" }, // 🦠 para bactéria Salmonella
  { to: "/vacinas/arexvy", label: "🫁 Vacina Arexvy (Vírus Respiratório)" }, // 🫁 para sistema respiratório
  { to: "/vacinas/tetravalente", label: "💉 Vacina Tetravalente" }, // 💉 para múltipla proteção
  { to: "/vacinas/triplicebacteriana", label: "🛡️ Vacina Tríplice Bacteriana Acelular" }, // 🛡️ para proteção bacteriana
  { to: "/vacinas/meningococica", label: "🧠 Vacina Meningocócica" }, // 🧠 mantido, relacionado ao cérebro/meningite
  { to: "/vacinas/gripe", label: "🤒 Vacina Influenza (Gripe)" }, // 🤒 para febre/sintomas de gripe
  { to: "/vacinas/meningococicab", label: "🧠 Vacina Meningocócica B" }, // 🧠 mantido, meningite tipo B
  { to: "/vacinas/triplice", label: "🦠 Vacina Tríplice Viral" }, // 🦠 para vírus (sarampo, caxumba, rubéola)
  { to: "/vacinas/varicela", label: "🩹 Vacina Varicela (Catapora)" }, // 🩹 para lesões de pele
  { to: "/vacinas/pneumococica", label: "🫁 Vacina Pneumocócica 23" }, // 🫁 para pulmões/pneumonia
  { to: "/vacinas/pentavalente", label: "💉 Vacina Pentavalente" }, // 💉 para múltipla proteção
  { to: "/vacinas/rotavirus", label: "💧 Vacina Rotavírus" }, // 💧 para diarreia/vírus intestinal
  { to: "/vacinas/tetraviral", label: "💉 Vacina Tetra Viral" }, // 💉 para múltipla proteção viral
  { to: "/vacinas/hpv", label: "🧬 Vacina HPV" }, // 🧬 mantido, relacionado ao DNA/vírus
  { to: "/vacinas/hexavalente", label: "💉 Vacina Hexavalente" }, // 💉 para múltipla proteção
  { to: "/vacinas/herpes", label: "🩺 Vacina Herpes Zóster" }, // 🩺 para cuidado com lesões/herpes
  { to: "/vacinas/hepatiteab", label: "🩺 Vacina Hepatite A e B" }, // 🩺 para fígado/saúde
  { to: "/vacinas/hepatitea", label: "🩺 Vacina Hepatite A" }, // 🩺 para fígado
  { to: "/vacinas/hepatiteb", label: "🩺 Vacina Hepatite B" }, // 🩺 para fígado
  { to: "/vacinas/haemophilus", label: "🦠 Vacina Haemophilus" }, // 🦠 para bactéria
  { to: "/vacinas/efluelda", label: "💉 Vacina Efluelda" }, // 💉 para influenza de alta dose
  { to: "/vacinas/dengue", label: "🦟 Vacina Dengue" }, // 🦟 mantido, mosquito transmissor
  { to: "/vacinas/abrysvo", label: "🫁 Vacina Abrysvo" }, // 🫁 para vírus respiratório
  { to: "/vacinas/tripliceinfantil", label: "👶 Vacina Tríplice Bacteriana Acelular Infantil" }, // 👶 mantido, foco infantil
  { to: "/vacinas/bcg", label: "🫁 Vacina BCG" }, // 👶 mantido, foco infantil
]

function MegaMenu() {
  return (
    <MegaMenuContainer
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.3, ease: 'easeOut' }}
    >
      {menuItems.map((item, index) => (
        <MegaMenuItem key={index} to={item.to}>{item.label}</MegaMenuItem>
      ))}
    </MegaMenuContainer>
  )
}

export default MegaMenu

Zerion Mini Shell 1.0