jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nav): Réseaux AEP + Leaflet CSS global + double rAF NavMap + chips V2

Browse Source 
- app.vue : "Agences Inspirantes" → "Réseaux AEP" (desktop + mobile)
- nuxt.config.ts : Leaflet/MarkerCluster CSS global + Vite cacheDir AppData
- NavMap.vue : double requestAnimationFrame avant initMap (même fix NavMapV2)
- NavSidebar.vue : tags → style chip rounded-full comme V2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-07 00:32:50 +02:00
parent f518318d60
commit 05bbcc2a02
4 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.vue
View File

@@ -39,8 +39,7 @@
class="nav-tab" class="nav-tab"
:class="{ 'nav-tab--active': route.path === '/agences' }" :class="{ 'nav-tab--active': route.path === '/agences' }"
> >
Agences Inspirantes Réseaux AEP
<span class="nav-tab-badge">en construction</span>
</NuxtLink> </NuxtLink>
<NuxtLink <NuxtLink
to="/rag" to="/rag"
@@ -172,7 +171,7 @@
@click="hamburgerOpen = false" @click="hamburgerOpen = false"
> >
<NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink> <NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Agences Inspirantes</NuxtLink> <NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Réseaux AEP</NuxtLink>
<NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink> <NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink>
<NuxtLink to="/codev" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink> <NuxtLink to="/codev" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink>
<div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div> <div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div>

5
components/NavMap.vue
View File

@@ -221,7 +221,12 @@ function updateTileTheme(dark: boolean) {
let themeObserver: MutationObserver | null = null let themeObserver: MutationObserver | null = null
onMounted(() => { onMounted(() => {
// Double rAF : laisser le browser calculer la hauteur du conteneur avant Leaflet
requestAnimationFrame(() => {
requestAnimationFrame(() => {
initMap() initMap()
})
})
// Observer les changements de classe dark sur <html> // Observer les changements de classe dark sur <html>
themeObserver = new MutationObserver(() => { themeObserver = new MutationObserver(() => {

4
components/NavSidebar.vue
View File

@@ -125,8 +125,8 @@
<span <span
v-for="fn in orgFonctions(org)" v-for="fn in orgFonctions(org)"
:key="fn" :key="fn"
class="px-1.5 py-0.5 rounded text-xs" class="px-2 py-0.5 rounded-full text-xs font-medium"
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);" style="background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt); letter-spacing: 0.01em;"
>{{ fn }}</span> >{{ fn }}</span>
</div> </div>
<div v-if="org.localisation_ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);"> <div v-if="org.localisation_ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">

11
nuxt.config.ts
View File

@@ -1,6 +1,11 @@
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'], modules: ['@nuxtjs/tailwindcss'],
css: ['~/assets/css/main.css'], css: [
'~/assets/css/main.css',
'leaflet/dist/leaflet.css',
'leaflet.markercluster/dist/MarkerCluster.css',
'leaflet.markercluster/dist/MarkerCluster.Default.css',
],
runtimeConfig: { runtimeConfig: {
nocodbUrl: process.env.NOCODB_URL, nocodbUrl: process.env.NOCODB_URL,
@@ -24,10 +29,10 @@ export default defineNuxtConfig({
ssr: true, ssr: true,
vite: { vite: {
cacheDir: 'C:/Users/jules/AppData/Local/nav-carte-vite-cache',
optimizeDeps: { optimizeDeps: {
include: ['leaflet', 'leaflet.markercluster'], include: ['leaflet', 'leaflet.markercluster', 'd3'],
}, },
// Éviter l'import SSR de Leaflet qui utilise window
ssr: { ssr: {
noExternal: [], noExternal: [],
}, },