<>📌 Sidebar là một UI component thường nằm ở bên trái hoặc bên phải của giao diện. Nó chứa menu điều hướng, danh mục, bộ lọc, hoặc thông tin bổ sung giúp người dùng dễ dàng truy cập nội dung chính.
📌 Các vị trí phổ biến của Sidebar:
🔹 Left Sidebar (Bên trái) – Thường dùng để điều hướng chính (navigation).
🔹 Right Sidebar (Bên phải) – Thường dùng để hiển thị nội dung bổ sung, bộ lọc hoặc quảng cáo.
🔹 Collapsible Sidebar (Có thể thu gọn) – Tiết kiệm không gian, chỉ mở khi cần.
🔹 Fixed Sidebar (Cố định) – Luôn hiển thị trên màn hình, không cuộn theo trang.
/Các loại Sidebar phổ biến
1️⃣ Navigation Sidebar (Thanh điều hướng)
📌 Chứa menu chính của ứng dụng hoặc website.
✔ Ví dụ: Dashboard Admin Panel, Web App Menu
2️⃣ Filter Sidebar (Thanh bộ lọc)
📌 Hiển thị các tùy chọn lọc dữ liệu (theo danh mục, giá cả, màu sắc, v.v.).
✔ Ví dụ: Sidebar bộ lọc sản phẩm trên Shopee, Amazon
3️⃣ Profile Sidebar (Thanh hồ sơ cá nhân)
📌 Hiển thị thông tin người dùng, avatar, cài đặt tài khoản.
✔ Ví dụ: Gmail Sidebar, Facebook Messenger
4️⃣ Content Sidebar (Thanh nội dung phụ)
📌 Chứa nội dung bổ sung như danh sách bài viết, quảng cáo, liên kết liên quan.
✔ Ví dụ: Sidebar trên blog hoặc trang tin tức
/Cấu trúc cơ bản của Sidebar
📌 Một Sidebar thường có 3 phần chính:
1️⃣ Header – Tiêu đề hoặc logo.
2️⃣ Navigation List / Content – Danh sách các mục điều hướng hoặc nội dung liên quan.
3️⃣ Footer – Cài đặt, đăng xuất, hoặc các tùy chọn khác.
/UX Best Practices cho Sidebar 🎨
✅ Sidebar không nên chiếm quá nhiều không gian
✔ Sidebar không nên rộng hơn 20-25% màn hình.
✅ Tạo khoảng cách hợp lý giữa các mục menu
✔ Dễ dàng click, tránh quá dày đặc.
✅ Nên có biểu tượng (icons) kèm text
✔ Giúp dễ nhận diện nhanh nội dung.
✅ Hỗ trợ hiển thị trên mobile (Responsive)
✔ Trên mobile, Sidebar nên chuyển thành off-canvas menu (chỉ xuất hiện khi nhấn vào nút menu).
✅ Sử dụng hiệu ứng mượt mà
✔ Nên có hiệu ứng mở/đóng nhẹ nhàng để trải nghiệm tốt hơn.
