skycel
95ea9f760a
Story 2.1: - Navbar sticky avec logo et liens de navigation - Menu hamburger pour mobile (< 1024px) - JavaScript vanilla pour toggle menu et effet scroll - Accessibilité complète (aria-expanded, Escape, focus) - Classes CSS nav-link et nav-link-active - Intégration dans index.php avec $currentPage Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
85 lines
3.6 KiB
PHP
85 lines
3.6 KiB
PHP
<?php
|
|
/**
|
|
* Template Navbar
|
|
* Variables disponibles :
|
|
* - $currentPage (string) : identifiant de la page active ('home', 'projects', 'skills', 'about', 'contact')
|
|
*/
|
|
|
|
$currentPage = $currentPage ?? 'home';
|
|
|
|
$navLinks = [
|
|
['id' => 'home', 'label' => 'Accueil', 'url' => '/'],
|
|
['id' => 'projects', 'label' => 'Projets', 'url' => '/projets'],
|
|
['id' => 'skills', 'label' => 'Compétences', 'url' => '/competences'],
|
|
['id' => 'about', 'label' => 'Me Découvrir', 'url' => '/a-propos'],
|
|
['id' => 'contact', 'label' => 'Contact', 'url' => '/contact', 'isCta' => true],
|
|
];
|
|
?>
|
|
|
|
<header id="navbar" class="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border/50 transition-shadow duration-300">
|
|
<nav class="container-content" aria-label="Navigation principale">
|
|
<div class="flex items-center justify-between h-16 lg:h-20">
|
|
|
|
<!-- Logo -->
|
|
<a href="/" class="text-xl font-bold text-text-primary hover:text-primary transition-colors">
|
|
Portfolio
|
|
</a>
|
|
|
|
<!-- Navigation Desktop -->
|
|
<ul class="hidden lg:flex items-center gap-1">
|
|
<?php foreach ($navLinks as $link): ?>
|
|
<?php if (!empty($link['isCta'])): ?>
|
|
<li class="ml-4">
|
|
<a href="<?= $link['url'] ?>" class="btn-primary text-sm">
|
|
<?= $link['label'] ?>
|
|
</a>
|
|
</li>
|
|
<?php else: ?>
|
|
<li>
|
|
<a href="<?= $link['url'] ?>"
|
|
class="nav-link <?= $currentPage === $link['id'] ? 'nav-link-active' : '' ?>">
|
|
<?= $link['label'] ?>
|
|
</a>
|
|
</li>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
|
|
<!-- Bouton Hamburger Mobile -->
|
|
<button
|
|
id="mobile-menu-toggle"
|
|
class="lg:hidden p-2 text-text-primary hover:text-primary transition-colors"
|
|
aria-label="Ouvrir le menu"
|
|
aria-expanded="false"
|
|
aria-controls="mobile-menu"
|
|
>
|
|
<!-- Icône Hamburger -->
|
|
<svg class="w-6 h-6 hamburger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
<!-- Icône Close (hidden par défaut) -->
|
|
<svg class="w-6 h-6 close-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu Mobile -->
|
|
<div id="mobile-menu" class="lg:hidden hidden" aria-hidden="true">
|
|
<ul class="py-4 space-y-2 border-t border-border">
|
|
<?php foreach ($navLinks as $link): ?>
|
|
<li>
|
|
<a href="<?= $link['url'] ?>"
|
|
class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
|
|
<?= $link['label'] ?>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Spacer pour compenser la navbar fixed -->
|
|
<div class="h-16 lg:h-20"></div>
|