# 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