personotes/docs/SIDEBAR_RESIZE_TEST.md

Test de la Sidebar Redimensionnable

Étapes pour tester

1. Redémarrer le serveur

# Arrêter le serveur actuel (Ctrl+C)
# Puis relancer :
cd /home/mathieu/git/project-notes
go run ./cmd/server

2. Ouvrir l'application

http://localhost:8080

3. Tester le redimensionnement

1. Ouvrez la console développeur (F12) pour voir les logs
2. Vous devriez voir : Sidebar resize initialized
3. Survolez le bord droit de la sidebar (zone de 4px)
   • Le curseur devrait devenir ↔ (resize cursor)
   • Une fine ligne bleue devrait apparaître
4. Cliquez et glissez vers la droite ou la gauche
5. Relâchez pour sauvegarder la largeur
6. Rechargez la page (F5) - la largeur devrait être restaurée

4. Tests de limites

• Minimum : Essayez de réduire en dessous de 200px (bloqué)
• Maximum : Essayez d'agrandir au-delà de 600px (bloqué)

5. Reset (si nécessaire)

Dans la console développeur :

resetSidebarWidth()

Vérifications si ça ne fonctionne pas

1. Le script se charge-t-il ?

Dans la console développeur (F12), onglet Network :

• Cherchez sidebar-resize.js
• Status devrait être 200 OK
• Si 404, le serveur ne sert pas le fichier

2. Y a-t-il des erreurs JavaScript ?

Dans la console développeur (F12), onglet Console :

• Cherchez des erreurs en rouge
• Vous devriez voir : Sidebar resize initialized
• Si vous voyez Sidebar not found, le sélecteur #sidebar ne trouve pas l'élément

3. La poignée est-elle créée ?

Dans la console développeur (F12), onglet Elements/Inspecteur :

• Sélectionnez <aside id="sidebar">
• À l'intérieur, en bas, il devrait y avoir : <div class="sidebar-resize-handle" title="Drag to resize sidebar"></div>

4. Les styles CSS sont-ils appliqués ?

Dans la console développeur, inspectez .sidebar-resize-handle :

• width: 4px
• cursor: ew-resize
• position: absolute

Débogage avancé

Test manuel du script

Dans la console développeur :

// Vérifier que la sidebar existe
document.querySelector('#sidebar')

// Vérifier que la poignée existe
document.querySelector('.sidebar-resize-handle')

// Tester le redimensionnement manuel
const sidebar = document.querySelector('#sidebar');
sidebar.style.width = '400px';
document.querySelector('main').style.marginLeft = '400px';

Test de sauvegarde localStorage

// Sauvegarder une largeur
localStorage.setItem('sidebar-width', '400');

// Lire la largeur sauvegardée
localStorage.getItem('sidebar-width');

// Effacer
localStorage.removeItem('sidebar-width');

Problèmes connus et solutions

La poignée n'apparaît pas

• Cause : Styles CSS non chargés
• Solution : Vider le cache (Ctrl+Shift+R) et recharger

Le curseur ne change pas

• Cause : Z-index trop bas
• Solution : Vérifier que .sidebar-resize-handle a z-index: 11

Le resize ne fonctionne pas sur mobile

• Normal : Désactivé volontairement sur mobile (< 768px)
• La sidebar est fixe à 280px sur mobile

La sidebar saute au resize

• Cause : Transition CSS qui interfère
• Solution : Désactiver temporairement transition pendant le resize (déjà fait dans le CSS)

Support

Si ça ne fonctionne toujours pas après ces tests, fournir :

1. Screenshot de la console (onglet Console)
2. Screenshot de la console (onglet Network, fichier sidebar-resize.js)
3. Version du navigateur
4. Si mobile ou desktop