Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

[Insight extractor] Feature: Collapsible Sidebar with Expand Icon

Đang mở
  • Có gì không ổn?
#372 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
45/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Issue không nêu tên tệp hoặc test nào. Hãy bắt đầu bằng cách xác định các component sidebar và top navigation, sau đó theo dõi trạng thái thu gọn và hành vi layout của chúng. Hoàn thành khi sidebar được ẩn và khôi phục hoàn toàn, navigation chỉ hiển thị biểu tượng mở rộng trong khi đang thu gọn, nội dung thay đổi kích thước mà không bị chồng lấp và hành vi này hoạt động trên các kích thước màn hình khác nhau.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Bug
Image Image

Description
When the user clicks the collapse button on the sidebar, the entire sidebar should be hidden. Currently, only part of the sidebar is hidden. Once collapsed, an expand icon should appear in the top navigation bar to allow the user to restore the sidebar.

Requirements

Collapse Behavior

Clicking the collapse button hides the sidebar completely (not partially).

The main content area should automatically expand to use the freed space.

Expand Behavior

When the sidebar is collapsed, an expand icon appears in the top navigation bar.

Clicking this expand icon restores the sidebar to its full width.

UI/UX

Collapse button: positioned inside the sidebar (top-left-corner).

Expand button: positioned inside the top navigation bar (left side).

Image

Use consistent icons (e.g., left/right chevrons) to indicate collapse/expand actions.

Smooth transition animation (e.g., slide in/out or width transition) preferred.

Acceptance Criteria

✅ Sidebar fully disappears when collapse button is clicked.

✅ Top navigation bar shows expand icon when sidebar is collapsed.

✅ Clicking expand icon restores sidebar to full width.

✅ No layout overlap — main content expands/shrinks correctly.

✅ Behavior works across all screen sizes.

Ngôn ngữ chính
TypeScript
Star
21
Fork
18
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

  • Có Dockerfile hoặc tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của CodeForPhilly/balancer-main

Tất cả issue của CodeForPhilly/balancer-main

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.