# Déploiement et publication

**Résumé express :** Créer plusieurs pages avec navigation, menus et routing pour une application multi-pages complète.

---

## Introduction à la navigation

Ce tutoriel explique comment créer différentes pages dans une application Luna Park et mettre en place un système de navigation entre elles.

## 1. Création de pages

### Principe de base
Créer une page = créer un composant avec **Type : Page**

### Première page (Home)
1. Créer un composant, le renommer **"home"**
2. **Type** : Page
3. Ajouter un **Custom Text** : "This is the home page"
4. **Path** : laisser vide (page par défaut = "/")

### Deuxième page (Options)
1. Créer un composant, le renommer **"options"**
2. **Type** : Page
3. **Path** : "option" (accessible via "/option")
4. Ajouter un **Custom Text** : "Options page"

### Vérification des URLs
- Page home : URL se termine par "/"
- Page options : URL se termine par "/option"

## 2. Composant Menu réutilisable

### Création du composant Menu
1. Nouveau composant **"menu"**
2. **Widget** → **Header Menu** (menu pré-fait Luna Park)
3. **Layout** : Stretch pour occuper tout l'espace disponible

### Configuration des liens
**Propriété "links" (tableau d'objets) :**

**Élément 1 :**
- **Label** : "Home"
- **Target** : "/" (racine)

**Élément 2 :**
- **Label** : "Options"
- **Target** : "/option"

### Comportement intelligent
- Lien actuel affiché en **bleu automatiquement**
- Detection automatique de la page courante

## 3. Intégration du menu

### Dans la page Home
1. Ajouter le composant **Menu**
2. "Home" apparaît en bleu (page active)

### Dans la page Options
1. Ajouter le composant **Menu**
2. "Options" apparaît en bleu (page active)

### Test de navigation
En mode **Preview** : clic sur les liens change automatiquement de page.

## 4. Alternatives pour les menus

### Widget Side Panel Layout
**Layout** → **Side Panel** : menu latéral gauche

### Router Link pour liens individuels
**Navigation** → **Router Link** : créer des liens personnalisés

### Exemple Router Link
1. Créer un **Router Link**
2. Texte : "Hello World"
3. Propriété **target** : "/option"
4. Clic redirige vers la page options

## Concepts de routing

### Structure d'URL
- **"/"** : page par défaut (home)
- **"/option"** : page spécifique
- **Path** dans les composants définit l'URL d'accès

### Navigation automatique
- **Changement d'URL** lors des clics
- **État actif** visuel automatique
- **Historique navigateur** fonctionnel

### Types de navigation
- **Header Menu** : navigation horizontale principale
- **Side Panel** : navigation latérale
- **Router Link** : liens contextuels dans le contenu

## Avantages système

### Réutilisabilité
- **Composant Menu** utilisable partout
- **Configuration centralisée** des liens
- **Cohérence** automatique de l'interface

### Simplicité
- **Pas de code de routing** complexe
- **Detection automatique** de l'état actif
- **URLs propres** et SEO-friendly

### Flexibilité
- **Multiple types** de menus disponibles
- **Personnalisation** via propriétés
- **Extensibilité** facile pour nouvelles pages

## Bonnes pratiques

### Nommage
- **Composants pages** : noms descriptifs (home, options)
- **Paths** : courts et explicites
- **Labels menus** : clairs pour l'utilisateur

### Organisation
- **Menu dans toutes les pages** pour navigation cohérente
- **Structure logique** des URLs
- **Composants réutilisables** pour maintenance facile

### Structure typique
           → Page d'accueil
/about      → À propos
/contact    → Contact
/products   → Produits
/admin      → Administration