174 lines
7.8 KiB
Svelte
174 lines
7.8 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
|
|
// État actif pour la navigation
|
|
let activePage = window.location.hash.slice(1) || 'accueil';
|
|
let mobileMenuOpen = false;
|
|
let baseAppUrl = '';
|
|
|
|
// Déterminer les URLs en fonction de l'environnement
|
|
function getEnvironmentUrls() {
|
|
const hostname = window.location.hostname;
|
|
let appPrefix = '';
|
|
|
|
if (hostname === 'dev.geosector.fr' || hostname.includes('localhost')) {
|
|
appPrefix = 'dapp';
|
|
} else if (hostname === 'rec.geosector.fr') {
|
|
appPrefix = 'rapp';
|
|
} else {
|
|
// Production ou autres environnements
|
|
appPrefix = 'app';
|
|
}
|
|
|
|
// Construire l'URL de base de l'application
|
|
const domainParts = hostname.split('.');
|
|
if (domainParts.length >= 2) {
|
|
// Remplacer le sous-domaine ou ajouter un nouveau préfixe
|
|
const domain = domainParts.slice(Math.max(domainParts.length - 2, 0)).join('.');
|
|
return `https://${appPrefix}.${domain}`;
|
|
}
|
|
|
|
// Fallback pour localhost ou cas non prévus
|
|
return `https://${appPrefix}.geosector.fr`;
|
|
}
|
|
|
|
// Fonction pour changer de page
|
|
function changePage(page) {
|
|
activePage = page;
|
|
window.history.pushState({}, '', `/${page}`);
|
|
closeMobileMenu();
|
|
}
|
|
|
|
// Fonctions pour le menu mobile
|
|
function toggleMobileMenu() {
|
|
mobileMenuOpen = !mobileMenuOpen;
|
|
}
|
|
|
|
function closeMobileMenu() {
|
|
mobileMenuOpen = false;
|
|
}
|
|
|
|
// Écouter les événements popstate pour mettre à jour la page active
|
|
if (typeof window !== 'undefined') {
|
|
window.addEventListener('popstate', () => {
|
|
activePage = window.location.pathname.slice(1) || 'accueil';
|
|
});
|
|
}
|
|
|
|
// Initialiser les URLs et configurer les événements
|
|
onMount(() => {
|
|
// Déterminer l'URL de base de l'application
|
|
baseAppUrl = getEnvironmentUrls();
|
|
|
|
const handleClickOutside = (event) => {
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const burgerButton = document.getElementById('burger-button');
|
|
|
|
if (mobileMenuOpen && mobileMenu && burgerButton &&
|
|
!mobileMenu.contains(event.target) &&
|
|
!burgerButton.contains(event.target)) {
|
|
closeMobileMenu();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', handleClickOutside);
|
|
|
|
return () => {
|
|
document.removeEventListener('click', handleClickOutside);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<header class="text-white bg-transparent backdrop-blur-sm z-50 relative">
|
|
<div class="container mx-auto px-4 py-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<div class="mr-3">
|
|
<a href="/accueil" on:click|preventDefault={() => changePage('accueil')}>
|
|
<img src="/images/Logo-geosector-horizontal.svg" alt="Geosector" class="h-12" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Burger menu pour mobile -->
|
|
<button id="burger-button" class="xl:hidden z-50" on:click={toggleMobileMenu}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#002C66]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
{#if mobileMenuOpen}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
{:else}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
{/if}
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Menu desktop -->
|
|
<div class="hidden xl:flex items-center gap-6">
|
|
<nav>
|
|
<ul class="flex space-x-6">
|
|
<li>
|
|
<a href="/accueil" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'accueil' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('accueil')}> Accueil </a>
|
|
</li>
|
|
<li>
|
|
<a href="/fonctionnalites" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'fonctionnalites' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('fonctionnalites')}> Fonctionnalités </a>
|
|
</li>
|
|
<li>
|
|
<a href="/contact" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'contact' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('contact')}> Contact </a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="flex gap-3 items-center">
|
|
<a href="{baseAppUrl}/login/user" class="border-2 border-[#4CAF50] text-[#4CAF50] hover:bg-[#4CAF50] hover:text-white font-medium py-1.5 px-3 rounded-full transition-colors" on:click={() => { sessionStorage.setItem('loginType', 'user'); }}> Connexion Utilisateur </a>
|
|
<a href="{baseAppUrl}/login" class="border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-medium py-1.5 px-3 rounded-full transition-colors" on:click={() => { sessionStorage.setItem('loginType', 'admin'); }}> Connexion Administrateur </a>
|
|
<a href="{baseAppUrl}/register" class="bg-[#E3170A] hover:bg-red-700 text-white font-medium py-2 px-4 rounded-full transition-colors"> S'inscrire </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu mobile -->
|
|
<div id="mobile-menu" class={`fixed top-0 right-0 h-screen w-4/5 max-w-xs bg-white shadow-lg transform transition-transform duration-300 ease-in-out z-40 ${mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
|
<div class="p-6">
|
|
<div class="flex justify-end mb-8">
|
|
<button on:click={closeMobileMenu} class="text-gray-600" aria-label="Fermer le menu">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="mb-8">
|
|
<ul class="space-y-4">
|
|
<li>
|
|
<a href="/accueil" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'accueil' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('accueil')}> Accueil </a>
|
|
</li>
|
|
<li>
|
|
<a href="/fonctionnalites" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'fonctionnalites' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('fonctionnalites')}> Fonctionnalités </a>
|
|
</li>
|
|
<li>
|
|
<a href="/contact" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'contact' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('contact')}> Contact </a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="space-y-4">
|
|
<a href="{baseAppUrl}/login/user" class="block w-full border-2 border-[#4CAF50] text-[#4CAF50] hover:bg-[#4CAF50] hover:text-white font-medium py-2 px-4 rounded-full transition-colors text-center mb-3" on:click={() => { sessionStorage.setItem('loginType', 'user'); }}> Connexion Utilisateur </a>
|
|
<a href="{baseAppUrl}/login" class="block w-full border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-medium py-2 px-4 rounded-full transition-colors text-center mb-3" on:click={() => { sessionStorage.setItem('loginType', 'admin'); }}> Connexion Administrateur </a>
|
|
<a href="{baseAppUrl}/register" class="block w-full bg-[#E3170A] hover:bg-red-700 text-white font-medium py-2 px-4 rounded-full transition-colors text-center"> S'inscrire </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlay pour le fond lorsque le menu mobile est ouvert -->
|
|
{#if mobileMenuOpen}
|
|
<div
|
|
class="fixed inset-0 bg-black bg-opacity-50 z-30"
|
|
on:click={closeMobileMenu}
|
|
on:keydown={(e) => e.key === 'Escape' && closeMobileMenu()}
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Fermer le menu"
|
|
></div>
|
|
{/if}
|
|
</header>
|