Files
site-mv/header.php
T
rodrigo 6904171303 fix performance and new mobile menu
Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>
2026-02-22 16:46:43 -03:00

97 lines
4.7 KiB
PHP

<?php
/**
* Template: Header
*
* @package MartinsEVieira
*/
// Cache da URL da home para evitar múltiplas chamadas
$home_url = esc_url(home_url('/'));
$template_uri = get_template_directory_uri();
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Preconnect para recursos externos -->
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
<!-- Preload de recursos críticos -->
<link rel="preload" href="<?php echo $template_uri; ?>/logo/logo-horizontal.png" as="image">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
<!-- CSS Crítico Inline para melhor performance -->
<style>
:root{--primary-color:#20337b;--secondary-color:#ffffff;--text-dark:#333;--text-light:#666;--accent-gold:#c9a961;--bg-light:#f8f9fa}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--text-dark);line-height:1.6;overflow-x:hidden}
.site-header{background:var(--secondary-color);box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:999}
.header-container{max-width:1200px;margin:0 auto;padding:.8rem 2rem;display:flex;justify-content:space-between;align-items:center}
.logo img{max-height:65px;width:auto}
@media(max-width:768px){.main-nav{display:block!important}}
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<div class="header-container">
<div class="logo">
<?php if (has_custom_logo()) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<a href="<?php echo $home_url; ?>">
<img src="<?php echo $template_uri; ?>/logo/logo-horizontal.png" alt="Martins e Vieira Advocacia" width="200" height="60">
</a>
<?php endif; ?>
</div>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menu" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
<nav class="main-nav desktop-nav" aria-label="Navegação principal">
<ul>
<li><a href="<?php echo $home_url; ?>#inicio"><span class="nav-text">Início</span></a></li>
<li><a href="<?php echo $home_url; ?>#areas"><span class="nav-text">Áreas de Atuação</span></a></li>
<li><a href="<?php echo $home_url; ?>#sobre"><span class="nav-text">Sobre</span></a></li>
<li><a href="<?php echo $home_url; ?>#equipe"><span class="nav-text">Equipe</span></a></li>
<li><a href="<?php echo $home_url; ?>#blog"><span class="nav-text">Blog</span></a></li>
<li><a href="<?php echo $home_url; ?>#contato"><span class="nav-text">Contato</span></a></li>
<li class="theme-toggle-item">
<button class="theme-toggle" id="theme-toggle" aria-label="Alternar modo escuro">
<i class="fas fa-moon" aria-hidden="true"></i>
</button>
</li>
</ul>
</nav>
</div>
</header>
<!-- Menu Mobile (Separado do header para evitar conflitos de stacking context) -->
<div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>
<nav class="mobile-nav" id="mobile-nav" aria-label="Menu mobile">
<button class="mobile-menu-close" id="mobile-menu-close" aria-label="Fechar menu">
<i class="fas fa-times"></i>
</button>
<ul>
<li><a href="<?php echo $home_url; ?>#inicio"><i class="fas fa-home"></i><span>Início</span></a></li>
<li><a href="<?php echo $home_url; ?>#areas"><i class="fas fa-briefcase"></i><span>Áreas de Atuação</span></a></li>
<li><a href="<?php echo $home_url; ?>#sobre"><i class="fas fa-info-circle"></i><span>Sobre</span></a></li>
<li><a href="<?php echo $home_url; ?>#equipe"><i class="fas fa-user-tie"></i><span>Equipe</span></a></li>
<li><a href="<?php echo $home_url; ?>#blog"><i class="fas fa-newspaper"></i><span>Blog</span></a></li>
<li><a href="<?php echo $home_url; ?>#contato"><i class="fas fa-envelope"></i><span>Contato</span></a></li>
<li class="theme-toggle-mobile">
<button class="theme-toggle-btn" id="theme-toggle-mobile" aria-label="Alternar modo escuro">
<i class="fas fa-moon"></i>
<span>Modo Escuro</span>
</button>
</li>
</ul>
</nav>