# Cơ chế Điều hướng: Single Sidebar & Iframe

Kiến trúc UI chính của nền tảng không dùng SPA framework cồng kềnh mà vận dụng cơ chế Single Sidebar kèm Iframe (`backend/static/main.html`), giúp code nhẹ và tách biệt.

## Quản lý Iframe và History API

Toàn bộ các module công cụ (như Chatbot, Text-to-SQL, Diagram Agent...) đều được nhúng vào một iframe lớn (`#contentFrame`).

### Quy trình Điều hướng (Navigation Flow)

```mermaid
sequenceDiagram
    participant User as Người Dùng
    participant main as main.html (Sidebar)
    participant Iframe as Iframe Content
    participant BrowserHistory as History API

    User->>main: Click vào Menu "Chatbot" (data-page)
    main->>main: Gọi navigateTo(el)
    main->>main: Lấy data-page (vd: "experiment_detail...")
    main->>Iframe: Thay đổi src = /static/... + ?t=timestamp
    Iframe-->>main: Tải trang giao diện mới
    main->>main: Xóa class .active cũ, thêm .active vào Menu vừa chọn
    main->>BrowserHistory: history.pushState({page}, "", "?page=...")
```

### Ưu điểm của cấu trúc này
1. **Tránh cache trình duyệt**: Mỗi lần đổi URL iframe, code sẽ nối thêm tham số timestamp `?t=Date.now()` để ép trình duyệt luôn lấy phiên bản mới nhất của module.
2. **Cập nhật URL không reload trang**: Hàm `history.pushState` đồng bộ trạng thái hiển thị của Iframe với URL của thẻ trình duyệt mẹ. Bạn có thể F5 hoặc gửi URL cho người khác mà trang vẫn mở lại đúng module đang làm việc.
3. **Xử lý Nút Back/Forward**: `main.html` lắng nghe event `popstate` để đổi ngược src của iframe mỗi khi bấm Back/Forward trên trình duyệt mẹ.