128 lines
3.4 KiB
Markdown
128 lines
3.4 KiB
Markdown
# Test de la Sidebar Redimensionnable
|
|
|
|
## Étapes pour tester
|
|
|
|
### 1. Redémarrer le serveur
|
|
|
|
```bash
|
|
# 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 :
|
|
```javascript
|
|
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 :
|
|
```javascript
|
|
// 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
|
|
|
|
```javascript
|
|
// 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
|