Sidebar - Copy this React, Mui Component to your project
"Tạo một giao diện admin panel lấy cảm hứng từ giao diện Thư viện (Library) của macOS với các đặc điểm cụ thể sau: 1. Sidebar (Thanh bên) Vị trí: Nằm phía trái màn hình, chiếm khoảng 20% chiều rộng toàn bộ giao diện. Màu sắc: Màu xám sáng (#F7F7F7) với màu phân cách nhẹ (#E0E0E0) giữa các mục. Thành phần: Danh sách các menu hiển thị dạng text kèm icon, ví dụ: "All Files", "Recents", "Favorites". Menu được phân nhóm với tiêu đề nhóm được viết hoa và cách điệu (vd: LIBRARY, TAGS). Hiệu ứng hover: Khi di chuột qua, menu chuyển sang màu nền xám nhạt hơn (#EDEDED) và highlight icon bằng màu xanh dương (#007AFF). Mục đang được chọn (active) có thanh highlight màu xanh dương sát bên trái (dày 3px). 2. Main Content (Khu vực chính) Bố cục chia thành 2 phần chính: Thanh công cụ phía trên (Toolbar): Chiều cao khoảng 60px, màu nền trắng (#FFFFFF). Có nút Search bar (placeholder: "Search...") nằm chính giữa hoặc bên phải. Các nút chức năng như Sort, View Options được đặt phía trên góc phải, với style phẳng và nhã nhặn. Khu vực hiển thị nội dung chính: Dùng bố cục grid hoặc list, tương tự macOS. Khi hiển thị grid, mỗi item là một ô vuông hoặc hình chữ nhật nhỏ, có hình ảnh (thumbnail), tên file, và kích thước. Khi hiển thị list, mỗi hàng có thông tin chi tiết (vd: tên file, ngày tạo, kích thước). 3. Visual Design (Thiết kế trực quan) Tông màu chính: Sidebar: Xám nhạt (#F7F7F7). Content: Nền trắng, tạo cảm giác sáng và sạch. Accent: Xanh dương (#007AFF) cho nút hoặc trạng thái được chọn. Đường viền: Sử dụng bo góc nhẹ (6px) cho card, nút, và các thành phần nội dung. Typography: Font chữ San Francisco hoặc font sans serif tương tự, kích thước 14 16px với khoảng cách dòng hợp lý. 4. Hiệu ứng và Trải nghiệm Sidebar có thể thu gọn (collapse) bằng một nút ở góc dưới cùng. Khi thu gọn, chỉ hiển thị icon menu. Các hiệu ứng transition mượt mà (tốc độ 0.3s) khi chuyển đổi giữa grid và list. Hover trên các file sẽ hiện biểu tượng hành động (vd: "Open", "Download"). 5. Tính năng Responsive Desktop: Sidebar luôn hiển thị, nội dung chính chiếm 80% còn lại. Tablet/Mobile: Sidebar thu nhỏ thành nút hamburger, nội dung hiển thị theo chiều dọc với bố cục list ưu tiên. Kết quả mong muốn: Giao diện tối giản, mang cảm giác quen thuộc như khi sử dụng Thư viện trên macOS, nhưng được tùy chỉnh để phục vụ mục đích quản lý admin."
