Files

Alberto Balbo d25b4443c0 Aggiunta Bootstrap 5.3.3 (CSS, JS, RTL, mappe) al progetto

Sono stati aggiunti tutti i file principali di Bootstrap 5.3.3, inclusi CSS, JavaScript (bundle, ESM, UMD, minificati), versioni RTL, utility, reboot, griglia e relative mappe delle sorgenti. Questi file abilitano un sistema di design moderno, responsive e accessibile, con supporto per layout LTR e RTL, debugging avanzato tramite source map e tutte le funzionalità di Bootstrap per lo sviluppo dell’interfaccia utente. Nessuna modifica ai file esistenti.

2025-12-12 23:27:28 +01:00

5.3 KiB

Raw Blame History

?? DEBUG - Sidebar Collapse Toggle

Problema Riportato

Il pulsante per ridurre la sidebar a sole icone non funziona.

Modifiche Applicate

1. MainLayout.razor - Migliorato Toggle

private void ToggleSidebar()
{
    sidebarCollapsed = !sidebarCollapsed;
    SettingsService.UpdateSetting(nameof(AppSettings.SidebarCollapsed), sidebarCollapsed);
    StateHasChanged(); // ? AGGIUNTO: Force immediate UI update
    Console.WriteLine($"Sidebar toggled: collapsed={sidebarCollapsed}"); // ? AGGIUNTO: Debug log
}

Cosa fa:

? Forza il re-render immediato con StateHasChanged()
? Log nella console per debug
? Salva lo stato nelle impostazioni

2. MainLayout.razor.css - CSS Collapsed State

::deep .trading-bot-layout.collapsed .sidebar-brand {
    padding: 1.5rem 0.75rem !important;
    justify-content: center !important;
}

::deep .trading-bot-layout.collapsed .brand-logo {
    width: 3rem !important;
    height: 3rem !important;
}

Cosa fa:

? Riduce padding quando collapsed
? Centra il logo
? Riduce dimensione logo

Come Testare

1. Riavvia l'Applicazione

# Stop server
Ctrl + C

# Clean build
dotnet clean
dotnet build

# Run
dotnet run

2. Forza Cache Refresh

Ctrl + Shift + R (o Ctrl + F5)

3. Test del Button

Apri l'applicazione
Click sul pulsante [?] in alto a destra nella sidebar
Verifica che:
- La sidebar si riduca a ~80px
- Rimangano solo le icone
- Il logo si ridimensioni
- L'area contenuto si espanda

4. Verifica Console

Apri DevTools (F12) ? Console

Dovresti vedere:

Sidebar toggled: collapsed=true   (quando minimizzi)
Sidebar toggled: collapsed=false  (quando espandi)

Comportamento Atteso

Expanded (280px)

????????????????????????????
? [??] TradingBot    [?]  ? ? Button qui
?      ? ATTIVO            ?
????????????????????????????
? ??  Dashboard            ?
? ??  Strategie            ?
? ??  Asset                ?
? ...                      ?
????????????????????????????

Collapsed (80px)

???????
? [??]? ? Logo centrato
?     ?
???????
? ?? ? ? Solo icone
? ?? ?   centrate
? ?? ?
? ... ?
???????

Debug Checklist

Se il button ancora non funziona:

Build riuscito senza errori?
Cache browser pulita (Ctrl+Shift+R)?
Console mostra i log "Sidebar toggled"?
Ispeziona elemento: classe "collapsed" viene applicata al container?
CSS caricato correttamente (verifica in Network tab)?

Verifica con DevTools

1. Ispeziona il Container

F12 ? Elements tab
Cerca: <div class="trading-bot-layout ...">

Quando Expanded:

<div class="trading-bot-layout expanded">

Quando Collapsed:

<div class="trading-bot-layout collapsed">

2. Verifica CSS Applicato

Click su .modern-sidebar
Guarda tab "Computed" ? width

Expanded: width: 280px Collapsed: width: 80px

3. Verifica Button Click

Console tab
Click sul button [?]

Output atteso:

Sidebar toggled: collapsed=true

Possibili Cause se Non Funziona

1. CSS Non Caricato

Sintomo: Button visibile ma sidebar non cambia dimensione

Soluzione:

dotnet clean
dotnet build
Ctrl + Shift + R nel browser

2. JavaScript/SignalR Bloccato

Sintomo: Click non produce effetto, nessun log

Soluzione:

F12 ? Console ? Cerca errori
Riavvia server Blazor

3. Settings Service Non Salva

Sintomo: Toggle funziona ma non persiste al reload

Soluzione: Verifica file:

%LocalAppData%/TradingBot/appsettings.json

Cerca proprietà:

{
  "SidebarCollapsed": true/false
}

4. Binding Non Aggiornato

Sintomo: Classe non cambia nel DOM

Soluzione: Aggiungi nel code block:

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        Console.WriteLine($"Initial collapsed state: {sidebarCollapsed}");
    }
}

File Modificati

? Components/Layout/MainLayout.razor
- Aggiunto StateHasChanged()
- Aggiunto debug log
? Components/Layout/MainLayout.razor.css
- CSS specifico per collapsed state
- Riduzione dimensioni logo

Test Manuale Step-by-Step

? Avvia app: dotnet run
? Apri browser: https://localhost:[PORT]
? Hard refresh: Ctrl + Shift + R
? Apri DevTools: F12
? Vai su Console tab
? Click sul button [?]
? Verifica log: "Sidebar toggled: collapsed=true"
? Verifica visuale: Sidebar si riduce
? Click di nuovo: "Sidebar toggled: collapsed=false"
? Verifica visuale: Sidebar si espande

Expected Log Output

// Al caricamento
Initial collapsed state: false

// Click 1 (Minimize)
Sidebar toggled: collapsed=true

// Click 2 (Expand)
Sidebar toggled: collapsed=false

// Click 3 (Minimize)
Sidebar toggled: collapsed=true

CSS Transitions

Con le modifiche applicate, le transizioni dovrebbero essere smooth:

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

Durata: 300ms Easing: Smooth cubic-bezier

Support

Se dopo questi passaggi il button ancora non funziona:

?? Screenshot della sidebar
?? Log della Console (F12)
?? Ispeziona elemento HTML del container
?? Contenuto di appsettings.json

Status: ? Fix Applicato Build: ? Successful Test: ? Pending User Verification

5.3 KiB Raw Blame History