comment ne pas répéter ce code         return /*html*/ `
                <nav>
                    <ul>
                    <div class="left-part">
                    <li><a href="/">Personnages</a></li>
                    <li><a href="#/armes">Armes</a></li>
                    <li><a href="#/armures">Armures</a></li>
                    </div>
                    <li>Mes favoris</li>
                    </ul>
                <nav>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    ${html}
                </div>
            `;
      } sur tout les pages ou je veux une barre de navigation tout en gardant une conception clean ? // Instantiate API
import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import FavoriteManager from '../../services/FavoriteManager.js';

// In Home.js
export default class Home {
    async render() {
        let personnages = await PersonnagesProvider.FetchPersonnages();
        let html = personnages
          .map(
            (personnage) => /*html*/ `
                <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">${personnage.nom}</text></svg>
                    <div class="card-body">
                        <p class="card-text">${personnage.nom}</p>
                        <p>Force: <progress value="${personnage.statistiques.force}" max="500"></progress>${personnage.statistiques.force}/500</p>
                        <p>Dextérité: <progress value="${personnage.statistiques.dextérité}" max="500"></progress>${personnage.statistiques.dextérité}/500</p>
                        <p>Intelligence: <progress value="${personnage.statistiques.intelligence}" max="500"></progress>${personnage.statistiques.intelligence}/500</p>
                        <p>Santé: <progress value="${personnage.statistiques.santé}" max="500"></progress>${personnage.statistiques.santé}/500</p>
                        <p>Mana: <progress value="${personnage.statistiques.mana}" max="500"></progress>${personnage.statistiques.mana}/500</p>
                        <p>Defense: <progress value="${personnage.statistiques.defense}" max="500"></progress>${personnage.statistiques.defense}/500</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            <a href="#/personnage/${personnage.id}" class="btn btn-sm btn-outline-secondary">+ détail sur ${personnage.nom}</a>
                            </div>
                            <small class="text-body-secondary">${personnage.id}</small>
                            <a id="favori-${personnage.id}" onclick="FavoriteManager.toggleFavorites('${personnage.id}');">
                            ${FavoriteManager.isFavorite(personnage.id) ? 
                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"><path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/></svg>' : 
                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16"><path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/></svg>'} 
                        </a>
                        </div>
                    </div>
                </div>
                </div>
                `
          )
          .join("\n ");
      
        return /*html*/ `
                <nav>
                    <ul>
                    <div class="left-part">
                    <li><a href="/">Personnages</a></li>
                    <li><a href="#/armes">Armes</a></li>
                    <li><a href="#/armures">Armures</a></li>
                    </div>
                    <li>Mes favoris</li>
                    </ul>
                <nav>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    ${html}
                </div>
            `;
      }
}import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import Utils from "../../services/Utils.js";

export default class Personnage{

    async render(){
        let request = Utils.parseRequestURL();
        let personnage = await PersonnagesProvider.getPersonnages(request.id);
        personnage.map(p => {
            personnage = p;
        })        
        return /*html*/`
            <script>
                function testt(){
                    console.log("test");
                }
            </script>
            <section class="section">
                <h1> Nom : ${personnage.nom}</h1>
                <p> Classe : ${personnage.classe} </p>
                <p> Note : ${personnage.note} </p>
                <p> Niveau : ${personnage.niveau} </p>
            </section>
            <p><a href="">+ 100 expériences</a></p>
            <a onclick="testt();">Ajouter en favoris</a>
            <p><a href="/">Retour</a></p>
        `
    }
}import Home from './views/pages/Home.js';
import Error404 from './views/pages/Error404.js';
import Personnage from './views/pages/Personnage.js';
import Utils from './services/Utils.js';

const routes = {
    '/': Home,
    '/personnage/:id': Personnage,
};

const router = async () => {
    const content = null || document.querySelector('#content');
    let request = Utils.parseRequestURL()
    let parsedURL = (request.resource ? '/' + request.resource : '/') + (request.id ? '/:id' : '') + (request.verb ? '/' + request.verb : '')
    let page = routes[parsedURL] ? new routes[parsedURL] : new Error404
    content.innerHTML = await page.render();
}

window.addEventListener('hashchange', router);
window.addEventListener('load', router);import { ENDPOINT  } from "../config.js";

export default class PersonnagesProvider{

  static FetchPersonnages = async (limit = 10) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try {
      const response = await fetch(`${ENDPOINT}/personnages?_limit=${limit}`, options)
      const json = await response.json();
      return json
    } catch (err) {
      console.log('Error getting documents', err)
    }
  }

  static getPersonnages = async (id) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try{
      
      const response = await fetch(`${ENDPOINT}/personnages?id=` + id, options)
      const json = await response.json();
      return json;

    }catch (err){
      console.log('Error getting documents', err)
    }
  }
}